CSS Float Menu position problem

[tigar77]

Hi.

I got a problem with my menu, i want it to be centered but with this float its either left or right. When removing it gets messed up.

 <nav>
                    <ul id="menu">
                        <center>
                          <li class="nav2"><a href="#page_3">Test 1</a></li>
                        <li class="nav3"><a href="#page_4">Test 2</a></li>
                        <li class="nav4"><a href="#page_5">Test 3</a></li>
                        <li class="nav5"><a href="#page_6">Test 4</a></li><br>

                    </ul>
                </nav>

Css part:

#menu li{ float:left;}
#menu a{ font-size:23px; color:#000000; line-height:1.2em; text-decoration:none; letter-spacing:-1px;}

.nav1{ padding:26px 0 0 57px;}
.nav2{ padding:16px 0 0 30px;}
.nav3{ padding:16px 0 0 27px;}
.nav4{ padding:16px 0 0 29px;}
.nav5{ padding:16px 0 0 30px;}

#menu .nav1 a:hover{ color:#bb0e0e}
#menu .nav2 a:hover{ color:#ca6509}
#menu .nav3 a:hover{ color:#ca6509}
#menu .nav4 a:hover{ color:#ca6509}
#menu .nav5 a:hover{ color:#ca6509}

.ic, .ic a { text-indent:-9999px; width:100%; overflow:hidden}

I want the text to be right under the image you can see in this picture.

Picture

If there is a way to add the picture directly to the thread someone please tell me.

[Paulie_D]

Centering is very hard when using floats so I generally don’t use it.

There are could of methods…using display:inline-block or display:table-cell on the li

Both require a little set-up on their respective parent ul which I have demontrated here

http://jsfiddle.net/93d9z/5/

As you can see, they both center but in different ways…it depends on what you want.

Couple of things in your original code.

<center> is no longer valid under HTML and should no longer be used. Use a centered div instead.

However, even if you did use a div it can’t be a direct child of a ul…a ul/ol can only have li as direct children.

I’ve tidied that up in my example.

[Paulie_D]

I wouldn’t say centering floats is all that hard:

Fair enough…no more fiddly than dealing the the other solutions respective ‘issues’

[Senff]

I always try to keep things as simple as possible when I want my menu to be centered, and follow these two basic rules:

• text-align:center; on the UL
• NO element within the UL (either LIs and As) can’t be display:block

Usually, that’s enough for me to make it work.

[Author]

Posts