SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Feb 2005
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Making a DIV highlight when you rollover

    Hi there,

    I'm trying to get the navigation on the left side of my site to change color when its rolled over:

    http://qmail.dyndns.org/mipproduct/css/

    Is it wise to use onmouseover or is there another way? I've looked into making the A tag 100% in the CSS but that doesn't seem to work as it's set to 100% already but the link only triggers when you move it over the text, not the width of the DIV it's in?

    Thanks

  2. #2
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    #sideNav li {
    	margin-bottom: 1px;
    	background-color: #F7F7F7;
    	font-size: 11px;
    	padding: 0;
    }
    
    #sideNav a {
    	padding: 5px 6px 5px;
    	display: block;
    }
    
    #sideNav a:hover {
    	background: #ddd;
    }
    The display: block is the key.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,279
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You need to set the anchor to display block for it to fill out the parent. You will also need to remove the padding from the parent and apply it to the anchor instead otherwise you won't get a full rollover.

    Set the line-height to the same size as the height and the text will vertically align automatically.

    Heres a quick example of your nav (adjust to suit).
    Code:
    #sideNav li
    {
    margin-bottom: 1px;
    background-color: #F7F7F7;
    font-size: 11px;
    padding:0}
    #sideNav a
    {
    padding-right:6px;
    display:block; 
    line-height:2.2em; 
    height:2.2em;
    }
    #sideNav a:hover {background:red}
    Hope that helps.

    Paul
    Edit:


    lol - Buddy beat me to it - I must be getting slow in my old age

  4. #4
    SitePoint Member
    Join Date
    Feb 2005
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Three things to that:

    1) thankyou! that's worked a treat

    2) why use em? i dont understand why you put em in there, and why i can't just stick to using my pixels as that's what I'm familiar with.

    3) any ideas why the rollovers are slow on IE?

  5. #5
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1) You're welcome.

    2) If you use pixels, your text can't be resized in IE - this is a big accessibility fubar, as some people like to have text larger or smaller than what you might like.

    3) They shouldn't be any different than FF; I know it does have issues with reloading background images, but I wouldn't have thought that would affect background colours.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,279
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI,
    3) any ideas why the rollovers are slow on IE
    Yes, it's because you have made those dotted lines by repeating a single dot all the way through the ul, therefore it has to redraw all the ul on hover.

    You should never repeat 1 pixel gifs as you will be there all day waiting for the page to draw. You could just repeat them on the bottom of the list in one line as follows.

    Code:
       #sideNav ul
       { 
    	text-align: right;
    	margin: 0px;
    	padding: 0px;
    	list-style-type:none;
       }
       #sideNav li
       {
    	height: 24px;
    	line-height: 24px;
    	background-color: ;
    	font-size: 11px;
    	padding: 0px;
    	background:#F7F7F7 url(http://qmail.dyndns.org/mipproduct/c...es/dots_bg.gif) repeat-x left bottom
       }
       #sideNav a
       { 
    	margin:1px 0;
    	padding-right: 6px;
    	display: block;
    	height: 24px;
    	line-height: 24px;
       }
    Paul


Bookmarks

Posting Permissions

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