Evenly Distributed Menu Spacing

**RyanKing1809** · Dec 2, 2012 01:07

Hey Guys, I've been experiencing a problems with this navigation menu I've been building.

I would like to create a menu that evenly distributes the menu items evenly across the available width it has. Which I have successfully created following this: http://stackoverflow.com/questions/4...enu-in-htmlcss

The problem is that I would like to give this menu a max width of 60em (54em + 3em left & right padding) and centre horizontally in the available page width.

The natural solution would be to add a #wrapper with text-align: center; and set the menu div to display: inline-block; - this however breaks the spacing distribution.

I can't think of how to fix this one. Any help would be great.

Thanks

HTML Code:

<html>
<head>
	
	<style>
	#wrapper {
		text-align: center;
		border-bottom: 1px black solid;
	}
	
	#backnav {
		margin-top: 3.15em;
		text-align: justify;
		max-width:54em;
		padding: 0 3em;
		overflow-x: auto;
		overflow-y: hidden;
		/*display: inline-block;*/
	}

	#backnav ul {
		display: inline;
		padding: 0;
		margin: 0;
		white-space: nowrap;
	}
	#backnav li {
		display: inline-block;
		list-style: none;
		padding: .65em 0 .65em;
		font: .75em "Georgia", Serif;
	}
	
	#backnav li.current {border-bottom: 2px black solid;padding: .65em 1em .65em;}
	#backnav li:hover {border-bottom: 2px #444444 solid;}
	#backnav li.current:hover {border-bottom: 2px black solid;}
	
	#backnav span {
		width:100%;
		display: inline-block;
	  	position: relative;
		height:0px;
	}
	#backnav li a {
		text-decoration: none;
		padding: 1em 1em;
	}
	
	#backnav li a:link { color:#000000 }
	#backnav li a:visited { color:#000000 }
	#backnav li a:hover { color:#444444; }
	#backnav li a:active { color:#444444 }
	</style>

	<title>Navigation Menu</title>
</head>
<body>	
<div id="wrapper">	
<div id="backnav">
	<ul>
		<li class="current">Menu1</li>
		<li><a href="Menu2/">Menu2</a></li>
		<li><a href="Menu3/">Menu3</a></li>
		<li><a href="Menu4/">Menu4</a></li>
		<li><a href="Menu5/">Menu5</a></li>
	</ul>
	<span></span>
</div>
</div>
</body>
</html>

**dresden_phoenix** · Dec 2, 2012 04:01

It depends on what you are willing to 'sacrifice'.
in order to center with margin:0 auto it you NEED to declare a width, but this makes adding padding disastrous.

Code:

<html>
<head>
	
	<style>
	#wrapper {
		text-align: center;
		border-bottom: 1px black solid;
	}
	
	#backnav {
		margin: 3.15em auto 0 auto;
		text-align: justify;
		max-width:60em;
                padding:0;
		overflow-x: auto;
		overflow-y: hidden;
		width:100%;
  	}

	#backnav ul {
		display: inline;
		margin: 0;
		padding:0;
		white-space: nowrap;
	}
	#backnav li {
		display: inline-block;
		list-style: none;
		padding: .65em 0 .65em;
		font: .75em "Georgia", Serif;
	}
	
	#backnav li.current {border-bottom: 2px black solid;padding: .65em 1em .65em;}
	#backnav li:hover {border-bottom: 2px #444444 solid;}
	#backnav li.current:hover {border-bottom: 2px black solid;}
	
	#backnav:after {
		content:"";
		width:100%;
		display: inline-block;
	  	position: relative;
		height:0px;
	}
	#backnav li a {
		text-decoration: none;
		padding: 1em 1em;
	}
	
	#backnav li a:link { color:#000000 }
	#backnav li a:visited { color:#000000 }
	#backnav li a:hover { color:#444444; }
	#backnav li a:active { color:#444444 }
	</style>

	<title>Navigation Menu</title>
</head>
<body>	
<div id="wrapper">	
<div id="backnav">
	<ul>
		<li class="current">Menu1</li>
		<li><a href="Menu2/">Menu2</a></li>
		<li><a href="Menu3/">Menu3</a></li>
		<li><a href="Menu4/">Menu4</a></li>
		<li><a href="Menu5/">Menu5</a></li>
	</ul>
</div>
</div>
</body>
</html>

here I had to sacrifice the padding.
But you could also:
* use box-sizing, loses some cross-browser comp
* add an extra wrapper as a hook for the padding, mark up for the sake of CSS
* adjust elements OUTSIDE this code accordingly ( padding is always added to the width , even with min-width anyway. So max-width:54em; padding: 0 3em; should work; as long as you know the element will never collapse to 0 width), may cause headache

hope that helps

**RyanKing1809** · Dec 2, 2012 20:13

Thanks Dresden works a charm, changing #backnav width:80%; fixes all my padding problems.

Here's an odd thing, it works fine when formatted above but when I generate it with php or remove all the white space like below it breaks.

HTML Code:

<div id="backnav_wrapper"><div id="backnav"><ul><li class="current">Menu1</li><li><a href="Menu2/">Menu2</a></li><li><a href="Menu3/">Menu3</a></li><li><a href="Menu4/">Menu4</a></li><li><a href="Menu5/">Menu5</a></li></ul></div></div>

Anyone know why this is? It happens on Chrome, Safari & Firefox - maybe I'll have to format my php output.

