Det er enkelt å lage en horisontal linje med HTML:
<hr size="8px" noshade="noshade"
style="margin: 0 auto; width: 80%; color: yellow;" />
skal for eksempel gi en pen, gul linje som er 8px tykk. Her er en slik linje, 80% bred og sentrert:
Hvordan den ser ut for deg avhenger imidlertid av hvilken browser du bruker! Og det er nettopp det som er problemet: <hr> fungerer ikke i alle browsere. Koden ovenfor gir en flott gul linje som er rundet i endene i Firefox. I de fleste browsere ser den helt ok ut. Men i Google Chrome kommer det opp en stygg, grå linje som er 8px tykk. Uten å gå i detaljer, så skyldes dette at de forskjellige browserne implementerer <hr> på svært forskjellige måter.
Derfor er det greiest å unngå å bruke <hr>. Det er ganske enkelt å lage en pen <div> som fungerer i alle browsere og som ser lik ut i dem alle. Jeg bruker
<div class="line"></div>
Jeg bruker CSS for å “style” linjen og gi den rom (padding) over og under. Fargen på linjen definerer jeg som en egen “klasse” i CSS, slik at jeg enkelt kan bytte farge om jeg vil det (her bruker jeg en forholdvis tykk linje for å illustrere, men det er enkelt å lage tynnere linjer også). Slik ser CSS for linje(ne) ut:
.line { height: 8px; line-height: 8px; font-size: 8px; -moz-border-radius: 8px; border-radius: 8px; padding: 0; margin: 15px auto; width:90%;} .maroon {background:maroon;} .lime {background:lime;}
Jeg bruker “border-radius” for å lage avrundede ender på linjene (dette fungerer i de fleste browsere – jeg har sjekket IE, Firefox,Chrome, Safari og Opera, men IE viser ikke avrundingen og har vanlige rette hjørner). Jeg bruker “margin: 15px auto” for å gi et rom på 15 pixels over og under og for å sentrere linjen.
Nå kan jeg enkelt sette inn pene linjer som fungerer i alle browsere:
<div class="line maroon"></div> , og <div class="line lime"></div>
gir disse linjene:
Jeg har laget en liten demo-side som viser noen flere linjer (også noen litt tynnere). Ved å vise source code for demo-en kan du se koden og kopiere eller modifisere den om du ønsker det.
