Hulp met Layout

Door Carl Pirson op 14-01-2009 19:25

731 views

Een goeie avond,

ik ben bezig met een Project voor school waar ik een soort Startpagina moet maken. Dat wil zeggen dat ik net als bij de bekende Startpagina containers voor elke categorie onder elkaar moet plaatse en de links, headers, etc. uit de Database moet halen.

Het Database - Script is geen probleem, maar ik weet niet echt hoe ik het beste die containers kan plaatsen.

Wat ik tot nu toe heb geprobeerd, is "display: inline" en de "float: left" methode in me CSS. Op die manier worden alle containers van Links naar Rechts geplaatst, tot de max. breedte van 900px is bereikt. Dan verschijnt de volgende container onder de reeds geplaatste rij.

Maar eigenlijk wil ik de containers van bove naar benede late verschijne, en als dan een max. height is bereikt, de volgende rij van bove naar benede wordt geplaatst.

Weet iemand een goeie oplossing met CSS die mijn probleem oplost?

Alvast bedankt!

Greetz, Mike

P.S.:

Hier de code van de containers in DIV:


// Simpele rip van het origineel
<div id="content">
// Simpele Categorie Container Versie
<div class="box">
<div class="boxHD"><?php echo $header; ?></div>

<div class="stndrd">
	&bull; <a href="<?php echo $linkurl; ?>"><?php echo $linktxt; ?></a><br>
</div>
</div>
</div>

Niek Weevers

14-01-2009 20:10

Startpgina heeft 3 kolommen die naast elkaar floaten. In deze kolommen zitten de blokken. Dit is de beste oplossing.
Met alleen css is het niet mogelijk om blokken onder elkaar te zetten en bij een max hoogte het volgende blok in de volgende kolom te zetten.

Carl Pirson

14-01-2009 20:59

Ok, ty voor je antwoord.

Is het mogelijk dat je ff een voorbeeld post... Om ff een voorstelling van het idee te krijge, zodat ik het zelf kan scripte.

Thnx

Niek Weevers

14-01-2009 21:17

Bijvoorbeeld
html


<div id="container">
<div id="kolom1"></div>
<div id="kolom2"></div>
<div id="kolom3"></div>
</div>

css


#container {
width: 600px;
}
#kolom1,
#kolom2,
#kolom3 {
float: left;
width: 200px;
}

En dan in de kolommen de blokken maken. Heel simpel. Je kunt ook in de bron van startpagina kijken hoe zij het gedaan hebben

Reageren

Inloggen om te reageren