PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
/

CSS -> height

Door /home/joost op 15-01-2009 21:19
511 views
Ik probeer een 100% height te creeëren en tot nu toe lukt het redelijk, ik krijg de onderkant dicht en ik krijg de bovenkant dicht, het enigste is is dat de midden-div niet hoog genoeg wilt zijn/worden, mijn css:


html, body {
	margin: 0px auto;
	height: 100%;
}
div.container {
	background-color: #33425C;
	width: 787px;
	margin: 0px auto;
	min-height: 50%;
}
div.header {
	background-image: url(../images/header.jpg);
	background-repeat: no-repeat;
	height: 200px;
	width: 787px;
	margin-top: -1px;
}
div.header_tekst {
	text-align: right;
	padding-top: 155px;
	padding-right: 4px;
}
div.midden {
	background-color: #33425C;
	height: 100%;
}
div.footer {
	position: absolute;
	text-align: center;
	bottom: 0px;
	background-color: #33425C;
	width: 787px;
}


En mijn html:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link type="text/css" href="css/style.css" />
</head>

<body>
<center>
	<div class="container">
		<div class='header'><div class="header_tekst">Disclaimer - Sitemap</div></div>
		<div class="midden">Test</div>
		<div class="footer">Footer</div>
	</div>
</center>
</body>
</html>


Ik zal even een voorbeeld online gooien, 1 moment a.u.b...

Mvg Joost.

Edit:
kliki

/
/home/joost
15-01-2009 21:38
Ok, gelukt.

Weet jij of met de volgende code het design in het midden word uitgelijnd in alle browsers ??:

html, body {
	margin: 0px auto;
	height: 100%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
}
div.container {
	background-color: #33425C;
	width: 787px;
	margin: 0px auto;
	position: relative;
	min-height: 100%;
	height: auto;
	height: 100%
}


mvg Joost.
N
Niek Weevers
15-01-2009 21:44
Ik denk het niet (gokje: ie6 niet), maar waarom probeer je het zelf niet? Gebruik bijv Browsershots ps lukt ie6 niet, voeg dan text-align: center; aan je body toe en text-align: left; aan je container
/
/home/joost
15-01-2009 21:47
Wat zou jij dan gebruiken als jij center uitlijning zou willen hebben (ondertussen laad ik 'm even uploaden en browsershots.org z'n werk doen...).

mvg Joost.
N
Niek Weevers
15-01-2009 21:49
zie mijn reactie hierboven en verder hoe jij het hebt. Dat moet werken. margin: 0 auto; aan je body is niet nodig. Maak daarvan: margin: 0;
/
/home/joost
15-01-2009 22:05
Ok, wanneer de tekst meer is dan er in de pagina past komt er een scroll balk, logisch, maar nu blijft de onderkant (footer) ergens in het midden zweven (op de hoogte van de onderkant van mijn scherm als ik boven aan sta...(volg je 'm nog (dit komt door bottom: 0;))) heb je hiervoor een oplossing ??

klik

mvg Joost.
N
Niek Weevers
15-01-2009 22:15
Voeg eens toe aan div.container
height: auto !important;

dus dit in plaats van height: auto;
dus de important! toevoegen (voor de puntkomma)

Reageren

Inloggen om te reageren