:strip_icc():strip_exif()/u/62639/tm.jpg?f=community)
Ik wil een divje verticaal (en horizontaal) centeren en kreeg daar problemen mee. Heb uiteraard gezocht en ben zo'n beetje iedere website van elke (wanabe) guru afgestruind en bijna allemaal gaven ze de oplossing die ik zelf ook al had: de bovenkant op 50% zetten en dan met een negatieve margin (die de helft is van de totale hoogte) de boel goed zetten. De code:
voorbeeld
Dat werkt in princiepe ook wel, maar heeft 1 hele vervelende eigenschap: als het scherm te klein wordt (zie voorbeeld, en maak je scherm dan maar eens kleiner), dan valt ie buiten je beeldscherm, zonder dat je kunt scrollen (wat opzich ook logisch is).
Dat wil ik dus niet... na veel gezoek en niets kunnen vinden heb ik deze oplossing bedacht:
voorbeeld
Maar daar ben ik om twee redenen ook niet blij mee:
1. Nou moet ik alsnog een tabel voor opmaak gebruiken en vind ik dus niet zo mooi staan
2. Dit werkt niet in Mozilla Firefox (en Safari geloof ik ook niet). Opzich valt dat op te lossen door er HTML 4.01 Transitional van te maken, maar ja.. zo dwalen we steeds verder af.
Mijn vraag:
Hoe kun je XHTML valide en cross-browser horizontaal centeren, zonder dat je tegen het probleem van het eerste voorbeeld aanloopt?
Wie het weet mag het zeggen :-) Ik heb dus echt m'n best gedaan om het te vinden - want het lijkt me zo'n triviaal probleem - maar zonder succes dus
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>centreer test</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body { width: 100%; height: 100%; margin: 0%; padding: 0%; } #container { position: absolute; width: 400px; height: 300px; top: 50%; left: 50%; margin: -200px -150px; background-color: pink; border: 1px solid red; } </style> </head> <body> <div id="container"> ik sta gecentreerd </div> </body> </html> |
voorbeeld
Dat werkt in princiepe ook wel, maar heeft 1 hele vervelende eigenschap: als het scherm te klein wordt (zie voorbeeld, en maak je scherm dan maar eens kleiner), dan valt ie buiten je beeldscherm, zonder dat je kunt scrollen (wat opzich ook logisch is).
Dat wil ik dus niet... na veel gezoek en niets kunnen vinden heb ik deze oplossing bedacht:
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>centreer test</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body { width: 100%; height: 100%; margin: 0%; padding: 0%; } #centeren { border-collapse: collapse; width: 100%; height: 100%; } #container { width: 400px; height: 300px; background-color: pink; border: 1px solid red; } </style> </head> <body> <table id="centeren"> <tr> <td align="center" valign="middle"> <div id="container"> ik sta gecentreerd </div> </td> </tr> </table> </body> </html> |
voorbeeld
Maar daar ben ik om twee redenen ook niet blij mee:
1. Nou moet ik alsnog een tabel voor opmaak gebruiken en vind ik dus niet zo mooi staan
2. Dit werkt niet in Mozilla Firefox (en Safari geloof ik ook niet). Opzich valt dat op te lossen door er HTML 4.01 Transitional van te maken, maar ja.. zo dwalen we steeds verder af.
Mijn vraag:
Hoe kun je XHTML valide en cross-browser horizontaal centeren, zonder dat je tegen het probleem van het eerste voorbeeld aanloopt?
Wie het weet mag het zeggen :-) Ik heb dus echt m'n best gedaan om het te vinden - want het lijkt me zo'n triviaal probleem - maar zonder succes dus
[ Voor 10% gewijzigd door marty op 03-03-2006 17:36 ]
:strip_exif()/u/105445/zidane2.gif?f=community)
. want dat heeft html sowieso niet echt):strip_exif()/u/3333/pumpkin_avatar.gif?f=community){kind=avatar}
)