Justify links in horizontal menu?

HTML & CSS
1

Hello!

I’m trying to justify my navigation menu here: http://www.strawberrykoi.com/
I placed a justify code into the .navbar, but no luck. Any ideas?

Thanks!

2

Hi strawberrykoi. Welcome to the forums. :slight_smile:

What do you mean by “justify”? Do you mean you want to spread it evenly across the wrap area? If so, you need to make a few decisions, such as whether you want the links evenly spaced or the LIs. If the former, it won’t be very easy, but if the LIs, then just give each a width that is one 11th of the width of the wrapper.

3

Well… I suppose the easier method is probably the wisest choice to go with for now. I want them to be evenly spread evenly across, but if that can be done with a “work-about” that’s alright. Which LIs would be the correct ones to adjust, if I might ask…?

Thanks so much!

4

What I was thinking of was something like this:


.menu li {width: 88px;
text-align: center;
}

But it only works if the link text is all about the same size, but didn’t look good at all in your case. So perhaps you could just try something like this:

.menu li a {
padding: 14px [COLOR="#FF0000"]16[/COLOR]px;
}
5

Hi,

There is a way to evenly distribute the items but is a convoluted method (from Erik J) that requires some non breaking spaces to be carefully placed in the html along with a negative margin and text-align:justify.

It does work though for some straight forward situations as follows:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Distributed Horizontal Menu</title>
<meta name="generator" content="PSPad editor, www.pspad.com">
<style type="text/css">
#wrap{
	width:960px;
	margin:auto;
	background:#fafafa;	
}
.nav {
	margin:0;
	padding:0;
	list-style:none;
	width:100%;
	overflow:hidden;
	text-align:justify;/* the key */
}
.nav li {
	display:inline;
}
.nav li;last-child { margin-right:100%;}
.nav li.last { margin-right:100%;}
.nav li a {
	display:inline-block;
	padding:13px 4px 0;
	color:#ccc;
	vertical-align:middle;
	text-decoration:none;
}
.nav li a:hover {color:#36c;}
</style>
</head>
<body>
<div id="wrap">
		<ul class="nav">
				<li>&nbsp; <a href="#">Home</a></li>
				<li>&nbsp; <a href="#">Blog</a></li>
				<li>&nbsp; <a href="#">Shop</a></li>
				<li>&nbsp; <a href="#">Lookbook</a></li>
				<li>&nbsp; <a href="#">Photagraphy</a></li>
				<li>&nbsp; <a href="#">Art</a></li>
				<li>&nbsp; <a href="#">Web&nbsp;Design</a></li>
				<li>&nbsp; <a href="#">Features</a></li>
				<li>&nbsp; <a href="#">Resources</a></li>
				<li>&nbsp; <a href="#">About</a></li>
				<li class="last">&nbsp; <a href="#">Contact</a> &nbsp; &nbsp;</li>
		</ul>
</div>
</body>
</html>
6

Interesting method, Paul. I don’t really get how/why it works, but anyhow …

Was this a typo?

.nav li;last-child { margin-right:100%;}

Seems to be accounted for by the next rule anyway.

7

It works by forcing justification to work and ensuring the browsers thinks the line is always wide enough to be justified.

Was this a typo?

.nav li;last-child { margin-right:100%;}

Seems to be accounted for by the next rule anyway.

Thanks Ralph, yes its a typo. It should have been this:


.nav li:last-child { margin-right:100%;}
.nav li.last { margin-right:100%;}

I’ve started using last-child as a separate rule because the clients always have trouble dynamically assigning the last class so modern browsers always get the rule when dealing with silly clients :).

As an aside it is unsafe to do this:


.nav li:last-child,
.nav li.last { margin-right:100%;}

Browsers that don’t understand :last-child are required to stop parsing any more rules from that point so all comma separated values afterwards will be lost. Some versions of IE still parse it anyway but other modern browsers would not. Therefore never comma separate pseudo classes where support may be iffy.

8

Thanks for the explanation, Paul, and for the tip about comma separating. :slight_smile: