CSS probleem
Ik wou voor het eerst de layout van mijn pagina volledig in CSS schrijven doormiddel van boxes. maar heb enkele probleempjes
test pagina:
http://nevens.no-ip.com/nevensnetworks/
css file:
http://nevens.no-ip.com/nevensnetworks/include/style.css
het is de bedoeling dat de blauwe en paarse box evenhoog worden, dus als er de "page" of het blauwe paarse box meer text komt, moete deze beide groter worden.
zodat de rode box mooi gelijk onder de twee bovenliggende boxen komt
code:
Code (php)
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
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
<!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>
<meta http-equiv="Content-Type" content="text/html; charset="iso-8859-1" />
<title>Nevens Networks</title>
<link rel="stylesheet" href="include/style.css" type="text/css" media="all" />
</head>
<body>
<div class="page">
<div class="top">
toptoptoptoptop
</div>
<div class="left">
leftleftleftleftleftleftleftleft
</div>
<div class="right">
rightrightrightrightrightrightrightright<br/>
hier de content van de pagina<br/><br/><br/><br/>
lqsdflkjsdddd<br/><br/><br/><br/><br/>
</div>
<div class="footer">
Page created by .. lalalla
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset="iso-8859-1" />
<title>Nevens Networks</title>
<link rel="stylesheet" href="include/style.css" type="text/css" media="all" />
</head>
<body>
<div class="page">
<div class="top">
toptoptoptoptop
</div>
<div class="left">
leftleftleftleftleftleftleftleft
</div>
<div class="right">
rightrightrightrightrightrightrightright<br/>
hier de content van de pagina<br/><br/><br/><br/>
lqsdflkjsdddd<br/><br/><br/><br/><br/>
</div>
<div class="footer">
Page created by .. lalalla
</div>
</div>
</body>
</html>
Gewijzigd op 01/01/1970 01:00:00 door Mark D
Code (php)
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
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
<?
body{
margin: 0px;
}
.page{
width: 960px;
border: 1px solid black;
margin-left: auto;
margin-right: auto;
}
.top{
align: middle;
background-color: yellow;
width: 960px;
height: 120px;
}
.left{
background-color: blue;
width: 160px;
float: left;
}
.right{
float: right;
width: 800px;
background-color: purple;
}
.footer{
width: 960px;
text-align: center;
background-color: red;
}
?>
body{
margin: 0px;
}
.page{
width: 960px;
border: 1px solid black;
margin-left: auto;
margin-right: auto;
}
.top{
align: middle;
background-color: yellow;
width: 960px;
height: 120px;
}
.left{
background-color: blue;
width: 160px;
float: left;
}
.right{
float: right;
width: 800px;
background-color: purple;
}
.footer{
width: 960px;
text-align: center;
background-color: red;
}
?>
die "tables" die je zogezegt niet mag gebruiken deden dit zonder enkele problemen!, dus vertel mij niet dat dit niet gaat in CSS ... en mijn paarse en blauwe balk zijn nog steeds niet evengroot maarja.
Ik zal even een klein voorbeeldje proberen te maken..