Results 1 to 7 of 7
Thread: Need help with css rollovers
-
12-01-2007, 02:39 PM #1WHT Addict
- Join Date
- May 2006
- Posts
- 101
Need help with css rollovers
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:
Code:<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>
Code:#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; }
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?
-
12-01-2007, 02:53 PM #2Web Hosting Master
- Join Date
- Jan 2006
- Location
- Athens, Greece
- Posts
- 1,481
-
12-01-2007, 02:56 PM #3Web Hosting Master
- Join Date
- Jan 2006
- Location
- Athens, Greece
- Posts
- 1,481
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;
}
-
12-01-2007, 03:07 PM #4Hmmm....
- Join Date
- Apr 2003
- Location
- UK
- Posts
- 2,341
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███ ServeYourSite
███ Web hosting done right
███ Shared, Reseller and Dedicated web hosting
███ An Easy Web Presence Company
-
12-01-2007, 03:45 PM #5WHT Addict
- Join Date
- May 2006
- Posts
- 101
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
-
12-01-2007, 04:05 PM #6WHT Addict
- Join Date
- May 2006
- Posts
- 101
-
12-02-2007, 02:01 PM #7Junior Guru Wannabe
- Join Date
- Aug 2006
- Posts
- 46
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.