SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Addict
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Controlling Lists For Navigation

    I recently found out that the navigation on a site I had created (http://www.studentsagainstterrorism.org/) was not funtional on IE 5. So I went searching for alternate methods that would look basically the same and came up with a tutorial on taming lists with CSS by A List Apart (http://www.alistapart.com/stories/taminglists/). The problem I am having is getting the right borders of the list items to stretch to the full height of the navigation bar that the list is contained in. As you can see on http://www.studentsagainstterrorism.org/index1.htm, the list items are at the top of the navigation bar, and don't go the full height down. Does anyone know how to fix this?

    Here's the CSS code for the nav bar:
    Code:
    #nav {
    position: absolute;
    top: 205px;
    left: 0;
    height: 20px;
    width:725px;
    margin: 0;
    padding: 0;
    text-align: left;
    background-image: url("i/nav-bg.gif"); 
    background-repeat: repeat-x;
     font-size: 9px;
     font-family: Verdana;
    }
    
    #nav ul {
    	margin-left: 0;
    	padding-left: 0;
    	display: inline;
    } 
    
    #nav ul li {
    	margin-left: 0;
    	padding: 0 20px 0 20px;
    	border-right: 1px solid #000;
    	list-style: none;
    	display: inline;
    }
    	
    #nav a:link, #nav a:visited {
    text-decoration: none;
    color: #000000
    }
    
    #nav a:hover {
    text-decoration: none;
    color: #ffffff
    }
    Thanks in advance!

  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,

    Your border is full height but relative to the line height of the list item. Increase the padding on your list item to increase the border, then set the line height to the same width as the nav.

    e.g.
    Code:
    #nav ul li {
     line-height:20px;
     margin-left: 0;
     padding: 4px 20px 3px 20px;
     border-right: 1px solid #000;
     list-style: none;
     display: inline;
    }
    This should get the effect you want (with any luck .

    Paul

  3. #3
    SitePoint Addict
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It works!

    When you hover over the text, the color of the text changes, and the link works. But is there a way to make it so that when you hover over the list item box itself, the color will change of the text, istead of just hovering over the text?

  4. #4
    SitePoint Wizard
    Join Date
    May 2003
    Location
    Berlin, Germany
    Posts
    1,829
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Then you would have to make it so that you set the width for a { } to 150px or so (adjust the bg color) and then a:hover { } would change the bg color.

    Hope this helps.

  5. #5
    SitePoint Addict
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, what I meant though was still not to change anything except the text color on a:hover, but to have that text change color when you hover over the list item's box, and not just the text itself. A good example is on the navigation of http://www.spoono.com (without the bg color or border color change).

  6. #6
    SitePoint Wizard
    Join Date
    May 2003
    Location
    Berlin, Germany
    Posts
    1,829
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, it's just the same: adjust the height and width for the a - selector and change the font color on a:hover. Should work fine.

    Example:

    Code:
    #nav a {
    	font-weight: normal;
    	text-decoration: none;
    	border-bottom: 1px solid #424547;
    	color: #eeeeee;
    	background: #000000;
    	display: block;
    	margin: 0;
    	padding: 2px 2px 2px 20px;
    	width: 164px;
    	font-size: 8pt;
    }
    
    #nav a:hover {
    	color: #fff;
    }

  7. #7
    SitePoint Addict
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem is that the width changes for each so is there a way to universaly do it? and could you give a code example that matches mine?

    Here's the updated code for the nav bar:
    Code:
    #nav {
    position: absolute;
    top: 205px;
    left: 0;
    height: 20px;
    width:725px;
    margin: 0;
    padding: 0;
    text-align: left;
    background-image: url("i/nav-bg.gif");
    color: #fff;
    background-repeat: repeat-x;
    font: 9px Verdana;
    }
    
    #nav ul {
    	margin: 0;
    	padding: 0;
    	display: inline;
    } 
    
    #nav ul li {
    	margin: 0;
    	line-height: 20px;
    	padding: 4px 20px 4px 20px;
    	border-right: 1px solid #000;
    	list-style: none;
    	display: inline;
    }
    	
    #nav a:link, #nav a:visited {
    text-decoration: none;
    color: #000000
    }
    
    #nav a:hover {
    text-decoration: none;
    color: #ffffff
    }

  8. #8
    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,

    Just move the left and right padding from the list{} into the a{}
    Code:
    #nav ul li {
    margin: 0;
    line-height: 20px;
    border-right: 1px solid #000;
    list-style: none;
    display: inline;
    padding-top:4px;padding-bottom:4px;
    
    } 
    #nav a:link, #nav a:visited {
    padding: 0 20px 0 20px;
    text-decoration: none;
    color: #000000
    }
    Then change the current page list item into a null link and then make another class for it to display differently. (You'll have to put the class in a different link for each page etc.)
    Code:
    <div id="nav"> 
    <ul>
    <li><a href="#" class="currentpage">About Us</a></li>
    <li><a href="events.htm">Events</a></li>
    etc...........
    I haven't defined the current page class I'll leave that up to you.

    Paul

  9. #9
    SitePoint Addict
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks!

  10. #10
    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 haven't defined the current page class I'll leave that up to you.
    Hint:
    Code:
    #nav a.currentpage {
    color:#00FF00;
    }
    Paul

  11. #11
    SitePoint Addict
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    haha....thanks, I figured that one out

  12. #12
    SitePoint Addict
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Does all this work in IE 5?

  13. #13
    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)
    Sorry I don't have iE5 running at the moment to check.

    You will of course have differences where you have specified padding and borders at the same time as you have declared widths due to ie5's broken box model.

    If you check your code and if its going to be critical then move the padding and borders to an inner element (where possible) or add a new class to hold them. (Or use the box model hack which is a lot more effort to achieve the same affect.)

    (You can check up on the browers compatability charts to see how your page will stand up with the css used.)


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
  •