Bob de webbouwer bouwt en verbetert websites 040 848 80 69 bob@bobdewebbouwer.com

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:

Faux columns

faux colums, maar dan alleen met cssEen bekende oplossing voor dit probleem zijn faux columns, wat “valse kolommen” betekent. Dat werkt als volgt:

  • 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;

faux columns

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

#wrapper {background: url(achtergrond-wrapper.jpg);   background-repeat: repeat-x;   width: 1000px;}
#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):

#wrapper {background: #fedbdb;   width: 1000px;}
#sidebar {width: 200px;}
#content {width: 800px;}

css faux columnsJe krijgt dan het resultaat op de afbeelding hiernaast, waarbij de #sidebar en de #content allebei een roze achtergrond hebben.

Vervolgens geven we de #content de gewenste achtergrondkleur, in dit geval wit (kleurcode #fff).

#wrapper {background: #fedbdb;   width: 1000px;}
#sidebar {width: 200px;}
#content {width: 800px;   background: #fff;}

faux columns cssHet resultaat zie je op de afbeelding hiernaast.

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.

#wrapper {background: #fedbdb; width: 1000px;}
#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!

WordPress verstuurt geen e-mail

Gratis website tips ontvangen?

Wil je op de hoogte gehouden worden van interessante artikelen, kortingsacties van populaire plugins en andere dingen om je website nog beter te maken? Laat dan hieronder je e-mail adres achter!

Gelukt! Controleer je inbox even voor de bevestigingslink.