Ja er zijn al heel wat topics over dit onderwerp, maar mijn vraag gaat over een bepaalde aanpak. Ik heb zo'n beetje overal gezocht naar de beste manier om mbv divjes een site altijd in het midden te houden. Nou heb ik een site gevonden waar ze het stap voor stap uitleggen. De site is op onderstaande link te vinden
http://www.quirksmode.org/css/centering.html
Nu mijn vraag: als ik alle stappen netjes volg gaat het goed TOT het punt waarbij de site vertikaal gecentreerd wordt. Horizontaal wil nog lukken, maar het punt waarbij ze op de site de tabel toevoegen en er voor willen zorgen dat hij vertikaal in het midden blijft staan lukt mij niet. Dit terwijl het bij hun wel lukt, je kan namelijk ook het voorbeeld van hun zien. Op http://www.proxs.nl/~belinda kan je zien wat ik heb. Wie ziet er misschien wat ik fout doe?
Dit is mijn css:
En dit mijn html:
http://www.quirksmode.org/css/centering.html
Nu mijn vraag: als ik alle stappen netjes volg gaat het goed TOT het punt waarbij de site vertikaal gecentreerd wordt. Horizontaal wil nog lukken, maar het punt waarbij ze op de site de tabel toevoegen en er voor willen zorgen dat hij vertikaal in het midden blijft staan lukt mij niet. Dit terwijl het bij hun wel lukt, je kan namelijk ook het voorbeeld van hun zien. Op http://www.proxs.nl/~belinda kan je zien wat ik heb. Wie ziet er misschien wat ik fout doe?
Dit is mijn css:
code:
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
42
43
44
45
46
47
| div {
border: 1px solid #336699;
}
div.container {
position: relative;
margin: 0 auto;
width: 780px;
height: 432px;
text-align: left;
}
div.left {
position: absolute;
top: 0px;
left: 0px;
width: 200px;
height: 432px;
}
div.top {
position: absolute;
top: 0px;
left: 200px;
width: 580px;
height: 150px;
}
div.main {
position: absolute;
top: 150px;
left: 200px;
width: 580px;
height: 282px;
}
table {
width: 100%;
height: 100%;
}
td {
vertical-align: middle;
text-align: center;
} |
En dit mijn html:
code:
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 HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<title>De mooiste make-up</title>
</head>
<body>
<table border=0>
<tr>
<td>
<div class="container">
<div class="left">
Left content
</div>
<div class="top">
Top content
</div>
<div class="main">
Main content
</div>
</div>
</td>
</tr>
</table>
</body>
</html> |
:strip_exif()/u/5779/posttoast.gif?f=community)
/u/129382/crop5f6f24af0ae5d.png?f=community)
/u/5360/crop65d3c045ca48f_cropped.png?f=community)
/u/46804/crop5f989efcbb253.png?f=community)
:strip_exif()/u/27048/herebeestjes.gif?f=community)
) kan ik er geen nadeel aan vinden. Werkt in IE en Fx, zonder JS, en bij resizen valt er geen tekst buiten het scherm. :strip_icc():strip_exif()/u/8818/digidna.jpg?f=community)
:strip_icc():strip_exif()/u/59957/got-icon.jpg?f=community){kind=icon}