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

CSS Forum

    
overriding CSS properties
kevcpu



 
Msg#: 4184445 posted 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#: 4184445 posted 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#: 4184445 posted 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#: 4184445 posted 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

5+ Year Member



 
Msg#: 4184445 posted 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

5+ Year Member



 
Msg#: 4184445 posted 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