[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x

CSS

41K

Solutions

15K

Contributors

Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.

Share tech news, updates, or what's on your mind.

Sign up to Post

I have anchor links generated for pagination and css to change the color of when selected and also on hover.
Everything works except, I would like not to change the color of the text, of the selected anchor tag on hover. I tried the pseudo class a:hover:not(.selected), but i don't get the desired effect.


<div class="pagination">
    <a ...
    <a...
      ...
</div>

pagination {
    display : inline-block;
}
pagination  a{
    text-decoration : none;
 }
.pagination .selected {
   background-color:blue; color:white;
}
.pagination a:hover:not(.selected) {
   color: blue
}
0
HTML5 and CSS3 Fundamentals
LVL 12
HTML5 and CSS3 Fundamentals

Build a website from the ground up by first learning the fundamentals of HTML5 and CSS3, the two popular programming languages used to present content online. HTML deals with fonts, colors, graphics, and hyperlinks, while CSS describes how HTML elements are to be displayed.

Hi
I have built an ASP.net web application that I need design help with. I don't want to share my entire project with a cuss designer but rather give him just enough access to see my mark up code.
I have never done this before so am looking for advice on the best way to do this.
Is there a way in Visual Studio 2017 to collaborate in this way?
0
Is it possible to add CSS styling to a facebook og:image that you would use for a Facebook share? It needs to be dynamic as well.

So, here is my tag in its current state and it just grabs the image for that particular product. But, it is just an image. I want to use CSS to put a coloured block in the top right corner and put some styled text in there for example.

 <meta property="og:image" content="<?php echo URLROOT . '/uploads/optimized/900x600_' . $data['img_name']; ?>" />

Open in new window


Is this possible?
0
I have created a nav/tab menu, as below.
when user navigates to a particular tab, I want to add a border to the selected/active tab item, to show user that this particular tab is selected or say user is in this particular tab.

or may be even make the text bold for the selected item.

is this possible with just css or do we have to use javascript?

<ul class="nav">
  <li><a href="">Home</a></li>
  <li><a href="">About Us</a></li>
  <li><a href="">Contact</a></li>
</ul>

css  ...

.nav{
    list-style:none;
    margin:0;
    padding:0;
    text-align:center;
}
.nav li{
    display:inline;
}
.nav a{
    display:inline-block;
}
0
**Please note, I solved this before this question could publish. The issue was one of image size, not code. The image was simply too big!**
I will delete this when it goes live.

Please compare these two pages:
http://dev.magickitchen.com/

https://www.magickitchen.com

I just copied CSS and html from the dev site to live site.

But if you scroll down to What's Popular, you'll see that the first image doesn't slide all the way on the first image. At least not for me, on desktop, in Chrome.

left side is what I see on live site, right is dev.
Untitled-2.jpg
0
I am working with a Mobile app using XAML and WebView.  It is also using Angular.

In Angular, I know that this syntax is like a "placeholder" for actual data you want to put on the form:

{{task.PartActualEndDate}}

But what I need help determining is what formatting is being applied to this date value?  The CSS class "dataColSig" is just setting the width to 23%.

 <tr><td class="labelColSig">Date:</td><td class="dataColSig">{{task.PartActualEndDate}}</td><td class="labelColSig">Date:</td><td class="dataColSig">{{task.ActualEndDate}}</td><td class="labelColSig">Date:</td><td class="dataColSig">{{task.ApprovedDate}}</td></tr>

Open in new window


There is a lot of .js code to wade through.  How can I quickly find where the date format is being applied by Angular?

Debugging this at runtime is tricky, since this is a XAML app using WebView to display the HTML page.  I can't simply right-click and "Inspect element" on the HTML page at runtime.

I can set breakpoints in the JavaScript and then turn on Script as the debug type in Visual Studio ... so I do have that.  It's just that none of the breakpoints seem to be getting hit where task.PartActualEndDate is referenced in the .js code (that I  can tell).

Screenshot of the date values at runtime:

format date angular
0
I am trying to display a custom message when a user closes or about to close a browser tab. In the earlier versions of the browsers I could do this using onunload or onbeforeunload events and display a pop-up message but the newer versions do not allow me to customize the message. Is there anyway I can display a customized message when the user closes the browser tab or when clicks on the close button of the browser tab? A tool-tip could also work when the user is hovering on the close button or clicks on the close button of the browser. Thank you for any help.
0
Hi, I have CSS built vertical tabs. I am new to accessibility. I would like to add accessibility to my vertical tab. Can some one help with that.

expectation:
-----------------
When a end user, tabs through the vertical tab, they should be able to use Enter/Space bar keys on the  tab title  to see the corresponding tab content.

Attached is a HTML to show the vertical tab.

Any help appreciated.
0
I have few icons and images in svg format, that I need to untilize in asp.net site.
I added all the svg icons in an image tag as such

<img src=".../icon.svg>

this way I can't set the color of the svg icon. as there are quite a few icons , i'm using , what would be a best approach  to use such svg icons , so that i can set the color as well.
0
say, when there is a label/span/anchor next to an image/icon , what is the best way them to align them vertically, so that both are centered vertically.
for example , I have anchor tag and a input type of button next to each other in a div, like below, how can i align them vertically centered?

<div>
    <a href="" ...>
     <input type =button....>
</div>
0
Exploring SQL Server 2016: Fundamentals
LVL 12
Exploring SQL Server 2016: Fundamentals

Learn the fundamentals of Microsoft SQL Server, a relational database management system that stores and retrieves data when requested by other software applications.

I have an svg icon in my asp.net web site. how can I apply css to this svg file by just using a css file.
say I want to change the color of the this svg icon. is it possible to write just a css rule to do this?

<img src="content/images/companyicon.svg" alt="">
0
i have file upload control in my website, which is stand a button and show choose file, i want to change its css so it should show file icon instead of standard asp.net file upload control please advice
0
I have added a bootstrap 4 panel. how can I add a right arrow after the anchor tag , when it is collapsed and add a down arrow on expand?  

<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse">
      <div class="panel-body">Panel Body</div>
      <div class="panel-footer">Panel Footer</div>
    </div>
  </div>
</div>
0
Hello Experts,

I am trying to change background color of the Field Color Based on Value enter by user . Please check attached file for more details.
color1.php
ChangeColor-copy.jpg
0
Ive been looking into ways of replicating the textfields such as at CodeAnywhere, where when the textbox gets focus the watermark reduces in size.

Ive uploaded a screencapture of what Im trying to achive, Im sure there are jQuery plugins to do this, but cant find anything (probably cause not sure what Im searching for).
example.mp4

Anyone got any suggestions?
0
Using CSS, how can I hide the links that say Create an Account  or  Log In and when logged in it says My Account • Log Out

The webpage is here: https://ccdenver.org/givethanks/

Any ideas experts?
0
I have a GridVIew table in an ASP.net project. I need the column headings to be oriented vertically.

I have achieved this with the following steps:

1) Adding the following into the head:

    <style>
        .verticaltext
        {
            writing-mode: vertical-rl;
        }
    </style>

