SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Evenly Distributed Menu Spacing

    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>

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,805
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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

  3. #3
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,208
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    PHP shouldn't change it. Your URLs look off:

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

    That and slash doesn't belong there.

  5. #5
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,208
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by RyanKing1809 View Post
    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.

  7. #7
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,208
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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.

  9. #9
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,805
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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!

  10. #10
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,657
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    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.

  11. #11
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •