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

Home Forums CSS CSS Float Menu position problem

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #173132


    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.

                        <ul id="menu">
                              <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>

    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.


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


    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

    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.


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

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


    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.

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