Jump to content

Question about ID and menus.


GuyBri89
 Share

Recommended Posts

I am in the process of making a test website, and I noticed that my custom menu was affected by regular CSS.Menu CSS

#navigation{font-family:Arial;font-weight:bold;}#navigation li{list-style:none;list-style-type:none;/* Doing this to make sure the links look the same in all browsers */}#navigation a:link, a:hover, a:visited, a:active;{background-color:#c0c0c0;color:#FF0000;display:inline;margin:0;padding:0;border-bottom: 1px solid red;}

Yet I notice that this CSS affects it somehow.

a:link, a:hover, a:visited, a:active{font-family:"Times New Roman";font-weight:bold;text-transform:capitalize;color:ff00ff;}

Why is this happening?Additional info:OS: Windows 7WB: The feared firefox v3 or 4 (will have to ask the fiance).HTML/CSS/PHP editor: Notepad.

Link to comment
Share on other sites

Firstly, it would help to know how the menu looks. Also, you should not be putting a semi-colon at the end of this line of selectors:

#navigation a:link, a:hover, a:visited, a:active;

Properties declared in this^ selector should override the properties declared in this selector:

a:link, a:hover, a:visited, a:active

a:link, a:hover, a:visited, a:active{font-family:"Times New Roman";font-weight:bold;text-transform:capitalize;color:ff00ff;}#navigation a:link, a:hover, a:visited, a:active{background-color:#c0c0c0;color:#FF0000;display:inline;margin:0;padding:0;border-bottom: 1px solid red;}

Edited by Fmdpa
Link to comment
Share on other sites

Yes, but why do they over ride normal links not in the navigation menu?Am I going to have to use more IDs or Classes to fix this?
simple, because you aren't being specific enough with your selector. If you just use
a:hover

you're going to target all anchor tags. That's why you added the #navigation selector, so that your menu links look different from the rest. So if you have another container with links you want to style seperately, just do the same thing:

#some_element a:hover, a:active

to only target those anchor tags who are in #some_element

Edited by thescientist
Link to comment
Share on other sites

simple, because you aren't being specific enough with your selector. If you just use
a:hover

you're going to target all anchor tags. That's why you added the #navigation selector, so that your menu links look different from the rest. So if you have another container with links you want to style seperately, just do the same thing:

#some_element a:hover, a:active

to only target those anchor tags who are in #some_element

Looking at this post and going back through the CSS tutorial on the links chapter, I can see where I went wrong with this one. Thanks. :)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...