SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard
    Join Date
    Mar 2008
    Location
    United Kingdom
    Posts
    1,285
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS LI issue with Horitzonal list

    Hi,

    I'm using the following HTML/CSS.

    Basically I want the white 'pipes' to be the same height as the text(which it is).
    However, I'd like the <li> itself to be the full 30px in height so that when the mouse is placed on a link, then the images/li_a_hover_bg.jpg takes up the full height in the backgound, and not just for the link.


    Can anyone please help me with this?



    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>CSS Test</title>
    
    		<style type="text/css">
    				#subnav {background:#000; height:30px}
    				#subnav ul {padding:5px 0 0 10px}
    				#subnav ul li {	display: inline; list-style-type:none;	}
    				
    				#subnav li a {
    				font-size:13px;
    				border-right:1px solid #fff;
    				color:#333;
    				padding:0px 7px 0px 0px;
    				margin: 0;
    				}
    				
    				#subnav li:hover {
    				background: url('images/li_a_hover_bg.jpg') repeat-x;
    				}
    		</style>
    
    </head>
    
    	<body>
    
    		<div id="subnav">
    
    		
    			<ul>
    			
    				<li><a href="#">Home</a></li>		
    				<li><a href="#">Tester 1</a></li>		
    				<li><a href="#">Contact us</a></li>		
    				<li><a href="#">Tester 2</a></li>		
    				<li><a href="#">Testimonials</a></li>		
    				<li><a href="#">Gallery</a></li>
    				
    			</ul>
    
    			
    		</div>
    
    	</body>
    	
    </html>

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

    I would float the list and then it can take the full height.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>CSS Test</title>
    <style type="text/css">
    #subnav {
        background:#000;
        height:30px
    }
    #subnav ul {
        padding:0 0 0 10px
    }
    #subnav ul li {
        display: inline;
        list-style-type:none;
        height:30px;
        line-height:30px;
        float:left;
        margin:0 2px;
    }
    #subnav li a {
        font-size:13px;
        border-right:1px solid #fff;
        color:#333;
        padding:0px 7px 0px 0px;
        margin: 0;
    
    }
    #subnav li:hover {
        background:red url('images/li_a_hover_bg.jpg') repeat-x;
    }
    </style>
    </head>
    <body>
    <div id="subnav">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Tester 1</a></li>
            <li><a href="#">Contact us</a></li>
            <li><a href="#">Tester 2</a></li>
            <li><a href="#">Testimonials</a></li>
            <li><a href="#">Gallery</a></li>
        </ul>
    </div>
    </body>
    </html>
    The li:hover won't work in IE6 but I assume you knew that.

  3. #3
    SitePoint Wizard
    Join Date
    Mar 2008
    Location
    United Kingdom
    Posts
    1,285
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hah yeh, that's what I thought.

    I used the same technique on another site, then my big grin turned to a sad-sad face when looking at it in IE6. Ach, no-one will notice

  4. #4
    SitePoint Wizard
    Join Date
    Mar 2008
    Location
    United Kingdom
    Posts
    1,285
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul, that worked a treat. Going to setup a separate declaration for IE6 now

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    If you wanted to support IE6 then you would need an inner element such as a span inside the anchor and then the styles you had on the anchor you apply to the span instead and the styles for the list get applied to the anchor where you can use the hover.

  6. #6
    SitePoint Wizard
    Join Date
    Mar 2008
    Location
    United Kingdom
    Posts
    1,285
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Aaaah ok, would the span be empty?
    But in the CSS the span would have a background?

    Like:

    Code:
    #subnav span {
     background:url('images/nav-hover-bg.png') repeat-x;
    }
    and
    HTML Code:
    <div id="subnav">		
    			<ul><li><a href="#">Home</a><span></span></li></ul>
    </div>
    ?

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    No, I meant nested

    Code:
    <div id="subnav">		
    			<ul><li><a href="#"><span>Home</span></a></li></ul>
    </div>

    What you are doing is effectively ignoring the list element as far as styling is concerned and then applying the styles to the anchor and the span in the same way that the original code applied the styles to the list and anchor.

    It's exactly the same except that it now allows you to apply hover styles to the anchor rather than the list element as in your first example.


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
  •