2) Adding the following into gvResults_DataBound:

For C = 2 To 16
      gvResults.HeaderRow.Cells(C).Text = "<div class=""verticaltext"">" & gvResults.Columns(C).HeaderText & "</div>"
Next

This has the required visual effect, but unfortunately breaks the ability to click the column heading to sort the table.

Can anyone suggest a way to re-orient the header text without breaking the sort functionality.

Thanks,

Richard
0
I am just looking for a simple, light jquery plugin. I want to load a popup box/window on my home page that displays this months specials/discounts. I don't want it to be intrusive, so I want to be able to control the placement. Ideally it will pop up from the bottom right portion of the screen. I also want to be able to choose the look and styling.

I cannot even believe the trouble I had with trying to google what I need. All I could find were modals or tooltips or onclick or windows that were fixed in the center of the screen. I tried several different wording on searches and went several pages deep in results, and cannot seem to find something that fulfills those requirements.

I figure someone on here might know of something off hand that they could recommend. Thanks!
0
CSS seems not working with Edge. OK with Chrome or IE.

this is the content of the css file.

table { margin: auto; font-family: Segoe UI; box-shadow: 10px 10px 5px #888; border: thin ridge grey; }
th { background: #0046c3; color: #fff; max-width: 400px; padding: 5px 10px; }
td { font-size: 11px; padding: 5px 20px; color: #000; }
tr { background: #b8d1f3; }
tr:nth-child(even) { background-color: #dae5f4; }
tr:nth-child(odd) { background-color: #b8d1f3; }
0
Amazon Web Services
LVL 12
Amazon Web Services

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

I have successfully installed tilemill and styled my maps using OSMBRIGHT as the a starting point
I've edited this theme to get it the way i need, it looks great apart from one thing:

I when zoom out to the world, the style is pretty bland (just one colour)
I wanted to use something like google streets on full zoom out level
https://www.google.com/maps/@-19.3740644,-55.8196685,4.18z

or like this
https://cloud.maptiler.com/customize/#streets/0.76/0/120.5

I've found something called natural earth 2 which also looks nice
http://www.shadedrelief.com/natural2/pages/about.html


My question is, how can i style OSM bright at max zoom out levels to look like the above?

I've been looking an it appears i need to apply GlobalLandCover layers like
landcover_treeland
landcover_cropland
landcover_scrubland
landcover_forestland
etc

I'm currently using Raster tiles

This is the base.mss that I was using as my starting point
https://github.com/mapbox/osm-bright/blob/master/osm-bright/base.mss

Can someone give me the code to achieve the above please?
0
Hi Experts
On my Live site I am trying to add some new Fields to my pages Like Image text etc
but when added these Fields  in WordPress Pages it not appear on the Live site or Preview Changes however they appear in Wordpress Page  Editor
0
Hello all,

Since the <center> tag is considered obsolete in HTML, I am wondering how to then align a set of radio buttons with a <table> document. I have tried using CSS here with the following:

radiobutton
{
text-align: center;

}

But instead got a result of the click-section centered themselves, but not the labels that precede the buttons. The radio-buttons themselves are associated with an id tag. Should I align them using the tag-reference instead?

What are your suggestions?
0
I am using 3rd party Search and I have more than 1000 HTML pages. The full HTML content is saved in database in separate rows.
In search results I display the page title from a Db field and some HTML content of 200 words. Everything works fine.

The Problem:
Some HTML pages (stored in db) have inline CSS and JS code like below:

<div class="content">
    <div class="field field-name-body field-label-hidden"><div class="field-items"><div class="field-item even"><style>
                        #dropBox {
                          border: 3px dashed #0087F7;
                          border-radius: 5px;
                          background: #F3F4F5;
                          cursor: pointer;
                        }

                        #dropBox {
                          min-height: 150px;
                          padding: 54px 54px;
                          box-sizing: border-box;
                        }

                        #dropBox p {
                          text-align: center;
                          margin: 2em 0;
                          font-size: 16px;
                          font-weight: bold;
                        }

                        #fileInput {
                          display: none;
                        }
                      </style>
					  
					  
  <script type="text/javascript">
    jQuery(document).ready(function(){
	
	 if (jQuery(&#039;#myline-check&#039;).is(":checked")) {
                    

Open in new window

0
Hello,
I am trying to create popups from image maps somewhat like the solution described here:
https://www.experts-exchange.com/questions/21436174/Javascript-popup-window-from-Image-Map.html#a14077290

...except
  • I don't want a browser title bar and URL to display - I want it to be more like a tooltip in appearance and positioning, except able to display the contents of a referenced .htm file.
  • I want the window to close when I click off of it
  • I want the window to be resizeable

I am a tech writer, not a coder, so I'm sorry if these things seem easy and obvious. I have found many sets of instructions for making image maps on the web, but they are usually for "jump" links, not for popups; or if they do use popups, the popup text is very short and included in the image map instead of in another .htm file and referenced.

Ideally, I would like the image map to be responsive as well ...I've been having the same problem with searching for this topic - I've found lots of info on making responsive image maps, but not image maps with popups that reference separate .htm files. :)
Thanks in advance.
0
I am formatting HTML email within Microsoft Flow.  I have fields from a SharePoint list that are currency fields, but Flow doesn't support currency and the fields have float type.  I can easily get them to an integer which truncates the two decimals or to a string which displays way too many.

My question is how to do this using HMTL code?  CSS and java script look like they may work but I don't want to depend on recipients to have it set up properly/.  Ideally I want to round to two decimal places (optional for currency fields), then format in US$.  

One thought was to multiply the value by 100, convert to type integer, then use substring() to chop it up into whole number and decimal pieces, then concatenate with $ but that woudn't handle comma delimiters.  And I have about ten such fields to email, so it's a lot of Flow code if not HTML code to accomplish.

Hope you have some suggestions.
0

CSS

41K

Solutions

15K

Contributors

Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.