hosted by liquidweb


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

Forum Jump

Need help with css rollovers

Reply Post New Thread In Web Design and Content Subscription
 
Send news tip View All Posts Thread Tools Search this Thread Display Modes
  #1  
Old 12-01-2007, 02:39 PM
simple solutions simple solutions is offline
WHT 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>
and here are my styles:

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;
}
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?



Sponsored Links
  #2  
Old 12-01-2007, 02:53 PM
Steve_Arm Steve_Arm is offline
Community Guide
 
Join Date: Jan 2006
Location: Athens, Greece
Posts: 1,479
Quote:
Originally Posted by simple solutions View Post
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;
}

__________________


  #3  
Old 12-01-2007, 02:56 PM
Steve_Arm Steve_Arm is offline
Community Guide
 
Join Date: Jan 2006
Location: Athens, Greece
Posts: 1,479
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;
}

__________________


Sponsored Links
  #4  
Old 12-01-2007, 03:07 PM
stripeyteapot stripeyteapot is offline
Hmmm....
 
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

  #5  
Old 12-01-2007, 03:45 PM
simple solutions simple solutions is offline
WHT 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

  #6  
Old 12-01-2007, 04:05 PM
simple solutions simple solutions is offline
WHT Addict
 
Join Date: May 2006
Posts: 101
Quote:
Originally Posted by Steve_Arm View Post
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.

  #7  
Old 12-02-2007, 02:01 PM
rmfred rmfred is offline
Junior 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.

Reply

Related posts from TheWhir.com
Title Type Date Posted


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes
Postbit Selector

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off

Forum Jump
Login:
Log in with your username and password
Username:
Password:



Forgot Password?
Advertisement:
Web Hosting News:



 

X

Welcome to WebHostingTalk.com

Create your username to jump into the discussion!

WebHostingTalk.com is the largest, most influentual web hosting community on the Internet. Join us by filling in the form below.


(4 digit year)

Already a member?