Erotinviiva CSS:lla
09.01.2005 klo 16.43 • Aihe: Web
Yksi typografiassa käytetty elementti on erotin- tai koristeviiva, jota voidaan käyttää erottamaan eri asioita tai pelkästään koristeena. HTML:ssa erotinviivaa vastaa hr-elementti. Miten onnistuisi hr:n tyylittely CSS:n avulla, niin että lopputulos olisi tällainen:
Ei onnistu, jos haluaa tuloksen toimivan myös IE:ssä. IE:llä on nimittäin muista selaimista (Gecko-pohjaiset, Opera) poikkeava tapa lisätä hr-elementin ympärille yhden pikselin levyinen harmaa reunaviiva (eri asia kuin border). Tämän reunaviivan voi poistaa näkyvistä määrittämällä hr:lle color, mutta tällöin taustakuva ei näy.
Järkevin tapa reunaviivattoman hr:n aikaansaamiseksi lieneekin laittaa se div-elementin sisälle, piilottaa hr ja liittää tyylit div:iin.
Muitakin eroja IE:n ja muiden selaimien välillä on. hr:n värin määrää IE:ssä color-ominaisuus, muissa background-color. IE:ssä tasaus täytyy tehdä text-align:illa (kuin inline-elementille), muissa margin:illa.
Aiemmin kirjoitettua samasta aiheesta:
- Blake M. Scarbrough: CSS Horizontal Rules
- Marek Prokop: Styling <hr>
(Nykyään Opera muotoilee hr:n oikein) - Craig Saila: A Web building tip... How do I style an hr?
PS. Tällä sivulla käytetty erotinviiva on mukailtu 1800-luvun alussa käytetystä viivasta. Tämä ja monia muita vanhoja typografisia elementtejä löytyy kirjasta Suomen typografinen atlas 1642–1827. Mainio inspiraation lähde!
Kommentit
Tätä viestiä ei voi enää kommentoida.