Federale header

Overheidscommunicatie dient geloofwaardig te zijn. Een duidelijke en herkenbare signatuur maakt de burger duidelijk dat de informatie afkomstig is van de federale overheid.

Om die reden dienen websites van de federale overheid gebruik te maken van de federale header. Deze header voegt een taalkeuze toe aan de site, een link naar de overkoepelende website www.belgium.be en het .be logo, het kenmerk van de federale overheid.

Grafisch zijn er 2 versies beschikbaar, een versie met padding en een versie zonder padding. Beide versie maken gebruik van identieke HTML. Een CSS class maakt hier het verschil uit.

Versie met padding:

Voorbeeld versie met padding

Deze versie wordt gebruikt op pagina’s waarvan het inhoudelijke gedeelte begrensd is door een lijn of vlak van een andere kleur dan de achtergrond van het inhoudelijke gedeelte.

De taalkeuzeknoppen en het .be logo springen in (“padding”), respectievelijk t.o.v. de linker en rechtermarge, om te vermijden dat zij de begrenzende lijn zouden raken wat visueel storend is.
(Zie verder in het document voor voorbeelden.)

Versie zonder padding:

Voorbeeld versie zonder padding

Deze versie wordt gebruikt op pagina’s waarvan het inhoudelijke gedeelte niet begrensd is door een lijn of vlak van een andere kleur dan de achtergrond van het inhoudelijke gedeelte.

Implementatie

De header moet enkel de elementen bevatten die in dit document vermeld zijn. Er mogen dus geen navigatie-elementen worden toegevoegd of weggelaten.

De HTML code van de Belgium header is als volgt:

<div id="blgm_belgiumHeader">
<div class="blgm_wrapper">
<ul id="blgm_languageSwitch">
<li class="blgm_first blgm_active">
<span lang="nl" class="blgm_lSwitch" title="Nederlands">nl</span>
</li>
<li>
<a href="#" lang="fr" class="blgm_lSwitch" title="Fran&ccedil;ais">fr</a>
</li>
<li>
<a href="#" lang="de" class="blgm_lSwitch" title="Deutsch">de</a>
</li>
<li class="blgm_last">
<a href="#" lang="en" class="blgm_lSwitch" title="English">en</a>
</li>
</ul>
<div id="blgm_beLink">Andere informatie en diensten van de overheid:
<a href="http://www.belgium.be/" class="blgm_loglink" title=”http://www.belgium.be/nl/”>www.belgium.be</a>
</div>
<div id="blgm_beLogo"><img src="http://style.belgium.be/2.0/img/blgm_beLogo.gif"
alt="Logo van de Belgische federale overheid" /></div>
</div>
</div>

Aanduiden actieve / inactieve taalversie

Alle taalcodes worden getoond. Elke code wordt geplaatst in een a- of span tag. De actieve taal wordt in een span geplaatst, de inactieve codes worden in een a-tag geplaatst met de juiste URL als href.

De actieve taalcode:

<span lang="nl" class="blgm_lSwitch" title="Nederlands">nl</span>

De inactieve taalcode:

<a href=”#” lang="fr" class="blgm_lSwitch" title="Fran&ccedil;ais">fr</a>

Met of zonder padding

Zoals reeds aangehaald, bestaat de Belgium header in 2 versies. De HTML structuur van beide versie is identiek. Enkel het bijplaatsen van een classname zal volstaan om een versie zonder padding weer te geven.

Versie met padding (standaard):

<div id="blgm_belgiumHeader">
....
</div>

Versie zonder padding:

<div id="blgm_belgiumHeader" class="blgm_stretch">
....
</div>

CSS code

De Belgium header heeft een eigen stylesheet die op de server van het Belgium portaal is geplaatst. Om de juiste layout te verkrijgen moet op elke pagina, waar de Belgium header is geïmplementeerd, een verwijzing geplaatst worden naar deze stylesheet. De verwijzing wordt in de header van de pagina geplaatst en heeft volgende URL:

<link rel="stylesheet" type="text/css" media="all" 
href="http://style.belgium.be/2.0/style/belgium_header.css" />

Prefix

Om een unieke naamgeving te waarborgen hebben alle classes en id’s van de Belgium header een prefix ‘blgm_’.