Results 1 to 7 of 7
  1. #1

    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?

  2. #2
    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. #3
    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;
    }

  4. #4
    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. #5
    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. #6
    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. #7
    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.

Related Posts from theWHIR.com

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •