/u/164057/crop621916695ff29_cropped.png?f=community)
Ik ben nu bezig met het maken van een website. Ik gebruik tot nu toe geen divs, omdat ik dat omslachtig vind en IE en FF de pagina dan verschillend renderen. Sowieso gaat m'n lay-out naar de knoppen zodra ik de padding in de divs aanpas. Daarom gebruik ik een tabel als container met cellen als divs 
Ik wil dat een tabel de bovenkant en onderkant van de browser raakt, dmv een soort height=100%, wat niet meer gaat sinds HTML 4.01. De opmaak het liefst in valid CSS uiteraard en de tabel in valid XHTML, zowel in IE en FF hetzelfde gerenderd. Daarnaast moet de tabel gecentreerd worden. Op dit moment is dat het enige wat lukt en dan wel alleen in FF d.m.v. CSS margin-left:auto;margin-right:auto
De tabel wordt op dit moment in FF en IE verticaal niet gestretched en raakt de boven- en onderkant van de browser niet. In IE is de tabel niet eens gecentreerd.
Mijn CSS
Mijn XHTML
Ik had het daarnet in orde wat betreft het raken van de tabel aan de bovenkant van het browserscherm, maar omdat ik nogal onhandig werk met wordpad, ben ik die code kwijtgeraakt
Ik heb gezocht op het internet, maar ben de link vergeten waar dat te vinden was. Wie kan me een beetje op weg helpen?
Ik wil dat een tabel de bovenkant en onderkant van de browser raakt, dmv een soort height=100%, wat niet meer gaat sinds HTML 4.01. De opmaak het liefst in valid CSS uiteraard en de tabel in valid XHTML, zowel in IE en FF hetzelfde gerenderd. Daarnaast moet de tabel gecentreerd worden. Op dit moment is dat het enige wat lukt en dan wel alleen in FF d.m.v. CSS margin-left:auto;margin-right:auto
De tabel wordt op dit moment in FF en IE verticaal niet gestretched en raakt de boven- en onderkant van de browser niet. In IE is de tabel niet eens gecentreerd.
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
| body {
margin=0px;
padding=0px;
background-color:rgb(255,255,255);
}
a.header {
letter-spacing:-1px;
font-size:40px;
font-family:georgia;
text-decoration:none;
color:rgb(0,0,0)
}
a.link {
margin-left:7px;
font-size:15px;
font-family:arial;
text-decoration:none;
color:rgb(0,0,255)
}
table.container {
background-color:rgb(255,255,255);
text-align:left;
margin-left:auto;
margin-right:auto
}
td.leftcolumn {
width:160px
}
td.rightcolumn {
width:800px
}
td.content {
padding-top:20px
} |
Mijn XHTML
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
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Testing</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="en" />
<link rel="stylesheet" type="text/css" href="css.css" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<table class="container">
<tr>
<td class="leftcolumn"></td>
<td class="rightcolumn">
<a class="header" href="index.html">Testing</a><br />
<a class="link" href="cpu.html">CPU</a>
<a class="link" href="gpu.html">GPU</a>
<a class="link" href="chipsets.html">Chipsets</a>
<a class="link" href="motherboards.html">Motherboards</a>
<a class="link" href="storage.html">Storage</a>
<a class="link" href="displays.html">Displays</a>
</td>
</tr>
<tr>
<td>Sidebar</td>
<td class="content">
<p>Testing</p>
<p>Testing</p>
</td>
</tr>
<tr>
<td></td>
<td><a class="link" href="contact.html">Contact</a></td>
</tr>
</table>
</body>
</html> |
Ik had het daarnet in orde wat betreft het raken van de tabel aan de bovenkant van het browserscherm, maar omdat ik nogal onhandig werk met wordpad, ben ik die code kwijtgeraakt
Ik heb gezocht op het internet, maar ben de link vergeten waar dat te vinden was. Wie kan me een beetje op weg helpen?
:strip_exif()/u/53522/crop583d477015a24.gif?f=community)
Afgezien daarvan: 800*600 ondersteunen als resolutie, zie ik niet echt zitten. Ik bouw ook op minimale breedte 1024px, gewoon omdat het meerendeel die breedte zeker te weten ondersteund.
:strip_exif()/u/22670/td_icon2.gif?f=community)
Dat komt omdat ik de breedte van de div container op auto heb gezet. Zodra ik er een waarde aan geef, centreert de boel en krijgt het de aangegeven breedte. Ik wil echter de container geen breedte geven, maar alleen de divs sidebar en content. Is dit mogelijk of moet ik de container toch een breedte geven om de boel gecentreerd te krijgen?
Morgen meer
ik niet, want ik ben puristisch bezig. :strip_exif()/u/27216/bosmonster_dropdown.gif?f=community)
:strip_exif()/u/68361/TXC.gif?f=community)
:strip_exif()/u/21451/spinal150.gif?f=community)
:strip_exif()/u/70216/crop5744d0d71f542_cropped.gif?f=community)