[xhtml1.1] centreren table/div

[Scorpion1984]

Ik ben nu al een hele dag bezig om alleen maar in xhtml1.1 de table/div te centreren op het scherm. Dat lijk onmogelijk te zijn, heb overal al gezocht. En van alles geprobeerd, weet iemand een oplossing?

Dingen uitgeprobeerd:
1. in de css text-align:center of align: center zetten van de table/div
2. een div om de table/div zetten met de css text-align:center of align: center
3. combies van 1&2
4 andere waar ik even niet op kom

[CrashOne]

Uit het hoofd:

code:

body{
text-align: center;
}

div{
width:700px;
text-align:left;
margin: 0 auto;
}

Beter zoeken dus

[Blaise]

Cascading Stylesheet:

element{
   position : relative;
   width : breedte px;
   margin-left : - breedte gedeeld door 2 px;
   left : 50%;
}

voorbeeld:

Cascading Stylesheet:

table{
   position : relative;
   width : 700px;
   margin-left : -350px;
   left : 50%;
}

[Blaise]

CrashOne schreef op 04 maart 2004 @ 21:37:
Uit het hoofd:

code:

body{
text-align: center;
}

div{
width:700px;
text-align:left;
margin: 0 auto;
}

Beter zoeken dus

had hij al geprobeerd.

[CrashOne]

Jou manier zou ik niet doen, als de resolutie kleiner is dan de breedte van het element verdwijnt en een gedeelte links buiten het scherm waar je niet heen kan scrollen.

Voorbeeldje:
http://home.cable4u.nl/~t...ers/example/scorpion1984/

[ Voor 20% gewijzigd door CrashOne op 04-03-2004 21:52 . Reden: voorbeeldje erbij! ]

[Scorpion1984]

CrashOne schreef op 04 maart 2004 @ 21:44:
Jou manier zou ik niet doen, als de resolutie kleiner is dan de breedte van het element verdwijnt en een gedeelte links buiten het scherm waar je niet heen kan scrollen.

Voorbeeldje:
http://home.cable4u.nl/~t...ers/example/scorpion1984/

Thanx, die werkt wel.

[edwinistrator]

ik zie in je example dat de 100% heigth wel werkt als je ook html, body 100% heigth meegeeft, toch weer wat geleerd, thanks

[JeromeB]

edwinistrator schreef op 04 maart 2004 @ 23:15:
ik zie in je example dat de 100% heigth wel werkt als je ook html, body 100% heigth meegeeft, toch weer wat geleerd, thanks

beperkt. Als de content langer is dan de body kan het problemen geven. Een oplossing: http://www.the-forums.nl/viewtopic.php?p=7605#7605

[AkaXakA]

http://www.thenoodleincid...esson/basic_centered.html

een onderdeel van http://www.thenoodleincid...als/box_lesson/boxes.html

erg goede site

[Blaise]

Ik vind het gebruiken van een ranzige hack niet erg goed, zeker als het veel simpeler en minstens zo doeltreffend kan.

[djc]

Is dit een ranzige hack? Volgens mij is dat juist de nette oplossing...

[edwinistrator]

beperkt. Als de content langer is dan de body kan het problemen geven. Een oplossing: http://www.the-forums.nl/viewtopic.php?p=7605#7605

thx, nog beter

Manuzhai schreef op 05 maart 2004 @ 09:11:
Is dit een ranzige hack? Volgens mij is dat juist de nette oplossing...

nee, Blaise bedoelt deze hack denk ik:
http://www.thenoodleincid...esson/basic_centered.html

code:

...
/* part 2 of 2 centering hack */
    width: 400px; /* ie5win fudge begins */
    voice-family: "\"}\"";
    voice-family:inherit;
    width: 370px;
...

[ Voor 3% gewijzigd door edwinistrator op 05-03-2004 14:08 ]

[CrashOne]

Das een boxmodel hack en heeft weinig met dit topic van doen.

Ik zou trouwens deze gebruiken:

code:

body>element{
/* non IE */
}
element {
/* IE */
}

[Verwijderd]

Das een boxmodel hack en heeft weinig met dit topic van doen.

Hoewel er 'box model' in voorkomt, kan deze natuurlijk ook voor andere doeleinden gebruikt worden.

Ik zou trouwens deze gebruiken:

En hoe zie je dat precies voor je?

( http://annevankesteren.nl/test/templates/center-h )