Div Layout
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
width = width - padding-left - padding-right
content {
width: 648px;
}
had padding: 0px in men css gedaan maar.. dat werkt alleen niet?
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
ik zat zelf al een beejte in de pruts maar nu snappik m;) (Y)