Hou er rekening mee dat webpagina's met CSS-stijlen niet door alle browsers op dezelfde manier worden weergegeven. Voor de goede orde: ik werk met Internet Explorer 6.
CSS box (in-line style)
In wordt het zogenaamde box-model gehanteerd. Hieronder laat ik een aantal voorbeelden zien van een box en hoe die gedefinieerd kan worden. Als je meer wilt weten over 'de box', ga dan naar Box Kenmerken, onderdeel van de cursus Cascading Style Sheets van Edwin Martin's Brainwaves.
De codes hieronder kun je selecteren (Ctrl-A), kopiëren (Ctrl-C) en plakken (Ctrl-V) in je webpagina.
* * *
1. De code voor een eenvoudige gecentreerde box zonder rand - tekst in het midden:
Zo ziet het eruit:
2. De code voor een eenvoudige gecentreerde box met zwarte rand - tekst links :
Zo ziet het eruit:
3. De code voor - nog - een eenvoudige gecentreerde box:
Zo ziet het eruit:
Dit is een gecentreerde box. De achtergrondkleur is de hexadecimale kleur BCD0BB. De box is gedefinieerd op een breedte van 300 pixels. Er is een padding van 5 pixels toegevoegd zodat de tekst niet tegen de rand aanloopt. De kleur van de rand is zwart.
4. De code voor een (niet gecentreerde) box met rand aan linker- en bovenkant:
Zo ziet het eruit:
De achtergrondkleur is de hexadecimale kleur #ffd9b3. De box is gedefinieerd op de breedte van 500 pixels. Er is een padding van 10 pixels toegevoegd zodat de tekst niet tegen de rand aanloopt. De kleur van de bovenrand en de linkerrand is grijs.
5. De code voor een (niet gecentreerde) box met rand aan boven- en onderkant:
Zo ziet het eruit:
De achtergrondkleur is de hexadecimale kleur #ffd9b3. De box is gedefinieerd op de breedte van 500 pixels. Er is een padding van 10 pixels toegevoegd zodat de tekst niet tegen de rand aanloopt. De kleur van de bovenrand en de linkerrand is zwart.
6. De code voor een gecentreerde box met dubbele rand:
Zo ziet het eruit:
7. De code voor een box met puntjes-rand (niet gecentreerd):
Zo ziet het eruit:
In de Internet Explorer ziet '3 px dotted' er kleiner uit dan '3 px dotted' in Mozilla Firefox !
8. De code voor een box met onderbroken rand:
Zo ziet het eruit:
DE TEKST KOMT HIER
9. De code voor 2 boxen naast elkaar met puntjes-rand:
Zo ziet het eruit:
DE TEKST KOMT HIER
DE TEKST KOMT HIER
In de Internet Explorer krijg je met '2 px dotted' een puntjes-rand. Als je er '1 px dotted' van maakt, wordt het in de IE een onderbroken streepjes-rand. Mozilla Firefox geeft '1 px dotted' als hele fijne puntjes weer.
10. De code voor een gecentreerde box (incl. afbeelding):
Zo ziet het eruit:
Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
11. De code voor een gecentreerde box met onderbroken rand (incl. afbeelding)
Zo ziet het eruit:
HERFST
12. De code voor een gecentreerde box met puntjes-rand (incl. afbeelding):
Zo ziet het eruit:
HERFST
13. De code voor een gecentreerde box met achtergrond-afbeelding:
Zo ziet het eruit:
Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Zie ook mijn tutorial Borders/Randen maken met een CSS-code.
Start |
Tutorials |
Korte Lesjes |
CSS |
Fonts |
Filters |
Links |
Allerlei |
Zoeken |
PSP-varia |
P-Filiaal