hulp bij layout

[Koenie]

Hoi,

in de bijlage zien jullie een tekening van mijn layout.
(kan op dit moment niet bij mijn bestanden omdat ik niet thuis ben)

Hoe krijg ik de vier plaatjes op deze positie in mijn layout via CSS.

Wie kan en wil mij helpen???

Monique

 

[Frats]

Je kunt hierbij gebruik maken van 'floating' elementen.

Je laat het eerste plaatje op de regel naar links floaten; die wordt dan dus links uitgelijnd. Vervolgens laat je het tweede plaatje rechts floaten; die wordt rechts uitgelijnd.

Daarna geef je op dat je een 'tussenblok' wil, waar dus de floating stopt en alle nieuwe elementen onder geplaatst worden, die geef je een fixt hoogte van X pixels.

Dat kun je vervolgens herhalen tot de plaatjes op zijn; de laatste 'clear' geef je dan géen hoogte mee zodat je hem niet ziet en dan zou je precies de layout moeten krijgen die jij wilt

Voorbeeld:

<!-- links uitlijnen -->
	<div style="float: left">
		<img src="pictures/picture.jpg" alt="picture" />
	</div>
<!-- rechts uitlijnen -->
	<div style="float: right">
		<img src="pictures/picture.jpg" alt="picture" />
	</div>
<!-- 100 pixels ruimte, stoppen met uitlijnen -->
	<div style="clear: both; height: 100px"></div>
<!-- links uitlijnen -->
	<div style="float: left">
		<img src="pictures/picture.jpg" alt="picture" />
	</div>
<!-- rechts uitlijnen -->
	<div style="float: right">	
		<img src="pictures/picture.jpg" alt="picture" />
	</div>
<!-- stoppen met uitlijnen; geen ruimte vrijgeven zodat het volgende element direct onder het plaatje komt -->
        <div style="clear: both"></div>

 

[Koenie]

Hoi Frats,

dank voor de oplossing.

Monique