Evenly distribute list items over two rows using css

[Brendon Bauer]

So I have made several themes for my website and in preparation to really change things up with css, I have to remove a line break that was entered manually in my navigation links. This served to make the two lines which were then aligned right. To do the same thing now, I tried doing right align but to make it go on two lines I had to shrink the div to the perfect size that forced the unordered list to span two lines. Is there another way to do it? If I make my text smaller, it starts putting more links on the top line...

Do I make sense?

HTML:

<div id="menu">
	<ul>
		<li><a href="http://www.summitnorthwest.org/">Home</a></li>
		<li><a href="http://www.summitnorthwest.org/sermonvideo/">Video Sermons</a></li>
		<li><a href="http://www.summitnorthwest.org/sermonaudio/">Audio Sermons</a></li>
		<li><a href="http://www.summitnorthwest.org/prayer/">Prayer</a></li>
		<li><a href="http://www.summitnorthwest.org/collegiate/">Collegiate/Young Adult</a></li>
		<li><a href="http://www.summitnorthwest.org/kids/">Kids/Youth</a></li>
		<li><a href="http://www.summitnorthwest.org/contact/">Visit Us</a></li>
		<li><a href="http://www.summitnorthwest.org/projects/">Projects</a></li>
		<li><a href="http://www.summitnorthwest.org/mailinglist/">Mailing List</a></li>
		<li><a href="http://www.summitnorthwest.org/giving/">Online Giving</a></li>
		<li><a href="http://www.summitnorthwest.org/discussion/">Discussion Board</a></li>
		<li><a href="http://www.summitnorthwest.org/pastor/">Notes from the Pastor</a></li>
		<li><a href="http://www.summitnorthwest.org/links/">Links</a></li>
		<li><a href="http://www.summitnorthwest.org/other/">Other</a></li>
	</ul>
</div>

CSS:

#menu {
	float: right;
	margin: 0;
	padding: 80px 55px 0 0;
}

#menu ul {
	margin: 0;
	padding: 0 10px 0 0;
	list-style: none;
	line-height: 20px;
	text-align: right;
	width: 605px;
	background-color: black;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
	filter: alpha(opacity=70);
	-moz-opacity:0.7;
	opacity: 0.7;
	-khtml-opacity: 0.7;
}

#menu li {
	display: inline;
}

 

[Mal]

Just insert the line break with HTML. That, or create two lists, one for the top and one for the bottom. Either way will work fine.

If you want more control still, you could even give each list of links a different id or class, and style them from there (good way of controlling the margins), but that'll take more effort and a little more code. Probably excessive, but some nice things you could do with that.

jW

 

[angelwatt]

You could make it two lists instead of the one since you're wanting to separate them. Also, when I made the browser window smaller (Firefox3) the menu stayed the same, I just got a scroll bar.

 

[veyron85]

Just use <br />'s where you want to break the li's

 

[Brendon Bauer]

If you read my first post you'd realize I can't use line breaks <br />. I removed them for a reason. That would create a line break that I can't remove when using a different type of theme/style. My point is I want to do it via css so I can later totally change up the style. For example, I could move the menu to the left of the page all in one regular list. If I had a line break in the html, that would screw it up.

As for what angelwatt said, is that the best option? Is there no css rule to evenly distribute something over x number of lines?

 

[angelwatt]

As for what angelwatt said, is that the best option? Is there no css rule to evenly distribute something over x number of lines?

CSS isn't really that smart (yet) so it can't give the level of control you're wanting. CSS has no knowledge of lines. To help remove the fine-tuning of the width, have you tried using text-align: justify? It may help a little bit. What you're going for is a little unstable too, I mean if you ever need to add or remove and item from the navigation it'll take a bit of reworking to get things lined up like they currently are. You might want to give some thought to making the navigation more fluid. It would help make the site layout more fluid too so people with smaller screens don't have to scroll horizontally. Just thinking out loud.

 

[Brendon Bauer]

Any ideas to making it more fluid? I've been trying to design the site so it is easy to manage and edit, not having to go back and tweaking things all the time. I already have like 9 or so css files to edit if I want to tweak the menu. I reserve the common css file for stuff that doesn't matter what layout I use, like text, etc. But the layout needs to be an individual css.