horizontal navbar align right?

  • I want to make my horizontal navbar have the buttons align right instead of left. I’ve tried: text-align: right does nothing, putting padding in makes the bar go off the main (“wrapper”) div. Also, having the navbar somehow shrinks part of the top of the masthead div.

    Here’s the CSS for the navbar:

    #navlist ul
    {
    padding-left: 0;
    margin-left: 0;
    background-color: #99FF99;
    color: #567EB9;
    float: left;
    width: 100%;
    text-align: right;
    }

    #navlist ul li
    {
    display: inline;
    list-style-type: none;
    }

    #navlist ul li a
    {
    padding: 0.2em 1em;
    background-color: #99ff99;
    color: #567EB9;
    text-decoration: none;
    float: left;
    border-left: 1px solid #567EB9;
    }

    #navlist ul li a:hover
    {
    color: #99ff99;
    background-color: #567EB9;
    }

    I edited one of the listamatic navbars to my liking. Here is the site: https://hackerfoundation.org/wp

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

  • I’m a little bit surprised that the #navlist ul li a are floated left, but not the #navlist ul li.
    I would have though that to be a good idea.
    Haven’ tested though

    Thread Starter rense

    (@rense)

    I’ll try that, but now that I’m working on other parts of the site I’m having trouble whenever I put a padding-left on something it shoves it past the border of the div that’s containing it!

    There may be many causes for this behavior. If you are using fixed sizes on everything and you add extra padding somewhere, you have to compensate by changing the width ( or height of any containing box.
    A tricky part is that different browser interprets the CSS box model. Better check your design in more than one browser.
    (!!)

    If everything is floated to left why do expect it to be on the right?

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘horizontal navbar align right?’ is closed to new replies.