**ralph.m** · Dec 2, 2012 22:19

PHP shouldn't change it. Your URLs look off:

href="Menu5/">Menu5</a>

That and slash doesn't belong there.

**RyanKing1809** · Dec 3, 2012 06:59

Originally Posted by ralph.m

PHP shouldn't change it. Your URLs look off:

href="Menu5/">Menu5</a>

That and slash doesn't belong there.

Is that bad is it? Even when linking to 'Menu5/index.html'? Wouldn't 'Menu5/' lead to the same address?

The <a> tags appear to have nothing to do with it - you can remove them completely and have the same problem.

And sorry if I wasn't clear - it isn't php that's the issue, it's the white space & formatting thats the problem. I always thought white space didn't matter in html.
So for example:

Formatting the html like this everything works fine:

HTML Code:

<div id="wrapper">	
<div id="backnav">
	<ul>
		<li>Menu1</li>
		<li>Menu2</li>
		<li>Menu3</li>
		<li>Menu4</li>
		<li>Menu5</li>
	</ul>
</div>
</div>

But if you take exactly the same HTML and format it like this the justification breaks for some reason:

HTML Code:

<div id="wrapper"><div id="backnav"><ul><li>Menu1</li><li>Menu2</li><li>Menu3</li><li>Menu4</li><li>Menu5</li></ul></div></div>

I have no idea why this happens.

**ralph.m** · Dec 3, 2012 07:05

Originally Posted by RyanKing1809

Is that bad is it? Even when linking to 'Menu5/index.html'? Wouldn't 'Menu5/' lead to the same address?

Yes, sorry, I misread your code. Ignore my silly comments.

It's odd that the lack of white space causes problems, though. Normally you wouldn't have that problem. But funny things can happen with inline-block and white space, but I'm not clear enough on it to advise.

**RyanKing1809** · Dec 3, 2012 16:48

Originally Posted by ralph.m

It's odd that the lack of white space causes problems, though. Normally you wouldn't have that problem. But funny things can happen with inline-block and white space, but I'm not clear enough on it to advise.

Hmm that is odd. Thanks Ralph. I'll see what info I can find on it in the depths of the internet.

Maybe I should stick with a centred menu with padding. I don't think I can rely on something so unstable.

**ralph.m** · Dec 3, 2012 17:17

We need @Paul O'B to step in and explain what's happening here.

He and others have also coded brilliant centered menus that you'd think weren't possible with CSS.

**dresden_phoenix** · Dec 3, 2012 17:29

as I said everything costs something!
In this case however a quite a bargain.

See, when you made the UL inline , you are having the rendering agent treat the element as inline text ( so now it has no width) but then you make the LIs inline blocks , which would also collapse if it weren't for the inherited text-align:justify. What I didnt say in my first post, but I did think about... is that most people dont seem to understand how "justification" works, not just in web design, but in typesetting in general.

If you were typesetting a column for a newspaper... the last line w/o enough text to wrap to a follow up column.. will not pad out to justify the spaces between words. In short you need text, that wraps and, spaces between words.

Entirely butting the list items like that ( aside from making the HTML difficult to follow for humans) also makes it appear like "menuitem1menutem2menutem3menutem4" to the rendering agent. even if you were to put a single white space between the LIs the whole issue would be fixed. There is always a trade off, this one seems quite minor.

as far as how to carry it off gracefully in PHP, well I like line breaks and indents when I output my HTML block elements... but if that is prohibited, why not just add a single white space at the end of the string that closes your list item ? echo "</li> "; will literally solve it!

**PicnicTutorials** · Dec 3, 2012 21:44

Putting it in a php include should have no impact on your code. I verified that removing white space kills it. Although I don't know the answer to that. A said, I'm pretty sure that's just what inline block does. Reminds me of someone saying "it hurts when I touch here doctor" - well then don't touch there. Just keep the white space. If your menu items are all roughly the same width, the easiest would be to just give the li or a a fixed width and text align center. Here are all the ways to center your menu in the available space http://www.visibilityinherit.com/code/center-nav.php.

**RyanKing1809** · Dec 3, 2012 21:51

Originally Posted by dresden_phoenix

as I said everything costs something!
In this case however a quite a bargain.

See, when you made the UL inline , you are having the rendering agent treat the element as inline text ( so now it has no width) but then you make the LIs inline blocks , which would also collapse if it weren't for the inherited text-align:justify. What I didnt say in my first post, but I did think about... is that most people dont seem to understand how "justification" works, not just in web design, but in typesetting in general.

If you were typesetting a column for a newspaper... the last line w/o enough text to wrap to a follow up column.. will not pad out to justify the spaces between words. In short you need text, that wraps and, spaces between words.

Entirely butting the list items like that ( aside from making the HTML difficult to follow for humans) also makes it appear like "menuitem1menutem2menutem3menutem4" to the rendering agent. even if you were to put a single white space between the LIs the whole issue would be fixed. There is always a trade off, this one seems quite minor.

as far as how to carry it off gracefully in PHP, well I like line breaks and indents when I output my HTML block elements... but if that is prohibited, why not just add a single white space at the end of the string that closes your list item ? echo "</li> "; will literally solve it!

Too easy. Thanks for the clear explanation.

User Tag List

Thread: Evenly Distributed Menu Spacing

Thread Tools

Display

Evenly Distributed Menu Spacing

Bookmarks

Bookmarks

Posting Permissions