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

CSS probleem

Door jasper op 22-05-2006 14:21
1.275 views
ik heb een klein probleem met css.
Ik wou voor het eerst de layout van mijn pagina volledig in CSS schrijven doormiddel van boxes. maar heb enkele probleempjes

test pagina:
http://nevens.no-ip.com/nevensnetworks/

css file:
http://nevens.no-ip.com/nevensnetworks/include/style.css

het is de bedoeling dat de blauwe en paarse box evenhoog worden, dus als er de "page" of het blauwe paarse box meer text komt, moete deze beide groter worden.
zodat de rode box mooi gelijk onder de twee bovenliggende boxen komt

code:

<!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="iso-8859-1" />
	<title>Nevens Networks</title>
	<link rel="stylesheet" href="include/style.css" type="text/css" media="all" />
</head>
<body>
	<div class="page">
		<div class="top">
			toptoptoptoptop
		</div>
		<div class="left">
			leftleftleftleftleftleftleftleft
		</div>
		<div class="right">
			rightrightrightrightrightrightrightright<br/>
			hier de content van de pagina<br/><br/><br/><br/>
			lqsdflkjsdddd<br/><br/><br/><br/><br/>
		</div>
		<div class="footer">
			Page created by .. lalalla
		</div>
	</div>	
</body>
</html>
M
Mark D
22-05-2006 14:23
Sluit je linker div niet, pas sluiten als je de rechterdiv ook hebt gesloten.
j
jasper
22-05-2006 14:27
dit geeft nog iets raarder ....
Wout van der Burg
22-05-2006 14:33
even de css voor de duidelijkheid;
<?
body{
margin: 0px;
}

.page{
width: 960px;
border: 1px solid black;
margin-left: auto;
margin-right: auto;
}

.top{
align: middle;
background-color: yellow;
width: 960px;
height: 120px;
}

.left{
background-color: blue;
width: 160px;
float: left;
}

.right{
float: right;
width: 800px;
background-color: purple;
}

.footer{
width: 960px;
text-align: center;
background-color: red;
}
?>
Wout van der Burg
22-05-2006 14:36
ik geloof dat je dat met min-height kan doen zoals dit;\

<?

.left{
background-color: blue;
width: 160px;
min-height; 300px;
float: left;
}
.page{
width: 960px;
min-height; 300px;
border: 1px solid black;
margin-left: auto;
margin-right: auto;
}
?>
j
jasper
22-05-2006 14:39
dit lijkt mij ook niet te lukken! toch bedankt
M
Mark D
22-05-2006 14:42
Dat werkt ook niet in IE dat min-height. Als het goed is doet ie het met de code van Geert wel in FF.
Wout van der Burg
22-05-2006 14:46
voor IE oplossingen zou je dan even moeten googlen
j
jasper
22-05-2006 15:01
ofwel werkt het in IE, ofwel in Firefox, maar in alletwee lukt absoluut niet!
die "tables" die je zogezegt niet mag gebruiken deden dit zonder enkele problemen!, dus vertel mij niet dat dit niet gaat in CSS ... en mijn paarse en blauwe balk zijn nog steeds niet evengroot maarja.
j
jasper
22-05-2006 15:03
toch bedankt voor jullie moeite
M
Mark D
22-05-2006 15:03
Tabellen zijn ook sneller klaar. Alleen css is veel mooier voor de source

Reageren

Inloggen om te reageren