Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Flexible horizontal navigation with equal distance between nav elements

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #35945
    erikportin
    Member

    This is is my problem:
    – I need to make a horizontal menu
    – It needs to be flexible so no set width
    – The frist and the last element have to be align to the very beginning and end of the nav
    – The nav element can be different width
    – The gap between the elements have to be equal (except no gap before the first element and no gap after the last )

    My current solution is like this (see it in action here http://jsfiddle.net/wKjVq/):

    ul{
    -webkit-box-orient: horizontal;
    display: -webkit-box;
    width: 100%;
    }

    .empty {
    -webkit-box-flex: 1;
    }

    • Element 1


    • El 2


    • Element three


    • Element 4

    By using box flex the empty list elements makes even gaps between the “real” nav elements.
    I’m happy with the outcome of this solution but not really happy with using empty divs.

    So my first questions is: Am I missing something totally obvious?
    My 2nd question is: Do anyone else have any other solution (preferably in css 2 but css3 is fine as long as there is a nice fallback)?

    #93905
    Paulie_D
    Member

    There is no way (to my knowledge) to do this with pure CSS without setting specific %age widths to your li elements and respective margins.

    Javascript to do some calculations summing the width of the li elements and then dividing appropriately to set margins would seem to be the answer but I have no skills in that area.

    Frankly I think you’re putting an awful lot of stress on EXACT requirements that the viewer probably won’t event notice.

    #93919
    erikportin
    Member

    Thanks Paulie_D. Yes javascript would be an option and not too difficult to implement. But I try not to use javascript for responsiveness and flexibility.

    It’s the “awful lot of stress on EXACT requirements” that makes this to a challenge isn’t it? And challenges are fun!

    (Also, in this particular case the exact requirements makes the website looks so much better.)

    #93975
    erikportin
    Member

    Also posted this on stack overflow and got a solution

    #93978
    Paulie_D
    Member

    Nice solution but you’ll need a fallback for non-webkit broswers.

    #93979
    erikportin
    Member

    Yes you’re right Paulie_D but there’s a comment to the answer that links to cross-browser safe solution.

    #93980
    davidlab.be
    Participant

    i quickly through this together. Not exactly what you may be looking for, but same idea and browser friendly.


    • Element 1

    • El 2

    • Element three

    • Element 4

    ul{
    max-width: 100%;
    }

    li{
    float:left;
    }

    li.first-li{
    text-align: left;
    margin-right: 2%;
    width: 23%;
    background-color:red;
    }

    li.middle-li{
    text-align: center;
    margin: 0 2%;
    width: 21%;
    background-color:green;
    }

    li.last-li{
    text-align:right;
    margin-left: 2%;
    width: 23%;
    background-color:blue;
    }
    #93982
    erikportin
    Member

    Thanks springlab. It’s almost a good solution but the gaps between the actual words are different. In this case especially the gap between the first and the second element is much larger than the others as you can see here http://jsfiddle.net/3R7GU/1/

    #93985
    Paulie_D
    Member

    @ erikportin “Yes you’re right Paulie_D but there’s a comment to the answer that links to cross-browser safe solution.”

    Which leads me back to….”I think you’re putting an awful lot of stress on EXACT requirements that the viewer probably won’t event notice.” since you’re happy to fallback for non-webkit browser.

    Not that I don’t love the idea…just it’s a lot of hassle for very little gain…but then ‘each to their own’. :)

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.