CSS - HR (Horizontal rule) opmaken


Een Horizontal rule of kortweg een HR is handig om als scheiding te gebruiken op een pagina, een HR plaats je door de code <hr /> te gebruiken. Als een HR wordt geplaatst heeft deze standaard opmaak of eigenlijk geen opmaak en de lijn is dan 2px hoog. Deze HR is met behulp van CSS eenvoudig te voorzien van opmaak en zodoende kun je er een echte lijn van maken van bijvoorbeeld 1 pixel hoog met een eigen gekozen kleur.

Als je een HR hebt geplaatst op een pagina zet dan in je stylesheet de HR op de onderstaande manier. De opmaak zal dan worden toegepast op alle HR's op de website.

hr {
}


Vervolgens kun je dan opmaak geven aan de lijn, in het onderstaande geval is de lijn 1px hoog geworden en voorzien van een rode kleur, dit is de kleurcode "color:#FF0000;".

hr {
        color:#FF0000;
        height:1px;
}


Dan is de HR in Internet Explorer (tot versie 8) te zien als 1px hoog in het rood, echter in Firefox wordt de lijn getoond met een kleine 'schaduw' en dit is ook het geval vanaf Internet Explorer 9. In totaal dus 2px hoog en nog niet naar wens zoals in de afbeelding hieronder.

Voorbeeld HR Firefox

Om dit op te lossen kun je een border als opmaak meegeven. Eerst hef je alle bestaande borders op waarmee de 'schaduw' zal verdwijnen en daarna geef je vervolgens een border-top van 1px aan met een rode kleur zodat de HR ook in Firefox goed getoond wordt.

hr {
        color:#FF0000;
        border:none;
        border-top:1px solid #FF0000;
        height:1px;
}




De HR is dan goed opgemaakt voor alle browsers, uiteraard kun je hier nog meer opmaak aan meegeven zoals een achtergrondafbeelding en kun je zo ook de breedte bepalen.

hr {
        border:none;
        background-image:url(afbeelding.gif);
        width:300px;
        height:10px;
}