Archief - CSS: webpagina-indeling in div's

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
P

PieterJ

Legacy Member
Deze thread komt er naar analogie van een vorige thread. Met de vorige thread was mijn probleem deels opgelost, maar kwam er meteen een volgend probleem.
Ik zal eens kort schetsen wat er niet lukt:
Ik wil een webpagina met 3 kaders (gemaakt via div's): één links, één rechts en één gecentreerd.
Deze 3 kaders moeten elk gepositioneerd zijn op 50 pixels van de top en ook altijd minimum een margin van 50 pixels behouden met de bottom.
Afhankelijk van op welke pagina zit kan de linker-, rechter- of midden-'div' het langst zijn.

Dit lijkt misschien simpel, maar ik slaag er maar niet in.

Misschien om eventuele vrijwilligers al wat op pad te helpen hieronder al een deel van script zodat jullie enkel nog het css-gedeelte moeten aanpassen:

*---*

<html>
<head>
<title>test</title>
<style type="text/css">
body {
background:white;
}
#left {
background:black;
}
#middle {
background:yellow;
}
#right {
background:red;
}
</style>
</head>
<body>
<div id="left">
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
</div>
<div id="middle">
test
</div>
<div id="right">
test
</div>
</body>
</head>

*---*

Alvast bedankt voor de moeite!
e

el73

Legacy Member
Volgens je andere thread is de positionering van je divs toch al correct, dus een oplossing voor de margin-bottom: aangezien er altijd een margin van 50 pixels moet zijn met het einde van het document kan je gewoon de waarde van padding-bottom van body op 50 pixels zetten.
P

PieterJ

Legacy Member
Er zijn toch nog enkele dingen die haperen. Bijvoorbeeld de middenthread die ik niet tegelijk kan centreren, en ervoor zorgen dat de margins behouden blijven. Daarenboven, als ik bij de middenthread en bij de rechterthread de absolute-positioning weglaat in de css, worden deze niet naast de eerste div, maar onder de eerste div geplaatst...
e

el73

Legacy Member
Dit zou het dan moeten zijn.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<style type="text/css">
		<!--
			body {
				padding: 50px;				/* ipv 50 pixels margins te zetten op de divs */
				background: #ffffff;
				color: #333333;
			}
			
			div {
				background: #cccccc;
				border: 1px solid #999999;
			}
			
			div#left {
				width: 150px;
				float: left;
			}
			
			div#middle {
				position: absolute;
			  left: -270px;
				margin-left: 50%;
				width: 540px;
			}
			
			div#right {
				width: 200px;
				float: right;
			}
		//-->
	</style>
</head>
<body>

	<div id="left">
		<p>Linkerkolom: 150 pixels breed en floated left.</p>
	</div>

	<div id="middle">	
		<p>Deze kolom zou gecentreerd moeten zijn. 540 pixels breed.</p>
	</div>

	<div id="right">
		<p>Rechterkolom. 200 pixels breed en floated right.</p>
	</div>
	
</body>
</html>
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan