Grow your CSS skills. Land your dream job.

Justified Horizontal List menus?

  • # March 20, 2009 at 11:43 pm

    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!

    # March 21, 2009 at 3:40 am

    What are you trying to do?

    A link or a proper explanation might give us half a chance.

    # March 21, 2009 at 4:26 pm

    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!

    # March 21, 2009 at 4:55 pm

    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

    and the CSS

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

    # March 23, 2009 at 10:02 pm

    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.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".