SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Justify links in horizontal menu?

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

    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. #3
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,214
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    What I was thinking of was something like this:

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

    Code:
    .menu li a {
    padding: 14px 16px;
    }

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,387
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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:
    Code:
    <!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. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,214
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Interesting method, Paul. I don't really get how/why it works, but anyhow ...

    Was this a typo?

    Code:
    .nav li;last-child { margin-right:100%;}
    Seems to be accounted for by the next rule anyway.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,387
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Interesting method, Paul. I don't really get how/why it works, but anyhow ...
    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?

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

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

    Code:
    .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. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,214
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Thanks for the explanation, Paul, and for the tip about comma separating.


Tags for this Thread

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
  •