Hokjes

Een hokje is een vak met een eigen maat, rand en achtergrond. In 2003 stond er op veel profielen een: een vak "Over mij" met een scrollbalk erin. Dit kun je het makkelijkst doen met een <div> en een style.

Een hokje maken

Zet je tekst tussen <div> en </div> en geef het hokje in style zijn uiterlijk:

• width is de breedte en height de hoogte, in pixels (250px) of in procenten van de breedte (80%);
• background-color is de kleur van het vak en border de rand: dikte, stijl en kleur;
• padding is de ruimte tussen de rand en de tekst, margin de ruimte rond het hokje.

<div style="width: 250px; padding: 8px; background-color: #fff0f6; border: 2px solid #e0338a">
<b>Over mij</b><br>
Hoi! Ik ben {naam} en dit is mijn hokje.
</div>

Is het scherm van je bezoeker smaller dan het hokje, bijvoorbeeld op een telefoon, dan krimpt het hokje mee.

Een scrollbalk erin

Geef het hokje een vaste height en zet er overflow: auto bij. Past de tekst niet, dan krijgt het hokje een scrollbalk.

• overflow: auto geeft alleen een scrollbalk als het nodig is;
• overflow: scroll laat hem altijd zien;
• overflow: hidden knipt de rest af, zonder scrollbalk.

<div style="width: 250px; height: 90px; overflow: auto; padding: 8px; border: 2px dashed #1c7ed6">
Dit hokje is 90 pixels hoog.<br>
Er past niet alles in.<br>
Daarom staat er een scrollbalk.<br>
Schuif maar naar beneden.<br>
Hier is het einde!
</div>

De scrollbalk een kleur geven

Met scrollbar-color kies je twee kleuren: eerst die van het schuifje, dan die van de baan eronder. scrollbar-width: thin maakt de balk smaller.

<div style="width: 250px; height: 90px; overflow: auto; padding: 8px; border: 2px solid #7048e8; scrollbar-color: #7048e8 #e5dbff; scrollbar-width: thin">
Een paarse scrollbalk.<br>
Op een lichtpaarse baan.<br>
En wat smaller dan normaal.<br>
Schuif maar naar beneden.<br>
Hier is het einde!
</div>

• Heb je nog code van toen, met scrollbar-face-color, scrollbar-track-color en de andere scrollbar-…-color? Die werkt ook: het filter zet hem om naar scrollbar-color, en de editor meldt dat. De kleur van de pijltjes en de randjes gaat daarbij verloren.
• Niet elke browser kleurt de scrollbalk, en op een telefoon zie je hem vaak alleen tijdens het schuiven.

Hokjes naast elkaar

Zet de hokjes samen in een <div> met display: flex. flex-wrap: wrap zorgt ervoor dat ze op een smal scherm onder elkaar springen, en gap is de ruimte ertussen. Met flex: 1 1 140px wordt elk hokje minstens 140 pixels breed en delen ze de rest van de ruimte eerlijk.

<div style="display: flex; flex-wrap: wrap; gap: 8px">
<div style="flex: 1 1 140px; padding: 8px; background-color: #e7f5ff; border: 1px solid #1c7ed6">Links</div>
<div style="flex: 1 1 140px; padding: 8px; background-color: #ebfbee; border: 1px solid #2b8a3e">Rechts</div>
</div>

Meer over kolommen, en over tabellen zoals toen, lees je bij Tabellen en kolommen.

Mooier maken

border-radius geeft het hokje ronde hoeken en box-shadow een schaduw. Een achtergrond uit de galerij zet je erin met background.

<div style="width: 250px; padding: 12px; border: 2px solid #e0338a; border-radius: 12px; box-shadow: 3px 3px 0 #ffc2df; background: url(/assets/profielhulp/achtergronden/roze-ruitjes.png)">
Ronde hoeken, een schaduw en roze ruitjes.
</div>

Meer randen en kaders staan bij Een rand om je profiel, meer achtergronden bij Achtergrond veranderen.