...

View Full Version : two navs



NoeG
11-12-2010, 03:34 PM
I'm trying to style two different navs but hav never had to do this before
how do would I go about donig this? oh little shout out to w3schools I just modified their fully styled horizontal nav.

top nav


CSS
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:75px;
color:#333;
font-family:tahoma;
font-size:11px;
background-color:#fff;
text-align:center;
padding:4px;
text-decoration:none;
}
a:hover,a:active
{
background-color:#E8E8E8;
}

HTML

<ul>
<li><a href="#home">Link</a></li>
<li><a href="#news">link</a></li>
<li><a href="#contact">Link</a></li>
<li><a href="#about">Link</a></li>
</ul>

2nd nav


CSS

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

a:link {color:#333333; text-decoration:none}
a:visited {color:#333333; text-decoration:none}
a:hover {color:#333333; text-decoration:underline}
a:active {color:#333333; text-decoration:none}

li.grey {
background-color:#E8E8E8;
color: white;
}


html

<ul>
<li class="grey"><a href="#">About</a></li>
<li><a href="#">Archives</a></li>
<li class="grey"><a href="#">Tutorials</a></li>
<li><a href="#">Templates</a></li>
<li class="grey"><a href="#">Freebies</a></li>
<li><a href="#">Resources</a></li>
</ul>

SB65
11-12-2010, 04:23 PM
Give each nav a different id (or class) and then make your styling specific to that id in your css.

eg:
html

<ul id="nav1"> etc </ul>
<ul id="nav2"> etc </ul>

css

ul#nav1 {color:red;font-size:3em etc}
ul#nav2{color:blue;font-size:2em etc}

NoeG
11-12-2010, 04:27 PM
nevermind I figured it out..
for anyone who might have the same question if you have two navs and want them styled differently add a class what I did was on the first horizontal nav I put


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

#nav li
{
float:left;
}

#nav ul li a:link,a:visited
{
display:block;
width:75px;
color:#333;
font-family:tahoma;
font-size:11px;
background-color:#fff;
text-align:center;
padding:4px;
text-decoration:none;
}

#nav ul li a:hover,a:active
{
background-color:#E8E8E8;
}

and I left the other one the same
I just experimented a little and it worked so thats how I'm gonna code it

NoeG
11-12-2010, 04:29 PM
thank you I figured that out it only makes sense I was typing my reply while you were answering my question



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum