[CSS + DIV] centeren van ul als block

[Verwijderd]

Ik zit met een CSS align probleempje waar ik maar niet uit kom.. ik heb toch wel redelijk wat ervaring dus heb ook al een hele hoop geprobeerd en gezocht. Ik heb nu de code volledig gestript om de essentie van mijn probleem makkelijk uit te kunnen leggen.

De bedoeling is dat de ul en li elementen gecentreerd worden binnen een div met een vaste waarde. Dit geeft problemen omdat ik de ul weergeef als list-style-type: none en de li's als blokken met een float worden weergegeven. In dit laatste zit volgens mij ook het probleem. Als ik de float van de li's instel op left of right, dan gebeurt dat ook netjes. Alleen centreren krijg ik onmogelijk voor elkaar. Het zou fijn zijn als het in zowel IE als in FF zou werken.

De broncode is te vinden op:
http://www.f249.nl/test_align_ul.htm

In de CSS code heb ik de plek gecomment waar de positie wordt bepaald.

Alvast bedankt voor de moeite!
Grts,
David

[disjfa]

Wil je de list items onder elkaar? Gewoon niet floaten.

Maar wat wil je precies centreren. Ik begrijp het niet helemaal. De div, de ul, de li`s? En zo ja de list items, waarin wil je ze centreren? Of wil je gewoon een menutje wat 100% breed is met knoppen naast elkaar?

[Padschild]

Om een block te centreren (de UL) moet je de margin: 0 auto; setten. Float is dan niet nodig voor het UL element. Wel even netjes een breedte opgeven

[ Voor 14% gewijzigd door Padschild op 03-09-2007 11:09 ]

[Verwijderd]

disjfa schreef op maandag 03 september 2007 @ 11:08:
Of wil je gewoon een menutje wat 100% breed is met knoppen naast elkaar?

ik wil een menutje (de div dus eigenlijk) met een breedte van 800 pixels hebben. Hierin wil ik variabel (de items worden straks namelijk uit een db gehaald) de UL opbouwen aan de hand van de LI's die in de database staan. De LI's kunnen dus ook eigenlijk geen vaste breedte krijgen omdat de tekst variabel is.

In het geval van mijn voorbeeld zou het beoogde resultaat dus zijn:

[Padschild]

Verwijderd schreef op maandag 03 september 2007 @ 11:21:
[...]


ik wil een menutje (de div dus eigenlijk) met een breedte van 800 pixels hebben. Hierin wil ik variabel (de items worden straks namelijk uit een db gehaald) de UL opbouwen aan de hand van de LI's die in de database staan. De LI's kunnen dus ook eigenlijk geen vaste breedte krijgen omdat de tekst variabel is.

In het geval van mijn voorbeeld zou het beoogde resultaat dus zijn:
[afbeelding]

In dit geval dus een margin: 0 auto; setten op het UL element, die zorgt ervoor dat deze horizontaal in het midden komt te staan. De breedte van de LI elementen doen er dan niet zo toe, het gaat omde breedte van het UL element. Als deze standaard 100% is valt er niet veel te centreren.

Verder, wat bedoel je met een extra item in je plaatje? Daar zit weer ruimte tussen?

[disjfa]

Of gewoon een text-align center en op de list items een display:inline.

[Padschild]

disjfa schreef op maandag 03 september 2007 @ 11:28:
Of gewoon een text-align center en op de list items een display:inline.

Ja, dat kan ook Sorry voor mijn dumb anwser...

[Verwijderd]

Padschild schreef op maandag 03 september 2007 @ 11:26:
Verder, wat bedoel je met een extra item in je plaatje? Daar zit weer ruimte tussen?

nee, het gaat er puur om dat alles mooi in het midden blijft.. extra ruimte was niet de bedoeling

ik heb de pagina nu aangepast, de UL vaste breedte meegegeven en een rode border meegegeven.. enig idee wat er nu nog mis gaat?

thnx!

[disjfa]

Ik heb niet naar de code gekeken. Maar je float nog steeds je list items.

[Padschild]

Okay, sorry voor mijn eerdere antwoord, er gaat nu iets fout:

Margin: 0 auto; is om een heel element de centreren ten op zichte van de parent.
text-align: center; werkt in dit geval ook en is zelfs beter nu.

Op het moment dat je de text-align: center; set, moet je niet de li elementen laten floaten (links of rechts) maar gewoon het hele float: gebeuren weghalen.

Cascading Stylesheet:

ul {
    border: 1px solid #ff0000;
    padding: 0;
    list-style-type: none;
    text-align: center;
}
ul li {
    display: block;
    padding: 0;
    margin: 0;
    height: 20px;
}
ul li a {
    background: #fff;
    width: 140px;
    border: none;
    padding: 0;
    color: #06c;
    text-decoration: none;
}
ul li a:hover {
    color: #fff;
    background: #06c;
}

[ Voor 33% gewijzigd door Padschild op 03-09-2007 11:38 ]

[Verwijderd]

disjfa schreef op maandag 03 september 2007 @ 11:28:
Of gewoon een text-align center en op de list items een display:inline.

hmm.. ik doe toch nog iets verkeerd..:
http://www.f249.nl/test_align_ul2.htm

zodra ik ook maar iets van de float weghaal komen de list items onder elkaar.. enig idee wat ik nu nog verkeerd doe? zou je anders misschien de juiste CSS kunnen posten? ik ben echt enorm blij wanneer dit probleem verholpen is!

[disjfa]

De linkjes in je list item zet je neer als block item. Dus nemen ze 100% breedte op.

Waarom zet je er trouwens een div omheen? Je kan ook gewoon de breedte meegeven aan de lijst.

[ Voor 36% gewijzigd door disjfa op 03-09-2007 11:42 ]

[Verwijderd]

dank voor de CSS!
Ik ben er nu bijna, zie:
http://www.f249.nl/test_align_ul.htm

nu alleen de items nog naast elkaar en weergeven als block zodat de hover mooi overkomt.. maar zodra ik display:block weer op de hover zet gaat t weer mis...

[ Voor 16% gewijzigd door Verwijderd op 03-09-2007 11:44 ]

[Padschild]

Verwijderd schreef op maandag 03 september 2007 @ 11:42:
dank voor de CSS!
Ik ben er nu bijna, zie:
http://www.f249.nl/test_align_ul.htm

nu alleen de items nog naast elkaar en weergeven als block zodat de hover mooi overkomt..

display: inline op <li> will do the trick denk ik.

[disjfa]

Je verplaatst je position:block nu weer naar je list item Waarom

[Verwijderd]

disjfa schreef op maandag 03 september 2007 @ 11:43:
Je verplaatst je position:block nu weer naar je list item Waarom

euhm.. omdat ik echt van alles aan het proberen ben hehe.. ik wil de list items nu alleen nog als block weergeven, of een padding.. zo de items maar wat breder worden en de hover ook op die 'tussenruimte' werkt.. het is nu nog maar 1 pagina, die tweede heb ik verwijderd om verwarring te voorkomen:
http://www.f249.nl/test_align_ul.htm

[ Voor 13% gewijzigd door Verwijderd op 03-09-2007 11:49 ]

[Verwijderd]

doel bereikt! dank allen voor de moeite!!