My fluid-width single line horizontal navbar problem!

  • I’ve almost got my new project ready to go, but one of the things I just can’t seem to wrangle is the navbar.

    At the moment it’s float:left, but what I’m after is for it to fill all but 30px on either side of the screen. Try as I might I can’t get this working.

    As soon as I specify a percentage instead of pixel value in the horizontal padding it pushes each button on the bar into it’s own line, where it perfectly takes up the space. I want to force it to do that, but all stay on one line. Is that possible?

    Here’s the code in question:

    #menu1 {
height:1%;
margin-left:30px;
margin-right:30px;
overflow:hidden;
}
#menu1 ul {
margin:0;
padding:0;
}
#menu1 ul li {
display:inline;
float:left;
margin:0;
padding:0;
}
#menu1 ul li a {
display:block;
padding:3px 20px;
text-decoration:none;
}

    When I change the padding from 20px to a percentage it works up to a certain percent, then splits each one onto it’s own line and fills the screen perfectly.

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hard to determine without a link to your site. However if you want your navbar to sit in the centre of the screen try this.

    Specify the width of the navbar to be lets say 90% and then give it margin right and margin left auto, like this:

    .navbar {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

    You might just have to resort to doing scripting for this one because what it seems like to me you’re asking is that you want to be able to make a dynamic navbar whose buttons fill up the navbar -30px to both sides at any given point in time no matter the number of buttons.

    If, however, you have a set number of buttons (I’ll say 5), you can try something like this:

    1) Set the width of your ul to 100% to ensure that you get to use 100% of that width space.

    2) Set the alignment for the buttons to be centered and set the margins for the buttons themselves to be 0px auto and remove the padding settings on the buttons.

    3) Set the width of the buttons to 20%.

    Theoretically speaking, 20% x 5 = 100%.

    But as we know, padding and margins and whatnots can be calculated weirdly by browsers, so you might have to do a little adjustment of numbers.

    For myself, for example, I have a footer wrapper containing 3 equally sized and equally flexible containers for different footer-related content that expand and contract according to browser size.

    By setting the widths and margins like I described (or something very very similar), I got the three blocks to take up 99.9% of the footer space (left and right had a bit of margin space because I used some borders and borders add pixels to widths).

    I don’t see why you couldn’t do something similar to your menu, but my method only works if you know how many ‘blocks/buttons’ you have/if the number of blocks/buttons remains static.

    Thread Starter rolanddeschain

    (@rolanddeschain)

    @equaldesign: That still gives the one button per line result. I would have posted the URL, but I can’t.

    @emg: Think I’ll have to go this way, I was just hoping to avoud rebuilding it ?? Thanks for taking a look at the problem!

    No problem; I hope you figure out the best way to solve this problem per your situation!

    I’ve messed with navigational bars (with and without buttons) like crazy and messed with flexible width multicolumned layouts on my most recent themes and I’m all pro fluid/flexible width myself (not a fan of fixed width, especially with all the larger wider screens nowadays), so I’ve definitely run into this hitch a few times on my end, too.

    My biggest problems have always been the fact that we can’t mix and match pixels and percentages to equal a pure 100%.

    My biggest gripe also in relation to this is how padding and borders adds to the math when you’re calculating widths and heights.

    *waves fist at the numbers*

    Ahhh but what can be done, right?

    So… yeah. ??

    Good luck on getting the fluidity you’re looking for in your design.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘My fluid-width single line horizontal navbar problem!’ is closed to new replies.

Tags