homepage Welcome to WebmasterWorld Guest from 54.196.77.82
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
overriding CSS properties
kevcpu




msg:4184447
 9:21 pm on Aug 9, 2010 (gmt 0)

I have the following navigation menu CSS and need to disable the width: and height: settings defined in a previous location. Is this possible?

previous code:
#nav a:link, #nav a:active, #nav a:visited{
display:block;
padding:0px 5px;
color:#022d50;
text-decoration:none;
font-weight: bold;
padding-top: 10px;
width: 113px;
height: 31px;
}

latter code:
#nav li ul a{
float:left;
margin: auto;
}

So far I tried to set width and height to auto for "#nav li ul a" and it did not work.

 

Major_Payne




msg:4184457
 9:33 pm on Aug 9, 2010 (gmt 0)

What do you mean previous location? If you can edit the external CSS file, then that's where you would do the changes. If you have set the CSS code you posted as embedded CSS, then that should override any CSS style from an external CSS file.

One way is to use embedded CSS and modify the selector id "na" to something else. Maybe "navigation" or "navi". Then put this on the pages where you want the changes to take place:


<style type="text/css">
#navi a:link, #navi a:active, #navi a:visited{
display:block;
padding:0 5px;
color:#022d50;
text-decoration:none;
font-weight: bold;
padding-top: 10px;
width: 113px;
height: 31px;
}

latter code:
#navi li ul a{
float:left;
margin: auto;
}
</style>


That goes between the head tags of each page where nav menu is used. Still, better if you edited the external CSS file being used for the pages.

kevcpu




msg:4184471
 9:39 pm on Aug 9, 2010 (gmt 0)

The problem I am having is that the width and height settings for the first entry are messing up the settings for the latter code in my css file. I need to disable the width and height settings for the latter case. The latter case cannot have width and height settings. I need the width to grow according to the needs of the child content.

Major_Payne




msg:4184513
 11:22 pm on Aug 9, 2010 (gmt 0)

Well, you certainly lost me on this as any CSS that comes AFTER previous CSS for the same selector will override the previous one. Which is latter one? The one you posted? If so, then just remove the width/height.

I may be getting confused here because I am not seeing what you are seeing or seeing the whole picture.

LouiseMarie




msg:4188563
 10:11 am on Aug 18, 2010 (gmt 0)

If you are using the later code on a different page or withing a particaulr div on the page give it a parent id to select that code instead.

ie:
html:-
body id="latter" or div id="latter"
css:-
# latter #navi li ul a{
float:left;
margin: auto;
}

this tells it that inside the element id="latter" any id="navi" will use this code.

CSS is cascading so later codes will add to OR overwrite properties that are in previous ids/classes etc... so if you need the height and width to be specific in the second use then you need to add this to the latter css like:

# latter #navi li ul a{
float:left;
margin: auto;
height:0px;
width:0px;
}

LouiseMarie




msg:4188565
 10:13 am on Aug 18, 2010 (gmt 0)

Sorry just read your previous comment regarding the width and height properties, could you set the width and height in the latter code to auto or 100%?

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved