Podtrhněte odkaz libovolnou barvou
Dosud jsem žil tak nějak v domnění, že nelze podtrhnout odkaz jinou barvou než je barva textu. Po přečtení článku Barva podtržení odkazu Honzy Biena si to už nemyslím. Opravdu je možné mít různou barvu textu a podtržení, viz ukázka. Použit je následující jednoduchý XHTML/CSS kód:
- CSS:
a {color:red}
a span {color:blue}- XHTML:
<a href="#"><span>modrý odkaz s červeným podtržením</span></a>
Seriál: Používáme CSS
- Přístupné záložky v CSS a JavaScriptu [25. února 2006 14:57]
- JavaScript a CSS: Drag and Drop [29. července 2005 22:05]
- Podtrhněte odkaz libovolnou barvou [22. prosince 2004 16:56]
- Ilustrační obrázek v textu [21. prosince 2004 20:04]
- Výtahy z textu na webu [6. října 2004 14:48]
- Relativní jednotky v CSS [9. srpna 2004 9:53]
- Klikatelné obrázky vložené přes CSS [21. července 2004 8:32]
- Klikací CSS logo [20. června 2004 16:30]
- 3D CSS Box Model [21. května 2004 6:37]
- CSS position:fixed i v IE [10. května 2004 18:42]
- CSS pro tabulky [11. prosince 2003 6:58]
- Okraje v CSS [24. listopadu 2003 7:04]
- Svislé centrování v CSS [19. listopadu 2003 15:57]
- Dvakrát o polohování prvků v CSS [9. listopadu 2003 9:20]
Komentáře
A co rámečky (border-bottom)? Ty na tento trik používám já :-)
S borderem si to podtržení můžu ještě všelijak vylepšit, a obejdu se bez nadbytečných spanů.
Ad Jiří Macich ml. a Freya: A jak řešíte tu nehezkou vertikální mezeru mezi textem a čárou?
afaik se dá vzdálenost ohraničení vyřešit paddigem, takže bych taky spíše hlasoval pro border-bottom. Nejde jen o barvu, můžete jej klidně udělat i tečkovaný, čárkovaný, vpadlý, vystouplý atd.
A varianta brod - nemusíte to udělat ani ohraničením, ani spanem, ale můžete tam dát průhledný background s linkou libovolného tvaru, třeba vlnovky.
Jelikož jsem to opravdu nikdy neřešil, tak mě border-bottom nenapadl. Jak nad tím teď ale přemýšlím, tak je border-bottom lepší z důvodu neznečisťování XHTML kódu zbytečným spanem.
Přesto jde o zajímavé řešení s tím spanem ;-)
Já také používám (teď zrovna ne) variantu s border pro odkazy.
Ale to s tím span je celkem použitelné, když chci udělat odrážku u seznamu jinou barvou než u textu.
Doufám, že to funguje ;)
Su to zaujimave veci ale klasicky odkaz je klasicky odkaz :) Tiez ma raz nieco podobne napadlo (http://www.fem.uniag.sk/havran/blog/archive/1095162843-css-ako-zvyraznit-text-zvyraznovacom.php) ale nakoniec som zistil ze to nie je nic nove a ani ziadne vyuzitie pre to nemam :).
taky si myslim, že je lepší používat border-bottom místo span. když má uživatel vypnutý styly, tak je ta stránka zbytečně nafouklá. navíc práce s úpravou (pokud to děláte ručně) je imho neadekvátní výsledku. (jinými slovy: "proč se párat s takovou blbinkou?") ale i border-bottom má jednu malou vadu: pokud máte odkaz mez podtržení a jako hover mu dáte border-bottom, tak to nefunguje v msie5/win (odzkoušeno).
a ještě taková perlička: zkuste odkaz nepodtrhnout a jako hover mu dát text-decoration:underline a border-bottom (já to zkoušel na 2px solid). podívejte se, co s tím provede firefox, opera, msie5/5.5/6. (a jak je to správně?)
já musím říci že používám taky border-bottom. Přijde mi to hezčí když je tam ta větší mezera a navíc je to podtržení širší než text. Akorát mi tam myslím nastával problém s MSIE 5.0 které to vykreslilo nepodtrhané. Tam jsem to řešil tím že pro něj tam bylo klasické podtržení místo toho border-bottom.
Petře, jaký je vlastně smysl toho, že napíšeš "Jan Bien napsal toto"? Nějak mi to nedochází, spíš mi to připadá jako trapný spamming weblogy.cz, na němž je Jan taky...
[12] Pro mě to má řadu významů:
- zaujalo mě to
- podpořím autora linkem
- je šance, že to budu v budoucnu někdy potřebovat, takže nejjednodušší je to blognout, pak to najdu během pár sekund
teraz ma napadlo, ze border-bottom s nastavenym margin padding treba zrejme otestovat napriklad po zvacseni pisma stranky, zrejme ten odstup nebude za kazdych okolnosti rovnaky.
[14] pokud se odstup definuje v relativních jednotkách (např 0.1em), bude se zvětšovat společně s písmem.
S podtrháváním pomocí border-bottom jsem jednou experimentoval (vadilo mi příliš tlusté podtržení u mozilly a chtěl jsem tenké), ale není to ono. Prostě border-bottom není podtržení...
Jinou barvou jsem nikdy nepodtrhoval, ale co se týče řešení - znám jen používám na něco zcela jiného:-0
Další příspěvky
- Aktuální příspěvky
- Novější příspěvky
- Muzikant.cz rozeslal databázi svých uživatelů! [30. prosince 2004 16:52]
- Defaultní - výchozí, defaultně - ??? [27. prosince 2004 9:43]
- Google Zeitgeist 2004 [23. prosince 2004 10:01]
- Starší příspěvky
- Ilustrační obrázek v textu [21. prosince 2004 20:04]
- Které domény na vás odkazují [20. prosince 2004 20:09]
- Lyžování v Alpách - Itálie 2004/2005 [20. prosince 2004 18:42]
- Všechny příspěvky za měsíc prosinec 2004



