Vizuální změna odkazů
změna odkazu
Internetových stránek je dneska spousta a tak nikdy není na škodu trochu se odlišit. Jednou z možných variant, kterou zde popíši je vizuální změna podtržení odkazu.
Jak toho dosáhnout!
Pomocí CSS zruším odkazu vlastnost text-decoration tím, že mu dám parametr none. Odkazu pak vytvořím podtržení pomocí vlastnosti border-bottom. Hlavní rozdíl spočívá v tom, že podtržení je níže od textu oproti klasické variantě. Dále je podtržení pomocí border-bottom širší než klasická varianta.
do CSS souboru přidáme toto:
a {
text-decoration: none;
border-bottom: 2px solid #990000;
padding-left: 2px;
padding-right: 2px;
background-color: transparent;
}
a:hover {
text-decoration: none;
background-color: #DCDCDC;
color: Black;
}
Pak je pak možno dle fantazie kouzlit a vytvářet různé barevné varianty s rozdílnou barvou textu, pozadí a podtržení.
Upozornění!
Nebylo by to ale vylepšení, aby nám nepřineslo i nějaké problémy. Bohužel MSIE verze 5.0 vlastnost border nevezme a tak bychom měli nepodtrhané odkazy! To je velký prohřešek oproti přístupnosti internetových stránek. Nám tedy nezbývá nic jiného, než toto vylepšení udělat tak, aby nemělo vliv na MSIE verze 5.0.
Řešení problému v MSIE 5.0!
K vyřešení problému použijeme podmíněné komentáře. Díky nim připojíme styl jen pro MSIE, kde si pak budeme muset bohužel pomoci hackem, abychom odlišily verzi 5.0 od vyšších verzí. Já jsem použil tento hack "/**/".
takto vypadá podmíněný komentář:
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="vizualni-odkazy-ie.css" media="all" />
<![endif]-->
a zde je ukázka CSS pro IE:
a {
text-decoration: underline; // klasické podtržení pro MSIE 5
text-decoration/**/:none; // zrušení podtržení pro MSIE 6
}
a:hover {
background-color: #990000;
background-color/**/: #DCDCDC;
color: white;
color/**/: black;
}
Článek je převzat z webu: JSDesign.cz
Související:
Jan Bien : Barva podtržení odkazu
zpět na články | 14.07.2006 | Jiří Šebek, DiS.
Novinky
Globus Car Praha
Zhotovili jsme www stránky firmy Globus Car Praha. Tato firma…Jukeboxy LABYRINT
Do provozu jsme uvedli nové stránky firmy Labyrint Média. Tato…Pneuservis Šebek
Spustili jsme www prezentaci firmy Pneuservis Šebek.…Nově bydlet
Vytvořili jsme nový portál pro prezentaci novostaveb znamých…