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.
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.
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
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:
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.
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!
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.
