...

View Full Version : horizontal list items justified in fixed-width div



Ezn
09-21-2006, 08:50 PM
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:



#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:



<!-- 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!)

Ezn
09-27-2006, 06:05 PM
Nobody wants to help on this one, eh?

LokiLoks
09-27-2006, 08:32 PM
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

Ezn
09-27-2006, 08:59 PM
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!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum