Css-fout
Even een vraagje:
Ik heb een css style-sheet en een index.php pagina.
Volgens mij kloppen beide codes, maar de main_container rekt niet mee uit.
Wat doe ik fout?
Hieronder de codes:
index.php
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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="nl" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="layout/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main_container">
<div id="header">
</div>
<div id="menu">
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">link 4</a></li>
<li><a href="#">link 5</a></li>
<li><a href="#">link 6</a></li>
</ul>
</div>
<div id="content">
<h1> Welkom</h1>
</div>
</div>
</body>
</html>
<html lang="nl" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="layout/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main_container">
<div id="header">
</div>
<div id="menu">
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">link 4</a></li>
<li><a href="#">link 5</a></li>
<li><a href="#">link 6</a></li>
</ul>
</div>
<div id="content">
<h1> Welkom</h1>
</div>
</div>
</body>
</html>
stylesheet:
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
67
68
69
70
71
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
67
68
69
70
71
/* CSS Document */
body{
background-color:#990000;
text-align:center;
font-family: Arial, Helvetica, sans-serif;
font-size: 62.5%;
margin:0;
}
div#main_container{
text-align:left;
width:1005px;
margin: 5px auto 0 auto;
background-color:#C80000;
height:auto;
}
div#header{
background: url(header.jpg) no-repeat;
width:100%;
height:100px;
float:left;
}
div#menu{
width:100%;
height:50px;
float:left;
}
div#content{
float: left;
width: 100%;
height: auto;
min-height:420px;
margin-bottom: 5px;
}
#menu ul{
list-style: none;
padding: 10px 0 0 0;
}
#menu li{
display: inline;
margin: 0 20px 0 0;
}
#menu a{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
text-decoration: none;
padding: 6px 5px 0 5px;
}
#menu a:link, #menu a:visited{
background: transparent url(../_img/hor_rood.gif) no-repeat top center;
border-top: 3px solid #DA2502;
border-bottom: 2px solid #DA2502;
color: #000;
}
#menu a:hover, #menu a:active{
background: transparent url(../_img/hor_geel.gif) no-repeat top center;
border-top: 3px solid #F5EC00;
border-bottom: 2px solid #F5EC00;
color: #999;
}
body{
background-color:#990000;
text-align:center;
font-family: Arial, Helvetica, sans-serif;
font-size: 62.5%;
margin:0;
}
div#main_container{
text-align:left;
width:1005px;
margin: 5px auto 0 auto;
background-color:#C80000;
height:auto;
}
div#header{
background: url(header.jpg) no-repeat;
width:100%;
height:100px;
float:left;
}
div#menu{
width:100%;
height:50px;
float:left;
}
div#content{
float: left;
width: 100%;
height: auto;
min-height:420px;
margin-bottom: 5px;
}
#menu ul{
list-style: none;
padding: 10px 0 0 0;
}
#menu li{
display: inline;
margin: 0 20px 0 0;
}
#menu a{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
text-decoration: none;
padding: 6px 5px 0 5px;
}
#menu a:link, #menu a:visited{
background: transparent url(../_img/hor_rood.gif) no-repeat top center;
border-top: 3px solid #DA2502;
border-bottom: 2px solid #DA2502;
color: #000;
}
#menu a:hover, #menu a:active{
background: transparent url(../_img/hor_geel.gif) no-repeat top center;
border-top: 3px solid #F5EC00;
border-bottom: 2px solid #F5EC00;
color: #999;
}
Gewijzigd op 27/07/2010 19:37:38 door Rolf -
Het komt doordat alle content in die maincontainer is gefloat, de box rekt dan niet automatisch mee.
Gewijzigd op 27/07/2010 19:50:33 door Nino M
En als tip: gebruik geen width:1005px maar 990px, want 990px is het beste als grootste site breedte te ivm scrollbars etc.
En dan nog een, je hoeft geen div# te gebruiken, # is al voldoende, dit is minder type werk en voor later is het makkelijk, stel main_container word een span ipv van div, dus als je in je css overal div#main_container hebt staan, moet je div weer vervangen voor span, dus div is een beetje overbodig.
#maincontainer mag volgens de html specificatie sowieso nooit een span worden aangezien dat een inline element is
Tis maar wat je zelf wil, was altijd nog maar een tip he ;)
Het is gelukt.
En bedankt voor de tips ;)
Meer over clearfix uitgelegd:
http://www.sceneone.nl/tips_tricks/clearfix.php