...

View Full Version : Navigation inheriting paragraph styles (css)



johndove523
06-07-2010, 05:14 PM
Working on a new site and basically all my navigation li (list) properties are inheriting the (regular) p and a:link properties and I don't know why. See URL

http://backstageweb.net/Salon/index2.htm (css validates)

I want a horizontal navbar, nav css is:


#nav {
font-size:130%;
margin:50px 0 0 50px;
}

#nav ul {
list-style-type:none;
margin:0;
}

.nav li {
display:inline; /*not displaying correctly*/
}

.nav li a, .nav li a:visited {
float:left;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: bold; /*not displaying correctly*/
text-transform:uppercase; /*not displaying correctly*/
color:#666; /*not displaying correctly*/
padding:0 15px;
text-decoration:none;
}

.nav li a:hover {
color:#000;
text-decoration:underline;
}

What do I need to do get my nav styles to display correctly?

Thanks,

John

SB65
06-07-2010, 05:50 PM
Hi John

First, you have both the div and the ul with id="nav". You should be able to remove the div altogether.

Things aren't quite working as you want them because in your css you have


.nav li a{...etc ...}

This will apply to any li element within a parent element having class "nav". There aren't any of these. This should either be


li.nav a{...etc ...}

which applies to li elements having class "nav" or


#nav li a{...etc ...}

which applies to li elements having a parent element with id "nav".

Hope that makes sense for a quick fix. I'd suggest that it may be a bit confusing to have both a class and an id of the same name and it may be easier to understand if you don't do this. Here's a suggestion to make things clearer

html:note ul has an id and li elements have neither class or id

<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Info</a></li>
</ul>


css:

#nav {
font-size:130%;
margin:50px 0 0 50px;
list-style-type:none;
}

#nav li {
display:inline;
}

#nav li a, #nav li a:visited {
float:left;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: bold;
text-transform:uppercase;
color:#666;
padding:0 15px;
text-decoration:none;
}

#nav li a:hover {
color:#000;
text-decoration:underline;
}

johndove523
06-07-2010, 06:59 PM
SB,

Thanks so much for your thoughtful reply. I haven't fixed it yet but I get it. : ) Navigation and LISTS!! These are the two main areas of css that I don't fully understand the relationships of what needs to be coded where.

Thanks again very much for helping me!

John



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum