!fontos; linkek

2006 november 19. | Szerző: Holli |

Egy linkről akkor ordít a linkség, ha kék színű, és alá van húzva. Csak ilyenkor nem elég szép, az a baj.

Lehet a linkekkel sok mindent csinálni, eltüntetni az aláhúzást, kiszínezni, képekkel helyettesíteni, villogtatni, mittudomén. Azért arra jó vigyázni, hogy az arra járók sejtsék, hogy amit látnak, az nem sima szöveg, hanem egy link.

Az enyém egy aranyos kis honlapocska, különben is oda van írva, hogy “Linkek”, úgyhogy nem gond, ha ezeket is pirosra színezem, megvastagítom, és eltüntetem az aláhúzást:

a {
 text-decoration:   none;
 font-weight:     bold;
 color:   #CC0033;
 }

Másmilyen kinézetet szeretnék azoknak a linkeknek, amire mostanában rákattintott a látogató, ezért a látogatott linkek szürkék lesznek:

a:visited {
 text-decoration:   none;
 color:   #888888;
 }

Amelyik link felett éppen ott áll az egér, az legyen aláhúzva:

a:hover {
 text-decoration:   underline;
 color:   #CC0033;
 weight:     bold;
}

Most még magát a link-blokkot kell megformáznom. Nem szeretném az elejükre a mostani kis pöttyöket, és a cím alá akarom őket igazítani, mert most jobbra be van húzva az összes linkem. Nullára állítom a margót:

ul {
 margin:   0; 
 list-style-type: none;
 }

Így most akkor minden oké, a pöttyök eltűntek, a piros, félkövér betűs linkek balra igazodnak, egérrel föléjük állva aláhúzódnak, látogatva beszürkülnek. Explorerrel.
Az Opera és a Firefox behúzva hagyta a listát. Egy érdekes trükk jön, amire magamtól soha az életben rá nem jöttem volna, viszont már találkoztam vele: nem ugyanazt az utasítást kapja az Explorer, mint a többi böngésző. Két margós sorom lesz:

ul {
 margin: 0 0 0 -35px !important; 
 margin:   0; /*IE*/
 list-style-type: none;
 }

Az “!important” jelzés semmit nem mond az IE6-nak, ezért tovább ugrik a következő sorra. A többi böngésző is tovább ugrana, és az utolsó variációt fogadná el, csakhogy nekik szóltam, hogy az újabb utasítással ne foglalkozzanak, mert az első a fontos. Így most nálam mindhárom böngészővel egyforma a kinézet, itt lehet megnézni.

A tutorial-on találtam egy jó kis példát, ki lehet próbálni, itt a háttér színe változik meg, ha egérrel rámegyünk a linkre. (Picike megnyugvás nekem, hogy ez se mutat szépen Firefoxszal és Operával…)