I have this page HERE (its for a project). At the top I have a #font-face dingbat mail character after the word "contact" in the top nav. I am trying to get it to transition to the color red on hover along with the word contact but I am not sure how to accomplish this, as of right now its stays black. Also when on the contact page I would like it to stay red like the word contact created with a css class. But anything I try with the transition I can't get to work on this mail character. Is this possible?
Thank You!
CSS is here
Try using the selector:
nav#main-nav ul li a:hover span {
text-decoration: overline;
color: #F00;
}
See if it goes red now.
Related
Hi guys i'm learning and progressing on CSS basics. I'm wondering how do you make the background of active menu bar set to orange? i tried
ul#mcolor li.active a {
color: rgb(25, 25, 25);
background-color: Black;
}
but it's not working. what do i need to add to my code to change the background color of avtive menu bar? Please point me to the right direction. Thanks in advance.
here's my code so far
http://jsfiddle.net/blackknights/jADWj/embedded/result/
Active page is currently Home
Take a look at Is there a CSS parent selector? thread and you will find out there is no way to call the parent of an a tag, in your example.
So you need to add the active class to your li tag, instead of a and then make your CSS like this one.
#mcolor li.active {
background: none repeat scroll 0 0 black !important;
}
I saw you used <font> tag with color. If you want to change the color property of your buttons with CSS, give the color to the a tag and avoid giving this to a <font>. Suggest you to take a look at W3Schools HTML tutorials.
You have to set the #active for the a element:
ul#mcolor li a.active {
background-color: orange;
color: Black;
}
In addition to that rgb(25, 25, 25) is a black color (and not a orange one).
See also http://www.colorcodehex.com/191919/.
There is way too much errors in example code. But for your current question:
ul#mcolor li.active a
you are using li.active but the active class are applied to a tag in your HTML.
Hope this will help...
Here is the fiddle which you looking for. http://jsfiddle.net/jADWj/4/embedded/result/
Just put active class to li. Thanks.
Say I have a div for the main body text of a webpage, and a navigation div for links to the rest of the website. Now say I want the links in the body text to be green instead of the usual blue, but I want the links in the navigation div to be yet another color, perhaps red. If I make links green in CSS, then all the links will be green. If I make the text in the navigation div red with CSS, the link attributes seem to override the div's attributes for links in the navigation div. How can I target only certain links when no links have any classes attached to them?
Because of CSS specificity (I love that word) rules, JMC's suggestion works.
Read more about that here:
http://htmldog.com/guides/cssadvanced/specificity/
Basically, the more specific the rule is, the more likely it is to be used.
Use descendant selectors.
Style regular links, then only links within the #nav div:
a:link { color: blue;
}
a:visited { color: purple;
}
.navigation a:link, .navigation a:visited { color: green
}
Example page,
Accompanying CSS
Should be a fairly basic issue but for some reason I can't figure it out.
Basically I want the links in my navbar to have no underline or colour change and remain white.
Any idea where I'm going wrong?
It's because you're selecting the main .links element, but not the actual a elements inside. This should do the trick:
.links a {
text-decoration: none;
color: white;
}
I'm trying to figure out why the text in the left navigation panel on the following page is shrinking & underlining when you mouseover in Firefox.
http://fundcentre.newireland.ie/
Everything on the left & top is part of a wrapper that we inject our content into. Our content is everything from "FUND CENTRE" down.
Can someone suggest something I could do to sort this issue out? Thanks.
Stick .content in front of all your CSS rules.
So a:hover { ... } becomes .content a:hover {...}
This will limit any damage to the content div which appears to be all yours.
There are a couple of styles applied in your newIreland.css files. Which are causing this behaviour.
.ClipboardLink a:link, a:hover, a:visited, a:active {
font-family:Arial,Verdana,Helvetica,Sans-Serif;
font-size:12px !important;
padding-bottom:2px;
text-decoration:underline !important;
// check this line making css important causes it to be underline when you hover over
}
Text on the menu with mouse hover louses "bold" and gets "underline", this because you have :hover behaviors assigned with does properties...
I've took a sneak-peak to your css, but it's way to dense for my time right now... and to repetitive as well!
Try simplifying your css with common class's and find all your :hover events, taking a closer look to does who work on the same html elements as the one's used for the menu...
better yet, assign to the menu id or
class an :hover event with the same
properties than does used for the menu in normal
state!!
Anyhow, I have a problem. A tiny problem I suppose, but one that's bugging me. I updated the CSS for my anchors on my blog, so that they were underlined with a border. Problem now is all my images that were linked are underlined, and it looks wrong.
So I assume the only way to fix this is to apply a CSS class to all the images inside anchors so that they have border: none;. I don't know how to do this though. Anyone willing to explain if this is even possible? Thanks in advance.
Try this:
<style type="text/css">
a img { text-decoration: none } // Images within
</style>
However, this is awfully general and if your anchors have padding, it won't work entirely, there may be residue underlining to the right and left of your image.
It would be better to turn underlining for links off in general, define a CSS class for your anchors, and turn underlining on in that class:
a { text-decoration: none }
a.my_anchor_class { text-decoration: underline }
Try this:
a img { border:none; vertical-align:top; }
It moves the underline to the top and underneath the image.
Underlining is controlled by the text-decoration CSS property. So if you want to turn that off:
a { text-decoration: none; }
In jQuery, you could use the has selector to add a class to all links that have an image inside them:
$('a:has(img)').addClass('image-link');
Then remove the border from those links in your CSS:
a.image-link {
border-bottom-style: none;
}
It would only work when JavaScript’s enabled though.