Heel veel websites beschikken tegenwoordig over een sidebar, wat eigenlijk gewoon een kolom naast de gewone content is. Meestal heeft de sidebar dezelfde kleur als de content div, maar wat nu als de sidebar een andere kleur moet krijgen dan de content div terwijl de hoogte verschilt? In deze tutorial beschrijf ik 2 manieren om dit te bereiken!
Natuurlijk kun je de sidebar gewoon een eigen achtergrondkleur geven. Maar wat nu als de content div hoger is dan de sidebar? Dan krijg je een stuk sidebar zonder achtergrond, en dat willen we natuurlijk niet!
In dit artikel lees je:
- Dat de bekende CSS faux colums werken met een wrapper div die een achtergrondafbeelding heeft
- Dat je dit ook puur met CSS kunt doen door de wrapper een achtergrondkleur te geven en de langste div een afwijkende achtergrondkleur te geven
Faux columns
- Er worden 2 divs aangemaakt, bijvoorbeeld #sidebar en #content
- Vervolgens worden deze 2 divs in een wrapper geplaatst, #wrapper
- De #wrapper krijgt een achtergrondafbeelding die even breed is als de #wrapper div
In bovenstaand voorbeeld zou de achtergrondafbeelding voor onze wrapper er als volgt uitzien;
Zoals je ziet heeft het linker gedeelte van de afbeelding een andere kleur als het rechter gedeelte. Het linker gedeelte is namelijk de achtergrond van de sidebar en het rechter gedeelte de achtergrond van de content div.
De HTML code die hierbij hoort is als volgt:
<div id=”wrapper”>
<div id=”sidebar”>
hier de inhoud van de sidebar
</div>
<div id=”content”>
hier de content
</div>
</div> <!– /wrapper –>
En de CSS
#sidebar {width: 200px;}
#content {width: 800px;}
De wrapper krijgt dus dezelfde breedte als de #sidebar en #content bij elkaar. Het roze gedeelte van de achtergrondafbeelding heeft dezelfde breedte als de #sidebar en het rechter gedeelte van de achtergrondafbeelding heeft dezelfde breedte als de #content.
De hoogte van de achtergrond is niet van belang, een hoogte van 1px is voldoende en zorgt voor de kleinste bestandsgrootte. Met de code “background-repeat: repeat-x;” zorgen we ervoor dat de achtergrond steeds horizontaal herhaald wordt.
CSS alternatief voor faux columns
Bij de website in het bovenstaande voorbeeld heb ik echter geen achtergrondafbeelding gebruikt om dit effect te bereiken, ik heb het puur met CSS gedaan.
We beginnen weer met dezelfde HTML en CSS code, maar nu geven we de wrapper gewoon de achtergrondkleur van de sidebar (in dit geval roze, kleurcode #fedbdb):
#sidebar {width: 200px;}
#content {width: 800px;}
Vervolgens geven we de #content de gewenste achtergrondkleur, in dit geval wit (kleurcode #fff).
#sidebar {width: 200px;}
#content {width: 800px; background: #fff;}
Houdt er rekening mee dat de hoogste (of langste) div de afwijkende achtergrondkleur krijgt. In dit voorbeeld is dat dus #content. Is die betreffende div niet altijd langer dan de sidebar? Geef hem dan een min-height mee zodat hij toch altijd minstens even hoog is als de sidebar.
Tot slot krijgt de #content nog een rode border links, dat is de rode scheidingslijn tussen de sidebar met het menu en de content div.
#sidebar {width: 200px;}
#content {width: 798px; background: #fff; border-left: 2px solid red;
Merk op dat de #content 2 px smaller is geworden om ruimte te maken voor de border.
De website die in dit artikel als voorbeeld gebruikt is vind je op www.dj-eindhoven.nl. Daar zul je zien dat het niets uitmaakt hoe hoog (of lang) de #content is, de sidebar met het menu erin lijkt altijd mee te rekken.
Dat is natuurlijk niet echt zo, de sidebar heeft immers geen achtergrond… je ziet de achtergrond van de #wrapper!
