[CSS] Meerdere div's centreren

[Verwijderd]

ik wil een aantal layers op een pagina centreren, zodat ze dus op elke resolutie in het midden vd pagina staan. Maar wel de onderlinge afstand intact blijft.

Bijvoorbeeld : http://www.studentenadvertentie.nl/studadv/

Ik krijg dit niet goed voor elkaar....

[Verwijderd]

dat staat bij mij niet altijd in het midden, magoe

maak een container om alles heen

Cascading Stylesheet:

div#container {
width: xxpx;
margin: 0 auto;
}

/*alleen voor ie moeten we even prutsen, want die snapt dit niet:*/

body {
text-align: center;
}

div#container {
width: xxpx;
margin: 0 auto;
text-align: left;
}

is 1 van de methoden, de rest kan je zelf eigenlijk best opzoeken, want dit komt geregeld voorbij

[Verwijderd]

of

Cascading Stylesheet:

div#container {
position: absolute;
left: 50%;
width: 400px;
margin-left: -200px;

als het goed is werkt dit in alle browsers

[ Voor 21% gewijzigd door Verwijderd op 28-12-2004 18:20 ]

[Thijsmans]

Relatief positioneren heeft mijn voorkeur, absoluut vind ik zo smerig Wat dat betreft is mophor's oplossing netter. Maar dat is heel persoonlijk natuurlijk

Je hebt een container nodig en wat floats/margin's. That's all

[Verwijderd]

Prammenhanger schreef op dinsdag 28 december 2004 @ 18:29:
Relatief positioneren heeft mijn voorkeur, absoluut vind ik zo smerig

Dat slaat eigenlijk nergens op. Als iets op een bepaalde manier gepositioneerd moet worden, dan is er vaak geen keuze. Het is enorm handig dat je de positie van elementen op meerdere manieren kunt opgeven.

Wat dat betreft is mophor's oplossing netter. Maar dat is heel persoonlijk natuurlijk

Nee, dat heeft helemaal niets met persoonlijk te maken, het is gebaseerd op keiharde feiten. Met de marges (en text-align) blijft een element gewoon links staan als het schem te smal is. Met de absoluut gecentreerde elementen valt er dan een stuk links buiten het venster dat echt niet meer te bereiken is.

Wat mij betreft is de manier die mophor noemt de enige juiste manier, als je iets horizontaal moet centreren. Als je een block-level element ook vertikaal moet centreren dan kom je er haast niet omheen.

offtopic:
Maar dat vind ik juist weer niks, omdat ik het liefst sites heb die in de hoogte meerekken met de content, en die wil je bovenaan hebben staan, anders verspringt de bovenkant bij verschillende pagina's.

[Verwijderd]

kej ik heb het nu gecentreerd... Maar ik wordt echt gek van IE en Firefox....
Ben echt de draad kwijt....
http://www.studentenadvertentie.nl/studadv/index.htm

Als je allebei de browsers hebt, kan je dan ff kijken, zoals et er in firefox uitziet moet het zijn. Dwz zoals het erbij mij uitziet.
Waarom is het nou in IE weer helemaal anders... Ik heb de site gemaakt aan de hand van firefox, maar eerlijk gezegd had ik het gevoel dat firefox gewoon de css niet goed interpreteerde, want als ik het uitrekende klopte het gewoon niet, maar ik d8 firefox zal het wel weten....
Mss niet??

Dit is de code

code:

#hotlinks        { background-color: #7ca8f4; padding: 1px 1px 3px 5px; position: absolute; z-index: 1; top: 445px; width: 190px; clear: both; border: solid 1px #001 }
#categorieen        { background-color: #7ca8f4; padding: 2px 1px 3px 5px; position: absolute; z-index: 1; top: 140px; width: 190px; clear: both; border: solid 1px #001 }
#linkpartners       { background-color: #7ca8f4; padding: 1px 1px 3px 5px; position: absolute; z-index: 1; top: 395px; width: 190px; clear: both; border: solid 1px #001 }
#ad  { position: absolute; z-index: 1; top: 100px; left: 30px }
#home     { background-color: #7ca8f4; text-align: center; padding: 20px; top: 0; left: 0; width: 600px; height: 359px; border: solid 1px #001 }
#iframe     { position: relative; z-index: 1; top: 133px; left: 220px; width: 600px; clear: both }
#top      { background-color: #7ca8f4; text-align: center; padding: 0; position: absolute; z-index: 1; top: 50px; width: 860px; height: 70px; clear: both; border: solid 1px #001 }
#lijst   { text-align: left; position: absolute; z-index: 1; top: 120px; left: 150px; width: 300px; height: 180px }
#low  { position: absolute; top: 180px; clear: both }
#bottom  { text-align: center; position: absolute; z-index: 1; top: 240px; left: 30px }
#container  { text-align: left; margin: 0 auto; width: 900px }

[Verwijderd]

Nee, dat heeft helemaal niets met persoonlijk te maken, het is gebaseerd op keiharde feiten. Met de marges (en text-align) blijft een element gewoon links staan als het schem te smal is. Met de absoluut gecentreerde elementen valt er dan een stuk links buiten het venster dat echt niet meer te bereiken is.

Dat was ooit ook zo voor de "margin:0 auto" truuk. (Oudere Mozilla versies.) En ik vraag me af of het per de specificatie wel correct is.

Hoe dan ook, als je 'min-width' gebruikt (en '_width' voor Internet Explorer) op het BODY element of een omliggend DIV element heb je het hele probleem niet.

[eghie]

Waarom kun je eigenlijk niet gewoon div's alignen met align: center of horizontal-align: center CSS bevat toch ook vertical-align, waarom niet standaard ook een optie om de boel horizontaal te centreren.

[Larixk]

umh bedoel jij text-align?

[JHS]

Larixk schreef op vrijdag 07 januari 2005 @ 23:25:
umh bedoel jij text-align?

Nee, hij vraagt naar de réden dat er geen align property is in CSS voor div's ed .

edit:

Zet overigens gewoon margin-left en -right expliciet op auto, hoort te centeren .

[ Voor 19% gewijzigd door JHS op 08-01-2005 21:05 ]

[Spockz]

Dat laatste is dus een stuk makkelijker dan de wat ingewikkeldere constructies hierboven en werkt in FF én IE. Dus dat gebruik ik nu mooi.

Bedankt JHS