[CSS] margin: 0 auto lijkt niet te werken op float-element

[Verwijderd]

Ik probeer een navigatie in het midden van mijn webpagina te krijgen, ongeacht hoe breed het scherm van de gebruiker is.

De navigatie is een ul-lijst die verpakt zit in een div.

code:

        <div id="navigatie">
            <ul>
                <li><a href="index.htm">Home</a></li>
                <li><a href="#">Forum</a></li>
                <li><a href="#">Bedrijvengids</a></li>
                <li><a href="#">Nieuws</a></li>
                <li><a href="#">Zoekertjes</a></li>
                <li><a href="#">Agenda</a></li>
                <li><a href="#">Blogs</a></li>
            </ul>
        </div>

Deze navigatie zou dus in het midden van de pagina moeten terechtkomen.

code:

#navigatie {
    font-family: 12px Verdana arial, sans-serif;
    z-index:  100;
}

#navigatie ul {
    padding: 0;
    margin: 0 auto;
    position: relative;
    list-style: none;
}

#navigatie ul li {
    float: left;
    position: relative;
}

Ik denk dat de float:left ervoor zorgt dat dit niet gebeurt. Vreemd genoeg kan ik er wel een gewone margin: 0 200px (bv) aan toekennen. Dan zal heel het geval 200px naar rechts opschuiven. Jammergenoeg ben ik koppig en wil ik dit in het midden van mijn blad krijgen.

Omdat dit het begin is van een dropdown-css-menu, ben ik verplicht om met float: left te werken. display: inline is jammergenoeg geen oplossing voor mij.

Kan één van jullie kanjers mij uit de nood helpen. Na 4 uur debuggen en vloeken zie ik het niet meer zitten...

Bedankt,
musti

[Verwijderd]

een breedte opgeven aan de ul zou moeten werken.

[Duroth]

De breedte van de DIV is in je voorbeeldcode nergens opgegeven. Of dit een probleem is weet ik niet, maar ik weet wel dat DIV-jes standaard zoveel mogelijk beschikbare breedte pakken. Waarschijnlijk staat je DIV dus over heel de breedte, met je navigatie links uitgelijnd in de div.

Probeer het eens met een vaste breedte van je DIV?

[Xander]

Duroth schreef op woensdag 09 januari 2008 @ 19:08:
De breedte van de DIV is in je voorbeeldcode nergens opgegeven. Of dit een probleem is weet ik niet, maar ik weet wel dat DIV-jes standaard zoveel mogelijk beschikbare breedte pakken. Waarschijnlijk staat je DIV dus over heel de breedte, met je navigatie links uitgelijnd in de div.

Probeer het eens met een vaste breedte van je DIV?

Dat helpt niet, aangezien die 'margin: 0 auto;' niet aan de div hangt maar aan de ul...

(vraag me niet waarom trouwens, ik zou hem lekker aan de div hangen)

Maargoed, het element waar je die margin op zet moet volgens mij inderdaad een vaste breedte hebben.

Heb je je pagina trouwens een doctype meegegeven? Laatst een keer een kwartiertje zitten prutsen met een niet werkende 'margin: 0 auto;', werkte niet in IE7 als er geen doctype aan de pagina hing. Denk je ook niet direct aan. Zeker niet omdat ik normaal begin met een doctype

[Verwijderd]

Daar was ik net mee aan het experimenteren.
Het probleem is dan wel dat als een gebruiker zijn tekstgrootte aanpast, de links niet meer naast elkaar blijven staan, omdat de browser (firefox?) die allemaal binnen die (pak nu) 600px wil duwen.

Of houd ik daar helemaal geen rekening mee?

(en doctype hangt er aan, ja

bedankt al...

[Verwijderd]

de breedte in em waardes is denk ik wel de oplossing.

[CH4OS]

Geef je UL dit mee:

Cascading Stylesheet:

margin-left: auto;
margin-right: auto;
text-align: left;

en je DIV (voor IE)

Cascading Stylesheet:

text-align: center;

Waarschijnlijk werkt het dan wel...