Web Hosting Talk : Web Hosting Main Forums : Web Design and Content : Need help with css rollovers

[simple solutions]

I have this navagation and I need to get the background of the tab to rollover to a black background when the mouse goes over the tab, not just the text.

an example would be the left bar navagation on http://webdesign.org

Heres my navagation:

      <div id="links">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About us</a></li>
          <li><a href="#">Tattoo Gallery</a></li>
          <li><a href="#">Contact Me</a></li>
        </ul>
      </div>

and here are my styles:

#links ul {
	margin:0px; 
	padding-top:67px;
}

#links li{
	float:left;
	list-style-type:none;
	width:129px;
	height:25px;
	text-align:center;
	background-color:#858080;
	margin-left:1px;
	padding-top:4px;
}

#links a{
	font-family:"Trebuchet MS";
	font-size:14px;
	color:#fff;
	font-weight:normal;
	text-decoration:none;
}

#links a:hover{
	font-family:"Trebuchet MS";
	font-size:14px;
	color:#942a2a;
	font-weight:normal;
	text-decoration:none;
}

you can see it in action right now at: dreamspire.net/tat/index.html

i need them to be horizontal like tabs, but i may need to change how i made them.

can anyone tell me how to make the whole tab background roll over?

[Steve_Arm]

Originally Posted by simple solutions

i need them to be horizontal like tabs, but i may need to change how i made them.

No offense, but If you had made it, you would no that it is as simple as writing:
background-color: #000;

#links a:hover{
font-family:"Trebuchet MS";
font-size:14px;
color:#942a2a;
font-weight:normal;
text-decoration:none;
background-color: #000;
}

[Steve_Arm]

Plus some minor changes:

#links li{
float:left;
list-style-type:none;
width:129px;
height:25px;
text-align:center;
background-color:#858080;
margin-left:1px;
}

#links a{
font-family:"Trebuchet MS";
font-size:11px;
color:#fff;
font-weight:normal;
text-decoration:none;
display: block;
height:25px;
line-height: 25px;
}

#links a:hover{
font-family:"Trebuchet MS";
font-size:11px;
color:#fff;
font-weight:normal;
text-decoration:underline;
background-color: #000;
}

[stripeyteapot]

I'm unsure why you would give your UL a container specifically when it contains no other information, other than a list. There are circumstances when you would wrap this, for example adding an extra background or for special alignment, however you don't seem to be doing that, so it's unrequired.

You should also note that you don't need to set your font-family repeatedly.

The simplest way would be to float your LI left, and apply display:block; to your '#links a' tag. I would also get rid of setting height and width expliticly, since you're bound to run into problems further down the road if you do so. Instead, just apply some padding this way it will expand/retract as required by the users setup.

Hope this helps

[simple solutions]

thanks for your help. sorry for my lack of knowledge, i am very new to css and im trying to learn more as i play around with it

[simple solutions]

Originally Posted by Steve_Arm

No offense, but If you had made it, you would no that it is as simple as writing:
background-color: #000;

#links a:hover{
font-family:"Trebuchet MS";
font-size:14px;
color:#942a2a;
font-weight:normal;
text-decoration:none;
background-color: #000;
}

no that only changes the background of the text. thats not what im talking about.

[rmfred]

To be blunt you really should redo your code for the menu...
however, if you remove everything except the float and list-style from the links li and put it on the links a

and add display:block to links a

and put background:#000; on the hover declaration like steve said it will do what you want.