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)
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)
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.
« vorige pagina | volgende pagina »