De Rechterkant

Rechterkant: achtergrond van div.rounded-header

De header-div krijgt als achtergrond de rechterbovenkant van het plaatje. Dat bereik je met de volgende CSS:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
    div.rounded-header { background: url(rounded.gif) right top no-repeat; }


Bekijk voorbeeld 2

Rechterkant: achtergrond van div.rounded-content

De rounded-corners div krijgt als achtergrond de rechteronderkant van het plaatje. Dat bereik je met de volgende CSS:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
    div.rounded-corners { background: url(rounded.gif) right bottom no-repeat; }


Bekijk voorbeeld 3

Als je het voorbeeld bekijkt, zie je meteen het eerste probleem; de tekst loopt aan de onderkant te ver door. Dit wordt veroorzaakt door de schaduw die ons plaatje aan de onderkant heeft. Die schaduw zit trouwens ook aan de rechterkant, dus daar kan hetzelfde probleem ontstaan. In mijn voorbeeld gaat het toevallig goed, maar daar mogen we niet van uit gaan.

Gelukkig is dit probleem eenvoudig op te lossen: we geven div.rounded-content een padding aan de onderkant. Dat zou kunnen met padding-bottom, maar omdat ik nog andere paddings nodig heb, gebruik ik meteen de shorthand-notatie: padding: boven rechts onder links; Je geeft dus vier waarden op, met de klok mee. Als je 0 opgeeft, hoeft er geen px bij. In dit geval gebruik ik padding: 10px 20px 20px 10px; Aan de rechterkant en de onderkant dus 20px, zodat er ruimte is voor de schaduw. De padding van de header nemen we meteen even mee.

Bekijk voorbeeld 3 verbeterd

Dit voorbeeld is al schaalbaar. Maak de tekst in je browser maar eens groter, dan zul je zien dat de achtergrond keurig meeschuift.

« 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.