Tijden veranderen
hoogte wrapper
Ik heb een achterground die over de hele vrije ruimte gaat.
Dan heb ik een wit vlak dat eigenlijk in de lengte mee moet gaan met het aantal content. Maar ik krijg het niet voor elkaar.
Heb de height al op auto gezet maar dan lukt het ook niet.
Iemand een idee? Het probleem zit in de #wrapper denk ik.
Dat is het grote witte vlak.
Dat moet doorlopen tot onder de tussenstand nu zeg maar.
screenshot: http://imageshack.us/photo/my-images/843/layoutxc.jpg/
Let niet op de inhoud. Dit is er zomaar ingezet. Wordt nog allemaal actueel en automatisch.
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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>BLUE WHITE LIFE | FC DEN BOSCH FANSITE</title>
<link rel="stylesheet" type="text/css" href="stijl.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<span id="headerlogin"><a href="" title="Inloggen" class="menuknop">INLOGGEN</a> / <a href="" title="Account aanmaken" class="menuknop">ACCOUNT AANMAKEN</a></span>
<div id="menu">
<ul id="menulist">
<li><a href="" class="menuknop">HOME</a></li><img src="images/layout/dots.png" style="position: relative; top: 3px;">
<li><a href="" class="menuknop">NIEUWS</a></li><img src="images/layout/dots.png" style="position: relative; top: 3px;">
<li><a href="" class="menuknop">DE CLUB</a></li><img src="images/layout/dots.png" style="position: relative; top: 3px;">
<li><a href="" class="menuknop">WEDSTRIJDEN</a></li><img src="images/layout/dots.png" style="position: relative; top: 3px;">
<li><a href="" class="menuknop">MULTIMEDIA</a></li><img src="images/layout/dots.png" style="position: relative; top: 3px;">
<li><a href="" class="menuknop">GASTENBOEK</a></li><img src="images/layout/dots.png" style="position: relative; top: 3px;">
<li><a href="" class="menuknop">EXTRA</a></li>
</ul>
</div>
</div>
<div id="content">
<div class='titel'>HOME</div>
<div class="blok">
Hallo
</div>
</div>
<div id="rightmenu">
<!-- Eerstvolgende wedstrijd -->
<div class='titel'>EERSTVOLGENDE WEDSTRIJD</div>
<div class="blok" align="center">
<img src="images/clubs/fcvolendam.jpg" width="80"> <img src="images/clubs/fcdenbosch.png" width="90"> <br />
<b>FC Volendam - FC Den Bosch</b> <br /><br />
Zondag 22 Januari 14:30 | Kras Stadion
</div>
<!-- Tussenstand jupiler league -->
<div class='titel'>TUSSENSTAND JUPILER LEAGUE</div>
<div class="blok">
<table width="270">
<tr>
<td width="20"></td>
<td width="150"><b>Club</b></td>
<td width="30"><b>Wed.</b></td>
<td width="30"><b>Pnt.</b></td>
<td width="40"><b>Saldo</b></td>
</tr>
<tr class="even"><td>1.</td><td>FC Zwolle</td><td>18</td><td>44</td><td>46 - 18</td></tr>
<tr class="odd"><td>2.</td><td>FC Eindhoven</td><td>18</td><td>35</td><td>28 - 15</td></tr>
<tr class="even"><td>3.</td><td>Sparta Rotterdam</td><td>18</td><td>32</td><td>32 - 18</td></tr>
<tr class="odd"><td>4.</td><td>sc Cambuur</td><td>18</td><td>31</td><td>40 - 26</td></tr>
<tr class="even clubfcdb"><td>5.</td><td>FC Den Bosch</td><td>18</td><td>30</td><td>35 - 17</td></tr>
</table>
</div>
</div>
</div>
<div id="footer">
© <?php echo date("Y"); ?> BLUE WHITE LIFE | ALLE RECHTEN VOORBEHOUDEN | DISCLAIMER | CONTACT
</div>
</body>
</html>
CSS
* { padding: 0; margin: 0; }
body {
background-image: url(images/layout/bg.jpg);
font-family: Century Gothic, Arial, Helvetica;
font-size: 11px;
color: #000000;
}
#wrapper {
margin: 0 auto;
width: 900px;
background: #FFF;
border: 1px solid #000;
border-top: none;
}
#header {
position: relative;
top: 5px;
left: 0px;
width: 890px;
height: 230px;
background-image: url(images/layout/header.jpg);
background-repeat: none;
margin-left: 5px;
}
#headerlogin {
position: absolute;
top: 9px;
left: 685px;
font-size: 11px;
color: #FFF;
}
a.menuknop:link {color: #FFF; text-decoration: none; }
a.menuknop:visited {color: #FFF; text-decoration: none; }
a.menuknop:hover {color: #FFF; text-decoration: underline; }
a.menuknop:active {color: #FFF; }
#menu {
position: absolute;
top: 204px;
left: 10px;
font-size: 11px;
color: #FFF;
}
#menulist li {
display: inline;
list-style-type: none;
padding-left: 25px;
padding-right: 25px;
}
#content {
float: left;
width: 603px;
height: auto;
margin-left: 5px;
margin-top: 25px;
}
.titel {
width: auto;
height: 26px;
background-image: url(images/layout/balk.jpg);
color: #FFF;
border: 1px solid #000;
border-bottom: none;
padding-top: 8px;
padding-left: 5px;
}
.blok {
width: auto;
height: auto;
background-color: #f3fafe;
border: 1px solid #000;
padding: 5px;
margin-bottom: 6px;
}
#rightmenu {
float: right;
width: 280px;
height: auto;
margin-right: 5px;
margin-top: 25px;
}
#footer {
text-align: center;
color: #FFF;
font-size: 9px;
}
.even {
background-color: #FFF;
}
.odd {
background-color: #f3fafe;
}
.clubfcdb {
font-weight: bold;
}
<html>
<head>
<title>BLUE WHITE LIFE | FC DEN BOSCH FANSITE</title>
<link rel="stylesheet" type="text/css" href="stijl.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<span id="headerlogin"><a href="" title="Inloggen" class="menuknop">INLOGGEN</a> / <a href="" title="Account aanmaken" class="menuknop">ACCOUNT AANMAKEN</a></span>
<div id="menu">
<ul id="menulist">
<li><a href="" class="menuknop">HOME</a></li><img src="images/layout/dots.png" style="position: relative; top: 3px;">
<li><a href="" class="menuknop">NIEUWS</a></li><img src="images/layout/dots.png" style="position: relative; top: 3px;">
<li><a href="" class="menuknop">DE CLUB</a></li><img src="images/layout/dots.png" style="position: relative; top: 3px;">
<li><a href="" class="menuknop">WEDSTRIJDEN</a></li><img src="images/layout/dots.png" style="position: relative; top: 3px;">
<li><a href="" class="menuknop">MULTIMEDIA</a></li><img src="images/layout/dots.png" style="position: relative; top: 3px;">
<li><a href="" class="menuknop">GASTENBOEK</a></li><img src="images/layout/dots.png" style="position: relative; top: 3px;">
<li><a href="" class="menuknop">EXTRA</a></li>
</ul>
</div>
</div>
<div id="content">
<div class='titel'>HOME</div>
<div class="blok">
Hallo
</div>
</div>
<div id="rightmenu">
<!-- Eerstvolgende wedstrijd -->
<div class='titel'>EERSTVOLGENDE WEDSTRIJD</div>
<div class="blok" align="center">
<img src="images/clubs/fcvolendam.jpg" width="80"> <img src="images/clubs/fcdenbosch.png" width="90"> <br />
<b>FC Volendam - FC Den Bosch</b> <br /><br />
Zondag 22 Januari 14:30 | Kras Stadion
</div>
<!-- Tussenstand jupiler league -->
<div class='titel'>TUSSENSTAND JUPILER LEAGUE</div>
<div class="blok">
<table width="270">
<tr>
<td width="20"></td>
<td width="150"><b>Club</b></td>
<td width="30"><b>Wed.</b></td>
<td width="30"><b>Pnt.</b></td>
<td width="40"><b>Saldo</b></td>
</tr>
<tr class="even"><td>1.</td><td>FC Zwolle</td><td>18</td><td>44</td><td>46 - 18</td></tr>
<tr class="odd"><td>2.</td><td>FC Eindhoven</td><td>18</td><td>35</td><td>28 - 15</td></tr>
<tr class="even"><td>3.</td><td>Sparta Rotterdam</td><td>18</td><td>32</td><td>32 - 18</td></tr>
<tr class="odd"><td>4.</td><td>sc Cambuur</td><td>18</td><td>31</td><td>40 - 26</td></tr>
<tr class="even clubfcdb"><td>5.</td><td>FC Den Bosch</td><td>18</td><td>30</td><td>35 - 17</td></tr>
</table>
</div>
</div>
</div>
<div id="footer">
© <?php echo date("Y"); ?> BLUE WHITE LIFE | ALLE RECHTEN VOORBEHOUDEN | DISCLAIMER | CONTACT
</div>
</body>
</html>
CSS
* { padding: 0; margin: 0; }
body {
background-image: url(images/layout/bg.jpg);
font-family: Century Gothic, Arial, Helvetica;
font-size: 11px;
color: #000000;
}
#wrapper {
margin: 0 auto;
width: 900px;
background: #FFF;
border: 1px solid #000;
border-top: none;
}
#header {
position: relative;
top: 5px;
left: 0px;
width: 890px;
height: 230px;
background-image: url(images/layout/header.jpg);
background-repeat: none;
margin-left: 5px;
}
#headerlogin {
position: absolute;
top: 9px;
left: 685px;
font-size: 11px;
color: #FFF;
}
a.menuknop:link {color: #FFF; text-decoration: none; }
a.menuknop:visited {color: #FFF; text-decoration: none; }
a.menuknop:hover {color: #FFF; text-decoration: underline; }
a.menuknop:active {color: #FFF; }
#menu {
position: absolute;
top: 204px;
left: 10px;
font-size: 11px;
color: #FFF;
}
#menulist li {
display: inline;
list-style-type: none;
padding-left: 25px;
padding-right: 25px;
}
#content {
float: left;
width: 603px;
height: auto;
margin-left: 5px;
margin-top: 25px;
}
.titel {
width: auto;
height: 26px;
background-image: url(images/layout/balk.jpg);
color: #FFF;
border: 1px solid #000;
border-bottom: none;
padding-top: 8px;
padding-left: 5px;
}
.blok {
width: auto;
height: auto;
background-color: #f3fafe;
border: 1px solid #000;
padding: 5px;
margin-bottom: 6px;
}
#rightmenu {
float: right;
width: 280px;
height: auto;
margin-right: 5px;
margin-top: 25px;
}
#footer {
text-align: center;
color: #FFF;
font-size: 9px;
}
.even {
background-color: #FFF;
}
.odd {
background-color: #f3fafe;
}
.clubfcdb {
font-weight: bold;
}
Gewijzigd op 19/01/2012 23:58:24 door Maikel B
Verder, mogelijk heeft het ook met de inhoud te maken. Als je pagina geen/weinig content heeft, doet de wrapper mogelijk wel zijn werkt, maar door de weinige inhoud ziet het er misschien niet zo mooi uit.
in je css:
min-height: 500px;
height: auto !important; // voor de normale browsers
height: 500px; // voor IE en z`n maatjes ( groeit automatisch mee )
(Daar ga ik vanuit...)
*** Er was een soort gelijk iets hiervan ***
Dat werkt niet. de hoogte wordt dan wel 500px maar hij verlengt niet met de tekst mee.
http://sceneone.nl/positionering/positie.php
De rest van de tutorial is trouwens ook interessant.
Als dat het niet is, ga ik nog even kijken wat wel zou kunnen helpen.
Code (php)
1
2
3
4
5
6
2
3
4
5
6
#header:after
{
content: '';
display: block;
clear: both;
}
{
content: '';
display: block;
clear: both;
}
Edit:
Als ik een height: 100%; bij * zet dan werkt het, echter wil je niet elk element een height 100% meegeven, ik kan er alleen niet achter komen in welk element het dan verkeerd gaat..
Edit 2:
Probeer dit eens
Code (php)
1
#wrapper { height: 100%; }
Gewijzigd op 20/01/2012 15:17:33 door Jeffrey G
height: auto;
position: overflow;