logo
  Box styles
  Boxen zijn eigenlijk kleine eilandjes die je buiten de site om apart kan inrichten (net zoals de tables). Ik laat je hier een aantal voorbeelden zien wat je allemaal kan.


De style die je in je css zet is nogal simpel:

 
HTML
<div>Dit is nou zo'n box</div>
CSS
div {
width: 300px;
height: 100px;
border-width: 1px;
border-color: #000000;
border-style: solid; }
  Kleuren en image
Standaard is een box doorzichtig, maar je kan er een kleur aan geven, deze is dan gedaan met een regel:
 
HTML
<p>De kleur is, <span class="voorbeeld1">oranje</span> en hier weer <span class="voorbeeld2">groen</span>.</p>
CSS
.voorbeeld1 {
background-color: #ffd78c;
color: #c04000;
}
.voorbeeld2 {
background-color: #bde9ba;
color: #008000;}
  Je kan er ook images in doen als achtergrond zoals het voorbeeld hieronder:

Ook kan je net zoals de achtergrond van je html positioneren:


#voorbeeld { background-repeat: repeat-x; }


#voorbeeld { background-repeat: repeat-y; }


#voorbeeld { background-repeat: no-repeat; }

Scrollen.

Is de tekst te groot, dan kan je hem laten scrollen.


Je ziet dat er een verschil is tussen overflow: scroll en overflow: auto.
Maar je kan beter het volgende invullen als je zeker wilt zijn dat je alleen de verticale of horizontale scroll wilt. overflow-x: scroll; of
overflow-y: scroll;

 
eind