treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Justified Horizontal List menus?

  • I haven't been able to pull it off yet, I've gotten them to do everything I want them to except justify, which really frustrates me, because it shouldn't be this hard! I don't have a working set of code because I completely tore apart my code tonight trying to get it to work. so I ask you, holding scraps of code in my hand, shirt covered in various ascii symbols...help!
  • What are you trying to do?

    A link or a proper explanation might give us half a chance.
  • I don't have a working example, but I guess I could use my website as an example... (samswitzer.org the nav bar is a list that's been floated left. I'm trying to achieve this effect on a different site, but I also want it to stretch out to cover the full length of the header, that's the best way I can think of on how to explain what i'm trying to do... I hope you guys can understand it/have a solution!
  • I have just played around on your site with firebug for 5 minutes.

    How about this. Give the last list item in your menu its own class. Then give your list items a padding right as a percentage, and the last item no padding.

    Something like
    <div id=\"menu\">
    <ul>
    <li>
    <a href=\"blog.html\">/blog</a>
    </li>
    <li>
    <a href=\"web.html\">/web</a>
    </li>
    <li>
    <a href=\"http://www.samswitzer.org/files\">/files</a>
    </li>
    <li>
    <a href=\"resume.html\">/resume</a>
    </li>
    <li class=\"last\">
    <a href=\"/dev\">/dev</a>
    </li>
    </ul>
    </div>


    and the CSS
    #menu li {
    float:left;
    margin:0 0.15em;
    padding:0 15% 0 0;
    }
    #menu li.last {
    padding:0;
    }


    You will have to play around with the percent value depending on how many list items you have.
  • I tried out the code (replacing all of my old menu code) and it just extended the menu bar, not stretch it to the header size. Did you intend to leave some code? I've been unquoting some things, but had no luck so far, please post full css/html or tell me what to remove and what to leave there, thanks.
  • It worked for me.
    Try this instead http://www.smashingmagazine.com/2009/03/23/ask-sm-equal-spacing-css-image-replacement-max-side-on-images/