PDA

View Full Version : Css based horizontal menu



greens85
Jun 30th, 2009, 03:36 PM
Hi all,

I currently have a menu that works exactly as intended however each button in the menu is the same colour. What I would like to do (if possible) is to have each button a seperate colour.

The code I have is:

HTML:


<div id="nav">
<ul>
<li><a href="agency.html">I AM AN AGENCY</a></li>
<li><a href="jobseeker.html">I AM A JOBSEEKER</a></li>
<li><a href="school.html">I AM A SCHOOL</a></li>
</ul>
</div>

CSS:


#nav {
border:1px solid #000000;
color:#000000;
font-weight:bold;
height:50px;
}

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

#nav li {
float:left;
}

#nav li a {
background-color:#184BB8;
height:50px;
width:368px;
line-height:3em;
float:left;
display:block;
color:#FFFFFF;
text-decoration:none;
text-align:center;
border-right:1px solid #000000;
}

#nav li a:hover {
background-color:#0066FF;
height:50px;
width:368px;
line-height:3em;
float:left;
display:block;
color:#FFFFFF;
text-decoration:underline;
text-align:center;
}

/* Hide from IE5-Mac \*/
#nav li a {
float: none
}
/* End hide */

#nav {
width:auto;
}

Can anybody help me out here?

Thanks

abduraooft
Jun 30th, 2009, 03:58 PM
Set an id/class to each of your anchors, like

<ul>
<li><a class="agency" href="agency.html">I AM AN AGENCY</a></li>
<li><a class="jobseeker" href="jobseeker.html">I AM A JOBSEEKER</a></li>
<li><a class="school" href="school.html">I AM A SCHOOL</a></li>
</ul> and then change your CSS like

#nav li a {
/*background-color:#184BB8;*/
height:50px;
width:368px;
line-height:3em;
float:left;
display:block;
color:#FFFFFF;
text-decoration:none;
text-align:center;
border-right:1px solid #000000;
}
#nav li a.agency{
background-color:#184BB8;
}
#nav li a.agency{
background-color:/* another color here*/;
}
#nav li a.school{
background-color:/* another one here*/;
}

greens85
Jun 30th, 2009, 04:11 PM
Thank, exactly what i was looking for!!!