CSS position absolute icm centered div

dinsdag 20 september 2011 20:44

Acties:

0 Henk 'm!

Moderator Wonen & Mobiliteit / General Chat

Topicstarter

Ik heb een probleem om een zelf gemaakt menu inclusief submenu goed uit te lijnen. Plaatjes zeggen meer, dus het voorbeeld:

Boven: huidige situatie
Onder: gewenst

Ik heb een versimpelde case gemaakt van de code:

HTML:

<!DOCTYPE HTML>
    <html lang="nl">
        <head>
        <style type="text/css" media="all">
        #main-navigation {
            background-color: lime;
            color: #fff;
            height: 40px;
            width: 100%;
        }

        #main-navigation ul {
            margin: 0 auto;
            width: 1200px;
            line-height: 38px;
            border: 1px solid red;
        }

        #main-navigation ul li {
            display: inline-block;
            height: 40px;
        }

        #main-navigation ul li a {
            color: #fff;
            text-decoration: none;
            padding: 0 10px;
        }

        #main-navigation #active-menu {
            background-color: #000;
        }

        #main-navigation ul li a:hover {
            text-decoration: underline;
        }

        #main-navigation ul li ul {
            background-color: #343434;
            position: absolute;
            line-height: 40px;
            margin-top: 2px;
            display: none;
        }

        #main-navigation ul li ul#active-submenu {
            display: block;
        }
        </style>
        </head>
        <body>
            <div id="main-navigation">
                <ul>
                    <li><a href="#">bla</a>
                        <ul>
                            <li><a href="#">bla2</a></li>
                            <li><a href="#">bla2</a></li>
                            <li><a href="#">bla2</a></li>
                            <li><a href="#">bla2</a></li>
                        </ul>
                    </li>
                    <li id="active-menu"><a href="#">bla</a>
                        <ul id="active-submenu">
                            <li><a href="#">bla3</a></li>
                            <li><a href="#">bla3</a></li>
                            <li><a href="#">bla3</a></li>
                            <li><a href="#">bla3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">bla</a></li>
                    <li><a href="#">bla</a></li>
                </ul>
            </div>
        </body>
    </html>

Notes bij de testcase: ik heb even via een aparte ID een submenu geactiveerd om zo de testcase simpel te houden. En als voorbeeld heb ik de 2de menu item geactiveerd, maar het idee is hetzelfde voor alle menu items qua uitlijning.

Mijn idee was om aan the child ul een left: 0 mee te geven, maar dan wordt het submenu (zoals verwacht) niet meer gecentreerd weergegeven maar helemaal links

Via google / GOT search kwam ik al gauw op een Alistapart artikel (klik) die ook een sebmenu maakt waarbij alles links uitgelijnd moet zijn ten opzichte van de partent UL, maar als ik dat menu probeer te centreren in de pagina loop ik dus tegen hetzelfde probleem aan.

Kan iemand mij een duwtje in de richting geven waar ik het moet zoeken? De 'schuldige' is volgens mij de position: absolute; op de child UL, maar die heb ik nodig om het submenu onder de parent UL te plaatsen

dinsdag 20 september 2011 20:57

Acties:

0 Henk 'm!

Tentacle1

60% Puur Sap!

Position absolute werkt alleen goed als je de parent (li) ook een position geeft, bijvoorbeeld relative in dit geval.

System specs

dinsdag 20 september 2011 21:32

Acties:

0 Henk 'm!

We Are Borg

Moderator Wonen & Mobiliteit / General Chat

Topicstarter

Kijk dat had ik nodig

Ik heb even aan de hand van jouw antwoord via google verder gelezen en zonder position relative werkt het inderdaad niet goed. In dit geval moest ik een position relative toevoegen aan de partent UL en zo kon ik de child UL met left: 0 goed positioneren.

Bedankt

Onderwerpen