Div Layout
Na het lezen van wat tutorials ben ik er achter gekome dat je de layout het beste in divjes kan doen..
maar nu heb ik een vraagje.. ik ben bezig met deze layout.
de voledige breedte van de pagina wil ik 800px dus dat heb ik gedaan bij de header..
de rest verdeel ik daar onder met het menu links 150px en de content 650 samen weer 800. maar op 1ofandere gekke manier is die toch elke x weer 2 px langer ofzo:s ik had gekeken naar margin enz. maar dat was et niet..
kan iemand mij helpen?:Pvastwel (ben niet egt zo goed in layouts:P)
alvast bedankt
maar nu heb ik een vraagje.. ik ben bezig met deze layout.
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="author" content="prodiger_best">
<title>Untitled 3</title>
<style>
.header{
width: 800px;
height: 100px;
border-top: 1px dashed #000000;
border-right: 1px dashed #000000;
border-left: 1px dashed #000000;
}
.headmenu{
border-right: 1px dashed #000000;
margin-left: 150px;
width: 650px;
}
.menu {
width: 150px;
height: 400px;
border: 1px dashed #000000;
float: left;
}
.content {
width: 650px;
height: 400px;
border-top: 1px dashed #000000;
border-right: 1px dashed #000000;
border-bottom: 1px dashed #000000;
margin-left: 150px;
}
.footer{
width: 800px;
height: 100px;
text-align: center;
}
</style>
</head>
<body>
<div id='container'>
<div class='header'><center><h1>FotoFilmFact</h1></center></div>
<div class='headmenu'>
HeadMenu
</div>
<div class='menu'>
SubMenu
</div>
<div class='content'>
Floating Content
</div>
<div class='footer'>
KVK NR.
</div>
</div>
</body>
</html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="author" content="prodiger_best">
<title>Untitled 3</title>
<style>
.header{
width: 800px;
height: 100px;
border-top: 1px dashed #000000;
border-right: 1px dashed #000000;
border-left: 1px dashed #000000;
}
.headmenu{
border-right: 1px dashed #000000;
margin-left: 150px;
width: 650px;
}
.menu {
width: 150px;
height: 400px;
border: 1px dashed #000000;
float: left;
}
.content {
width: 650px;
height: 400px;
border-top: 1px dashed #000000;
border-right: 1px dashed #000000;
border-bottom: 1px dashed #000000;
margin-left: 150px;
}
.footer{
width: 800px;
height: 100px;
text-align: center;
}
</style>
</head>
<body>
<div id='container'>
<div class='header'><center><h1>FotoFilmFact</h1></center></div>
<div class='headmenu'>
HeadMenu
</div>
<div class='menu'>
SubMenu
</div>
<div class='content'>
Floating Content
</div>
<div class='footer'>
KVK NR.
</div>
</div>
</body>
</html>
de voledige breedte van de pagina wil ik 800px dus dat heb ik gedaan bij de header..
de rest verdeel ik daar onder met het menu links 150px en de content 650 samen weer 800. maar op 1ofandere gekke manier is die toch elke x weer 2 px langer ofzo:s ik had gekeken naar margin enz. maar dat was et niet..
kan iemand mij helpen?:Pvastwel (ben niet egt zo goed in layouts:P)
alvast bedankt
Gewijzigd op 01/01/1970 01:00:00 door Tijn
De padding telt ook mee in de breedte ;)
width = width - padding-left - padding-right
content {
width: 648px;
}
width = width - padding-left - padding-right
content {
width: 648px;
}
ahhaa maar dan vraag ik me af.. k me af kan ik de padding niet gewoon op 0 zette..
had padding: 0px in men css gedaan maar.. dat werkt alleen niet?
had padding: 0px in men css gedaan maar.. dat werkt alleen niet?
Padding moet je meetellen, maar borders ook.
Edit:
Zo werkt hij wel, en hij valideert ook nog
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 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="prodiger_best" />
<title>Untitled 3</title>
<style type="text/css" media="screen">
.header{text-aligen:center;width:800px;height:100px;border-top:1px dashed #000;border-right:1px dashed #000;border-left:1px dashed #000;}
.headmenu{margin-left:150px;width:651px;border-right:1px dashed #000;}
.menu{width:150px;height:400px;border:1px dashed #000;float:left;}
.content{width:651px;height:400px;border-top:1px dashed #000;border-right:1px dashed #000;border-bottom:1px dashed #000;margin-left:150px;}
.footer{width:800px;height:100px;text-align:center;}
</style>
</head>
<body>
<div id="container">
<div class="header">
<h1>FotoFilmFact</h1>
</div>
<div class="headmenu"> HeadMenu </div>
<div class="menu"> SubMenu </div>
<div class="content"> Floating Content </div>
<div class="footer"> KVK NR. </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" />
<meta name="author" content="prodiger_best" />
<title>Untitled 3</title>
<style type="text/css" media="screen">
.header{text-aligen:center;width:800px;height:100px;border-top:1px dashed #000;border-right:1px dashed #000;border-left:1px dashed #000;}
.headmenu{margin-left:150px;width:651px;border-right:1px dashed #000;}
.menu{width:150px;height:400px;border:1px dashed #000;float:left;}
.content{width:651px;height:400px;border-top:1px dashed #000;border-right:1px dashed #000;border-bottom:1px dashed #000;margin-left:150px;}
.footer{width:800px;height:100px;text-align:center;}
</style>
</head>
<body>
<div id="container">
<div class="header">
<h1>FotoFilmFact</h1>
</div>
<div class="headmenu"> HeadMenu </div>
<div class="menu"> SubMenu </div>
<div class="content"> Floating Content </div>
<div class="footer"> KVK NR. </div>
</div>
</body>
</html>
Gewijzigd op 01/01/1970 01:00:00 door Jan Koehoorn
oohh hartstikke bedankt.
ik zat zelf al een beejte in de pruts maar nu snappik m;) (Y)
ik zat zelf al een beejte in de pruts maar nu snappik m;) (Y)
Snelle reactie ;-) Maar graag gedaan uiteraard!
En als je nog vragen hebt stel ze maar als ik de kans krijg voor Jan , of wessel wil ik ook wel helpen, Zover ik kan dan toch :p




