Css DIV positie vraag! ( met voorbeeld)

Door Donster op 11-08-2006 19:01

1.578 views

Ik ben een beetje aan het oefenen met Css Divs , en wil het volgende graag weten.

Zie plaatje : ( kan overigens 18+ banners hebben deze image host site!)

http://www.imagefap.com/image.php?id=307917750

Ik wil dat blauwe vak links naast het groene div vak hebben .. idem voor rechterkant..

Hier de 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></title>
<style type="text/css">
<!--
body {
	width: 770px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
.header {
	background-color: #CCCCCC;
	height: 150px;
	width: 770px;
}
.center {
	width: 570px;
	height: 150px;
	background-color: #99FF66;
}
.right {
	width: 100px;
	float: right;
	background-color: #00CCCC;
	height: 130px;
}
.left {
	width: 100px;
	float: left;
	background-color: #006699;
	height: 150px;
}
-->
</style>
</head>
<body>
<div class = "header">Header</div>
<div class = "center">center</div>
<div class = "right">right</div>
<div class = "left">left</div>
</body>
</html>

Nu kwam ik zelf op zoiets als hieronder , maar dan krijg je het probleem dat 'zodra het content in het middelste stuk groter word 'zowel de rechter als de linker kant naar beneden schuiven .. dus er een wit stuk tussen valt)


<!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></title>
<style type="text/css">
<!--
body {
	width: 770px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
.header {
	background-color: #CCCCCC;
	height: 150px;
	width: 770px;
}
.center {
	width: 570px;
	height: 150px;
	background-color: #99FF66;
	margin-left: 100px;
	margin-right: 100px;
}
.right {
	width: 100px;
	float: right;
	background-color: #00CCCC;
	position: relative;
	top: -150px;
	height: 150px;
}
.left {
	width: 100px;
	float: left;
	background-color: #006699;
	height: 150px;
	position: relative;
	top: -150px;
}
-->
</style>
</head>
<body>
<div class = "header">Header</div>
<div class = "center">center</div>
<div class = "right">right</div>
<div class = "left">left</div>
</body>
</html>

Hoe doe ik zoiets op een correcte manier?

Joren de Wit

11-08-2006 19:28

Je zult left en right een absolute positie moeten geven en center laten floaten. Tevens ook de volgorde van je divs in je html code aanpassen.

Dit is de goede 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></title>
<style type="text/css">
<!--
body {
    width: 770px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}
.header {
    background-color: #CCCCCC;
    height: 150px;
    width: 770px;
}
.center {
	width: 570px;
	height: 150px;
	background-color: #99FF66;
	float: left;
}
.right {
	width: 100px;
	float: left;
	background-color: #00CCCC;
	height: 130px;
}
.left {
    width: 100px;
    float: left;
    background-color: #006699;
    height: 150px;
}
-->
</style>
</head>
<body>
<div class = "header">Header</div>
<div class = "left">left</div>
<div class = "center">center</div>
<div class = "right">right</div>
</body>
</html>

ps. right heeft in bovenstaande code ook geen absolute positie, maar dat is geen probleem zolang je left maar wel een absolute positie geeft...

D Donster

11-08-2006 19:36

Bedankt ik snap het , maar nog een vraagje:

Als je nu veel in het groene vlak zet , dan word het groen vlak langer dan het linker en rechtervlak .

Kun je er eigenlijk ook voor zorgen dat rechts en links helemaal meerekken met het groene 'center' vlak?

Joren de Wit

11-08-2006 19:43

Volgens mij lukt dat niet op de manier zoals je je pagina nu opgebouwd hebt. En volgens mij is het ook niet zomaar mogelijk om de hoogte van verschillende divs aan elkaar te koppelen (correct me if i'm wrong)...

D Donster

11-08-2006 20:08

MMM is echter wel een nadeel ten opzichte van tabellen..
Je kan er dus niet een heel layout omheen bouwen , en alles laten meerekken ..
Iets om rekening mee te houden..

Vandaar dat ik er ook een beetje mee aan het oefen ben , normaal deed ik alles met tabellen namelijk :D

Bedankt voor je hulp nogmaals!!!

Joren de Wit

11-08-2006 20:24

Het kán wel, alleen zul je je website dan anders op moeten bouwen ;)

Het is even wennen als je overstapt van tabellen naar css, je moet namelijk op een andere manier gaan denken...

Kijk eens wat rond op internet naar voorbeelden van css layouts, daar kun je heel veel van leren.

Reageren

Inloggen om te reageren