[css]pagina-opbouw

Door Simon Blok op 02-10-2006 16:10

393 views

Ik zit wat te experimenteren met CSS, werd toch eindelijk wel eens tijd ;-). Ik zit met het volgende probleempje: Ik wil een simpele pagina met bovenin een header van 30% daarna een 'middenstuk' van 50% en daar weer onder een footer van 30%, maar krijg het niet voor elkaar. Hoe moet ik dit aanpakken? Ik heb het al geprobeerd met height:20%;, maar kan dit niet??

K i p

02-10-2006 16:14

30% + 30% + 50% = 110

En wat heb je al geprobeerd?

Harmen

02-10-2006 16:15

een vaste hoogte voor de header en footer.
en verder moet je dan een div eromheen maken en daar moet je dit op doen:
min-height: 100%;

zie de CSS tutorial van Jan Koehoorn

Simon Blok

02-10-2006 16:17

Boris schreef op 02.10.2006 16:14
30% + 30% + 50% = 110
klopt! maar 30 + 20 + 50 = 100

dit heb ik geprobeerd:


#top
{
	text-align:center;
	height:30%;
}
#midden
{
	height:50%;
	width:70%;
	border:5px solid;
}
#footer
{
	height:20%;
	text-align:center;
}

K i p

02-10-2006 16:34

http://www.xxx.nl/overig/sjoeppie.php
en
http://www.xxx.nl/overig/sjoeppie.php?code

kijk eens

Bo az

02-10-2006 18:21

@Boris:

#alles {
//DIT MOET EEN VASTE BREEDTE ZIJN EN DAN WERKT HET
height: 500px;
}

??

Dit werkt hier gewoon:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<title>Ed</title>
		
<style type="text/css">

*{
	margin: 0px;
	padding: 0px;
	height: 100%;
}

#header{
	height: 30%;
	background-color: #f00;
}

#content{
	height: 40%;
	background-color: #0f0;
}

#footer{
	height: 30%;
	background-color: #00f;
}

</style>
		
	</head>

	<body>
	
	<div id="header">
		Header
	</div>
	
	<div id="content">
		Content
	</div>
	
	<div id="footer">
		Footer
	</div>
	
	</body>

</html>

Reageren

Inloggen om te reageren