Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Apr 2006
    Location
    Northbrook, IL
    Posts
    394
    Thanks
    8
    Thanked 6 Times in 6 Posts

    horizontal <UL> navbar without floated LIs?

    the traditional way to make a horizontal navigation menu involves setting the UL to list-style: none; and the LIs to display: inline or inline-block and float: left or right.

    without the floats, there is space between the LI items once they are arranged inline. Also when you float the LIs, the UL container needs to be resized manually to match the height/width of the LI elements (in the case when you want the menu to have a uniform background), and this is never guaranteed to be pixel perfect.

    is there a way to get rid of the horizontal space between LI elements without having to float them?

    thanks,
    Leon

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,877
    Thanks
    6
    Thanked 1,035 Times in 1,008 Posts
    The spaces with inline elements is caused by the line breaks of the list. You can avoid that by putting ending and starting tags of adjacent items right next to each other like so:
    Code:
    <ul>
      <li>…</li><li>
      …</li><li>
      …</li>
    </ul>
    However, you can also have the ul resize along with floated lis. Either apply a float to the list itself (→ containing floats) or apply overflow: hidden or auto to it (IE 6 needs layout, too).

  • Users who have thanked VIPStephan for this post:

    Leeoniya (05-14-2008)

  • #3
    Regular Coder
    Join Date
    Apr 2006
    Location
    Northbrook, IL
    Posts
    394
    Thanks
    8
    Thanked 6 Times in 6 Posts
    also i think i just found that display: table-cell; applied to LIs does something similar.

  • #4
    Regular Coder
    Join Date
    Jul 2002
    Location
    Kansas, USA
    Posts
    487
    Thanks
    0
    Thanked 54 Times in 53 Posts
    In Firefox the gaps appear to be created by whitespace in the source between li elements. Remove the whitespace to get rid of the gaps. This results in less manageable/readable code, but that's the trade-off. In IE(6), just setting display:inline results in no gaps.

    Example
    Code:
    <style type="text/css">
    ul { list-style: none; margin: 0; background: red; }
    li { display: inline; background: black; margin: 0; padding: 0px; }
    a { color: white; }
    </style>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Link One</a></li>
      <li><a href="#">Somewhere Else</a></li>
      <li><a href="#">End</a></li>
    </ul>
    <p>Versus</p>
    <ul><li><a href="#">Home</a></li><li><a href="#">Link One</a></li><li><a href="#">Somewhere Else</a></li><li><a href="#">End</a></li></ul>
    Ack! I'm slow. Hope the example helps.

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,877
    Thanks
    6
    Thanked 1,035 Times in 1,008 Posts
    Quote Originally Posted by Leeoniya View Post
    also i think i just found that display: table-cell; applied to LIs does something similar.
    That doesn’t work in IE, though.

  • #6
    Regular Coder
    Join Date
    Apr 2006
    Location
    Northbrook, IL
    Posts
    394
    Thanks
    8
    Thanked 6 Times in 6 Posts
    here is my specific example:
    PHP Code:
    <div style="width: 950px; height: 100px; border: 1px solid red;">
        <
    ul id="nav_top">
            <
    li><a href="home.php">Home</a></li>
            <
    li><a href="products.php" class="current">Products</a></li>
            <
    li><a href="shop.php">Shop Online</a></li>
            <
    li><a href="about.php">About Us</a></li>
            <
    li><a href="support.php">Support</a></li>
            <
    li><a href="testimonials.php">Testimonials</a></li>
        </
    ul>
    </
    div
    CSS:
    Code:
    ul#nav_top {
    	width: 100&#37;;
    	float: left;
    	font-size: 10.5pt;
    	margin: 0;
    	padding: 0;
    	list-style: none;
    	border-top: 1px solid #646464;
    	border-bottom: 1px solid #646464;
    	background: url(nav_bg.png);
    }
    #nav_top li {
    	display: inline;
    	padding: 0;
    }
    #nav_top li a {
    	float: left;
    	width: 158px;
    	padding: 3px 0;
    	border-right: 1px solid gray;
    	color: black;
    	font-weight: bold;
    	text-align: center;
    	text-decoration: none;
    	text-transform: uppercase;
    }
    
    #nav_top li a:hover, #nav_top li a.current {
    	background: url(nav_bg_hov.png);
    	color: maroon;
    }
    how would i prevent wrapping of the last list item? the goal is to hide/overflow the right border of the last element just a tad so that when it is selected, the list item coloring/background goes all the way to the edge, like the first menu item on the left side.

    setting overflow: hidden on the nav_top did not help .
    Last edited by Leeoniya; 05-14-2008 at 04:18 AM.


  •  

    Posting Permissions

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