hoogte wrapper

Door Maikel B op 19-01-2012 23:49 gewijzigd op 19-01-2012 23:58

3.486 views

Ik ben bezig met mijn layout.
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.


<!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"> &nbsp; &nbsp; &nbsp; <img src="images/clubs/fcdenbosch.png" width="90"> <br />
					<b>FC Volendam &nbsp; &nbsp; - &nbsp; &nbsp; 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">
			&copy; <?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;
}