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 4 of 4
  1. #1
    Ezn
    Ezn is offline
    New Coder
    Join Date
    Aug 2006
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    horizontal list items justified in fixed-width div

    I have a subnav bar that will have a variable amount of items in it. They are in a DIV that is always 720px wide.
    Using lists and CSS to display.

    2 questions:

    1. How can I get the LIs to justify within the 720px DIV or UL no matter how many items in list?
    2. Why is there so much space beneath the list (in the dark blue box) when I haxe all margins and padding set to 0px?

    Here's the CSS:

    Code:
    #navcontainer
    {
    position:relative;
    width:720px;
    background-color:#036;
    padding: 0px 0px 0px 0px;
    margin: 0px auto;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    }
    #navlist ul
    {
    width:720px;
    padding: 0px 0px 0px 0px;
    margin: 0px auto;
    }
    #navlist li
    {
    display: inline;
    list-style-type: none;
    color:#FFF;
    padding: 0px;
    margin: 0px auto;
    }
    #navlist a
    {
    	padding: 0px;
    	margin: 0px auto;
    }
    #navlist a:link, #navlist a:visited
    {
    color: #FFF;
    text-decoration: none;
    }
    #navlist a:hover
    {
    color: #FF0;
    text-decoration: underline;
    }
    Here are two examples in HTML:

    Code:
    <!-- FIVE ITEMS -->
    <div align="center" id="navcontainer">
    	<ul id="navlist">
    		<li><a href="#">Content</a></li>
    		<li>|</li>
    		<li><a href="#">Comprehension</a></li>
    		<li>|</li>
    		<li><a href="#">Cool!</a></li>
    		<li>|</li>
    		<li><a href="#">Differentiated Instruction</a></li>
    		<li>|</li>
    		<li><a href="#">Management System and Reports</a></li>
    	</ul>
    </div>
    	<br>
    <!-- THREE ITEMS ONLY -->
    <div align="center" id="navcontainer">
    	<ul id="navlist">
    		<li><a href="#">Content</a></li>
    		<li>|</li>
    		<li><a href="#">Comprehension</a></li>
    		<li>|</li>
    		<li><a href="#">Cool!</a></li>
    	</ul>
    </div>
    The above HTML has an example with 5 items and another with three items.

    File divexp.txt containing all code attached.

    Thanks for the help (Please help!)
    Attached Files Attached Files
    Last edited by Ezn; 09-21-2006 at 07:56 PM. Reason: put question at top

  • #2
    Ezn
    Ezn is offline
    New Coder
    Join Date
    Aug 2006
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Nobody wants to help on this one, eh?

  • #3
    New Coder
    Join Date
    Sep 2006
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Add:

    * {
    padding: 0;
    margin:0;
    }

    to solve the excess space problem

    You'll have to create seperate classes for each possible # of items that you'll end up with. Each subnav would have to be marked with the relevent class.

    Hope that helps,

    Robert Kruger

  • #4
    Ezn
    Ezn is offline
    New Coder
    Join Date
    Aug 2006
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    But in my original code, everything already has padding: 0px and margin: 0px

    Anyone else?

    Here's a link:

    http://home.nyc.rr.com/ezn/divexp.htm

    Thanks!
    Last edited by Ezn; 09-27-2006 at 09:37 PM. Reason: added link


  •  

    Posting Permissions

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