Heb even wat in elkaar geknutseld. Om het te bekijken moet je even het bijgevoegde .txt downloaden en de extensie naar .html veranderen (om de één of andere reden mag je hier geen html bestanden uploaden). Dat bestand kun je vervolgens in je browser openen.
Bekijk bijlage blokken.txt
Dit is even snel bij elkaar gegooid maar het laat wel zien hoe je die blokken op hun plaats kunt krijgen.
Allereerst krijgt de body (waar alle inhoud in staat) het volgende meer in de CSS*
Code:
body{
width:1000px;
margin:0 auto;
}
Daarmee krijgt hij een breedte van 1000px (dit kun je uiteraard aanpassen) en wordt hij netjes in het midden van het browserraam geplaatst.
De HTML voor elke blok ziet er als volgt uit.
HTML:
<div class="fotoblok">
<h3>Fotoshoot Pakket Basic</h3>
<div class="blokinhoud">
<p>Altijd al een mooie fotoshoot van jezelf willen hebben, maar niet zo'n groot budget? Dan is dit pakket ideaal voor jou!</p>
<img src="http://butterphly.nl/test/006.png">
<p>Een basic fotoshoot met 1 setje kleding, zonder visagie. Je hebt ongeveer 1 uur shooting time. Heb je geen ervaring met poseren? Geeft niks! Ik help je er graag mee!</p>
<p>Je hebt dus een profesionele fotoshot van jezelf, voor een lage prijs!</p>
<a href="http://linkje.nl">Meer info</a>
</div>
</div>
We hebben dus een hoofd div, met de class fotoblok, waarin de kop van het blok staat en vervolgens nog een div, met de class blokinhoud, waarin de paragrafen met tekst, de afbeelding en het plaatje staan.
In de CSS* krijgen de blokken het volgende mee.
Code:
.fotoblok{
width:45%;
float:left;
margin:10px;
}
Dus, ieder blok mag 45% innemen van de breedte van het content gedeelte, heeft aan alle kanten een marge van 10px en krijgt float:left; mee, dat laatste is wat er voor zorgt dat ze niet allemaal onder elkaar gaan staan maar netjes twee aan twee naast elkaar.
Vervolgens zorgt
Code:
.fotoblok h3{
margin-bottom:0;
}
ervoor dat de koppen boven de blokken geen ondermarge hebben waardoor ze mooi aansluiten. Je kunt ze hier uiteraard ook een ander font/kleur/grote meegeven.
Natuurlijk moet de inhoud van het blok ook nog vorm worden gegeven. Dat doen we met:
Code:
.blokinhoud{
background-color:pink;
border:1px solid red;
padding:0 5px;
font-weight:bold;
font-size:0.8em;
}
in plaats van een solide kleur kun je natuurlijk ook een achtergrondafbeelding gebruiken. De padding zorgt er voor dat afbeelding en tekst wat afstand tot de rand van het blok bewaren. Ook hier kun je natuurlijk het font aanpassen.
Tot slot, het plaatje:
Code:
.blokinhoud img{
float:right;
margin-left:3px;
}
Dit zorgt er voor dat de afbeelding (die in de HTML net onder de eerste paragraaf staat) aan de rechterkant van het blok komt te staan, met een kleine marge aan de linkerkant zodat de tekst er niet te dicht op zit.
Het mooie is dus dat je niet voor ieder blok apart CSS hoeft aan te maken, zolang je een nieuw blok de goede classes meegeeft zal het zich exact hetzelfde gedragen als de rest.
*Hier staat de CSS voor het gemak in het html bestand zelf maar in de praktijk hoort dat natuurlijk in een apart bestand.
