Eerste opzet

Eerste opzet

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
<div class="rounded-box">
    <div class="rounded-header">
        <h2>Headertekst</h2>
    </div>
    <div class="rounded-content">
        <p>Dit is de content</p>
        <p>Dit is de content</p>
        <p>Dit is de content</p>
        <p>Dit is de content</p>
        <p>Dit is de content</p>
    </div>
</div>

We hebben een buitenste div, die de class 'rounded-box' krijgt. Die keuze voor een class is bewust, want zo kunnen we meer dan één rounded box op een pagina maken. Binnenin deze div hebben we 'rounded-header' voor de header met een h2 titel er in (h1 bewaar ik meestal voor paginatitels).

Daaronder hebben we een div met classe 'rounded-content' voor de content.

Bekijk voorbeeld 1

Eén image
Ik ga maar één plaatje gebruiken voor het hele effect. Natuurlijk moet het plaatje groot genoeg zijn om de hoogste hoogte en de breedtste breedte op te vangen. Als bestandsformaat gebruik ik GIF, omdat er grote vlakken van dezelfde kleur in zitten.

Bekijk de GIF voor de achtergrond

« Lees de omschrijving en reacties

Inhoudsopgave

  1. Inleiding
  2. De Rechterkant
  3. Eerste opzet
  4. Linkerkant
  5. Floats in de content
  6. Tot slot

PHP tutorial opties

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.