Kader met afgeronde hoeken II: Aanpak met <div>-tags
Dit is de titel van het kader
Zoals je ziet staat de tekst van deze paragraaf in een kader met een titel. Het kader heeft afgeronde hoeken. Om dat voor elkaar te krijgen zijn div-tags gebruikt, in combinatie met wat CSS.Op deze bladzijde wordt uit de doeken gedaan hoe je dat aanpakt.
De code van het voorbeeld kun je downloaden om zelf te gebruiken.
- Er worden drie items besproken:
- Het maken van het kader
- Het kader in je document zetten
- De titel in de bovenbalk maken
Het maken van het kader
Je begint met het tekenen van het kader in een tekenprogramma. Zorg er voor dat de afrondingen op de goede
schaal zijn. De lengte en de breedte van het kader maak je groter dan de maximale afmetingen die je op je
website wilt toestaan.
- Voor deze site is het kader maximaal 780 pixels breed en 280 pixels hoog. Er is uitgegaan van een figuur van
820 x 320 pixels, met daarin een kader van 800 x 300 pixels. De achtergrond buiten en binnen het kader heeft
dezelfde kleur als de bladzijde. Zie de figuur.
Voor de duidelijkheid is er een rode rand omheen getekend.
- Verdeel de figuur in vier stukken zoals aangegeven in de figuur.
- De eerste figuur bevat de linker bovenhoek, de linker zijkant en de brede bovenbalk waar de titel in komt: kader_11.jpg.
- De tweede figuur bevat de rechter bovenhoek en de rechter zijkant: kader_22.jpg.
- De derde figuur bevat de linker onderhoek en de onderkant: kader_33.jpg.
- De vierde figuur bevat alleen de rechter onderhoek: kader_44.jpg.
- Opmerkingen:
- Bij het voorbeeld op deze bladzijde zijn de plaatjes in het .JPG-formaat.
Je kunt echter alle grafische formaten gebruiken die door browsers worden herkend: .GIF, .JPG, .PNG, enzovoort.
- Bij gebruik van transparante achtergronden gaat het effect verloren.
- Houd de kleur buiten het kader gelijk aan die van de achtergrond.
De kleur binnen het kader kun je natuurlijk wel anders maken. Dat is een kwestie van smaak.
Het kader in je document zetten
De vier figuren worden als achtergrond gebruikt in vier verschillende <div>-tags. De tekst-inhoud
van het kader komt in een vijfde <div>-tag. Deze tags liggen op elkaar gestapeld, doordat ze worden
genest.
- Voor het hele kader wordt een CSS-class gemaakt met de naam kader.
- De structuur zit er als volgt uit:
<div class="kader"> Achtergrond: kader_aa.jpg, dus linksboven. <div> Achtergrond: kader_bb.jpg, dus rechtsboven. <div> Achtergrond: kader_cc.jpg, dus linksonder. <div> Achtergrond: kader_dd.jpg, dus rechtsonder. <div> Geen achtergrond figuur Hier staat de inhoud van het kader, inclusief de titel. </div> </div> </div> </div> </div> - Je zet deze structuur in de <BODY> van je document, op de plaats waar het kader moet komen.
- De benodigde CSS-code staat tussen <style> ... <style>-tags in de <HEAD>:
div.kader { background:transparent url(kader_11.jpg)
no-repeat top left; margin:auto; max-width:800px; }
div.kader div { background:transparent url(kader_22.jpg)
no-repeat top right }
div.kader div div { background:transparent url(kader_33.jpg)
no-repeat bottom left}
div.kader div div div { background:transparent url(kader_44.jpg)
no-repeat bottom right }
div.kader div div div div { background:none; } - De eerste vier <div>-tags definiëren allemaal een achtergrond. De achtergrondkleur is transparant. Daarmee zorg je dat ale vier de figuren zichtbaar blijven. De figuren mogen niet herhaald worden, (no-repeat). De plaats wordt vastgelegd met de keywords left / right / top / bottom. Dat spreekt voor zich.
- De vijfde <div>-tag heeft geen achtergrond, die is dus transparant.
- De eerste <div>-tag heeft ook nog margin:auto; max-width:800px;. Die regelen de afmetingen
en de positionering van het kader. Dat wordt hieronder nog uitgewerkt.
- De maximaal mogelijke afmetingen van het kader (inclusief de ruimte er omheen) worden bepaald door de breedte en de hoogte van de figuren die het kader maken. Hier is dat 820 resp. 320 pixels.
- De werkelijke afmetingen van het kader worden bepaald door de inhoud en de beschikbare breedte op het scherm. Om te voorkomen dat er 'gaten' in de randen van het kader komen, moet in elk geval de breedte worden beperkt. Dat is hier gedaan door max-width:800px op te geven in div.kader.
- Als de beschikbare breedte op het scherm groter is dat 800 pixels, wordt het kader gecentreerd op het scherm.
Dat bereik je met margin:auto.
Als je deze pagina opent buiten de frameset van deze website kun je zien hoe dat er uit ziet. Klik HIER. - Als je wilt dat in zo'n geval het kader aan de linkerkant van het scherm blijft gebruik je: margin-right:auto
of float:left.
Als je wilt dat het kader aan de rechterkant van het scherm blijft gebruik je: margin-left:auto of float:right.
De titel in de bovenbalk maken
De tekst in het kader is "gewone" tekst. De opmaak wordt overgenomen van de rest van de pagina.
De opmaak van de titel is veranderd:
- De titel-tekst staat bij de gewone tekst in het binnenste <div>-blok, maar tussen <p> ... </p>-tags.
- De opmaak van de paragraph-tekst op die speciale plaats wordt apart geregeld met CSS:
div.kader div div div div { background:none; padding:0 40px 40px 40px; margin:0 }
div.kader div div div div p {
color:#ffffff; font-weight:bold; font-size:120%; text-align:center;
padding-top:20px } - Merk op dat de binnenmarge (padding) van het binnenste <div>-blok en de <p>-tekst zijn aangepast om de tekst op de goede plaats te krijgen.
Downloaden:
Druk op de knop:
File: voorb284.zip, 8463 bytes.
Opmerking:
Kaders met ronde hoeken kunnen ook worden gemaakt met een <table>. Zie het item Kader met afgeronde hoeken I: Aanpak met een table.
Een kader kun je ook maken met alléén CSS-attributen, hoewel dat nog niet door alle browsers correct wordt
ondersteund. Zie het item Kader met afgeronde hoeken III: Aanpak met CSS.
