I'm trying to center a navigational menu on my page but coming across some trouble. I found a few examples that say to wrap the ul in a containing div with a width of 100% and the overflow hidden.

Then float the ul left with a postion of 50% left and float the li left with a postion of 50% right.

This almost works as the content is now centered but the overflow does not seem to be hidden. I get a horizontal scroll bar.

The site is at http://axelav.com/work/

This is driving me nuts. Anyone have a solution?

2 answers

0
points
you could start by changing these style declarations for margin in style.css:

    ul { margin-left:30px; list-style-type:none; }
    ol { margin-left:30px; list-style-type: decimal; }

ul#work-nav li {
    float:left;
    margin-right:30px;
    position:relative;
    right:50%;
}

remove the margins (they're being added to the 50% left and rights) and make the space by adding padding to the a element inside the li instead...

That seems to help.

Answered over 6 years ago by Tony Crockford
0
points

ul { margin:0 auto; }

This will put a margin of zero on the top and bottom of the ul, and will center it horizontally.

Answered over 6 years ago by Bill Addison