Manipulering af <hr> elementer via CSS
..Det er forholdvis let at manipulere <hr> elementer via CSS.
Der skal dog lidt manipulering til, da du ellers ikke vil få samme
resultat i IE, Opera og Mozilla/Firefox.
- De 3 browsere understøtter <width> og <height> på <hr> elementet
- Border fungerer i IE og Mozilla, men duer ikke i Opera
- I IE er det nødvendigt med color property hvis du vil manipuleren farven på <hr> elementet
- I Opera og Mozilla er det nødvendigt at bruge background-color hvis du vil manipulere farven på <hr> elementet
- De 3 browsere understøtter background-image på <hr> elementet, men der er visse problemer i IE og Opera
Her et par eksempler.
hr {border: 0;
width: 80%;
}
Skulle vise en vandret streg, der fylder 80% af sidens bredde og ingen border. Det ser næsten ens ud i IE og Opera, men Gecko browsere viser ingenting,
da de bruger border før <hr> elementet vises.
I din browser ser den lodrette streg således ud:
Lidt farver
Hvis du ønsker at vise en fed, blå linie, brug følgende kode:
hr {color: #0000FF;
background-color: #0000FF;
height: 5px
}
Hvilket giver følgende resultat:
Det er nødvendigt at bruge både color og background-color for at få vist stregen i både IE, Opera og Mozilla. Hvis du bruger Opera, vil du se en 1px border udenom stregen, så det er umiddelbart ikke nogen god ide at sætte height under 3px.
De følgende 3 streger ser nogenlunde ud i alle 3 browsere.
En tynd rød linie (vises desværre med sort farve i Opera). Solid line, 1px høj:
Tom grøn rektangel, 10px høj:
2 tynde streger, lige over hinanden (Opera viser rektangler). Begge er røde, den første er punkteret, den anden er solid:
Brug af baggrundsbilleder
Mange bruger små pics til at opdele web siden i sektioner. Det kan lade sig gøre at bruge pics i et <hr> tag, men det er nødvendigt med lidt manipulering.
Nedenstående kode:
hr {
height: 22px;
color: transparent;
background: #fff url(pics/hr.gif) no-repeat scroll center;
}
Giver dette resultat:
Bruger du Mozilla ser det nydeligt ud, idet kun billedet er synligt. MEN resultatet er ikke er hvad vi ønsker i IE og Opera, idet der vises en tynd border udenom billedet.
Sagen kan forholdsvis let løses ved at placere en <div> uden om <hr> tagget:
div class="hr"><hr /></div>Og CSS ser nu således ud:
div.hr {
height: 22px;
background: #fff url(pics/hr.gif) no-repeat scroll center;
}
}
div.hr hr {
display: none;
}
Og resultatet i de 3 browsere, er nu ens, nemmelig således:
Siden er sidst opdateret, den 05-12-2006