Go Back   CodingForums.com > :: Client side development > HTML & CSS

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 09-21-2006, 07:50 PM   PM User | #1
Ezn
New Coder

 
Join Date: Aug 2006
Posts: 10
Thanks: 0
Thanked 0 Times in 0 Posts
Ezn is an unknown quantity at this point
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
File Type: txt divexp.txt (1.4 KB, 78 views)

Last edited by Ezn; 09-21-2006 at 07:56 PM.. Reason: put question at top
Ezn is offline   Reply With Quote
Old 09-27-2006, 05:05 PM   PM User | #2
Ezn
New Coder

 
Join Date: Aug 2006
Posts: 10
Thanks: 0
Thanked 0 Times in 0 Posts
Ezn is an unknown quantity at this point
Nobody wants to help on this one, eh?
Ezn is offline   Reply With Quote
Old 09-27-2006, 07:32 PM   PM User | #3
LokiLoks
New Coder

 
Join Date: Sep 2006
Posts: 10
Thanks: 0
Thanked 0 Times in 0 Posts
LokiLoks is an unknown quantity at this point
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
LokiLoks is offline   Reply With Quote
Old 09-27-2006, 07:59 PM   PM User | #4
Ezn
New Coder

 
Join Date: Aug 2006
Posts: 10
Thanks: 0
Thanked 0 Times in 0 Posts
Ezn is an unknown quantity at this point
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
Ezn is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 11:29 PM.


Advertisement
Log in to turn off these ads.