Odkazy jako tlačítka

Odkaz Jiný odkaz

Tak tohle jsou úplně normální odkazy, jenom trochu upravené globálním stylopisem. Jak vypadá ten stylopis:

a { padding: 0.3em 1em 0.3em 1em; border: outset 0.5em; font-weight: bold; text-decoration: none }
a:link, a:visited { background: #000080; color: #fff }
a:hover { background: #00f; color: #ff0; border: inset 0.5em }

Podpora

Příklad se správně vykreslí v IE 5.5. Ve verzi 5.0 to občas (nevím proč) nefunguje. Ve verzi IE 4 (asi 20% uživatelů v roce 2001, 0,5% v roce 2003) se aplikují pouze barvy (ne okraje ani velikost). V Mozille (která a:hover podporuje) se správně počítá padding, takže se odkazy rozšiřují i přes ostatní text. Je tedy dobré držet se při zemi a zadávat menší vnitřní okraje, nebo nastavit celému odstavci margin, případně výšku řádku (line-height).

Pro IE 5.0 stačí nastavit výšku odkazu a {height:1 em; ....

Padding Margin Line-height

Praxe

Výše uvedená deklarace je dost nešikovná, protože udělá tlačítkové všechny odkazy (jak je asi vidět). Na deklarování tlačítkových odkazů je proto dobré vytvořit si třídu odstavce (třeba "tlacitko") a tlačítkové odkazy umísťovat do tohoto odstavce. Ve stylopisu se pak používá

třída a kontextová deklarace Jen ilustračně:

p.tlacitko a {padding....

Podobný příklad:

odkaz v tabulce

Jak psát web

Obrázek v tlačítku se v Mozille a v Opeře vykreslí mimo tlačítko :-(

Jak psát web

Úprava pro Firefox: < a style="display: block;width: 131px;" href="../index.html">

Jak psát web

Úprava pro Firefox i Operu:

<a style=" display: block;_width:131px; max-width: 131px;" href="../index.html">

Problém je potom s tím, že se za odkazem láme řádek (má nastaveno display: block;). Pokud by se mělo dát víc obrázků vedle sebe, musel by se jim přidat float.

Příklad se vztahuje k textu zdokonalení odkazů.

Příklady na serveru Jak psát web