Autor Zpráva
Patrik16
Profil
Čaute potrebujem poradiť mám odkazy a všetky sa my po prejdení myšou podčiarknu teda každý zvlášť ale chcem aby pri každom jednom podčiarknuti bola iná farba toho podčiarknutia ako na to?prosím poraďte.
jakre
Profil
Je to jednoduché, použij kaskádové styly. Nejprve zrušíš výchozí podtržení po najetí myší na odkaz, poté přidáš dolní rámeček, pro který si zvolíš požadovanou barvu.

V této ukázce se můžeš podívat, jak toho docílíš.
Tomášeek
Profil
jakre:
Ne. Border se vykresluje jinde a jinak než text-decoration. Všude bude níž, minimálně v některých prohlížečích bude mít jinou délku, např. v Safari (na Macu určitě, na Windows nevím, v jiných kombinacích prohlížeč/OS také nevím) bude ignorovat znaky pod linkou - text decoration se při znacích pod linku přeruší, aby tyto znaky nepeškrtl, zatímco border nikoliv.

Rozdíl, zejména v pozici, můžeš vidět, pokud původní podtržení ponecháš - jsfiddle.net/pbodcqcL/2.

Patrik16:
Musíš použít vnořený element, konstrukce pro černý text s červeným podtržením by mohla vypadat třeba takto:

<style>
a {text-decoration: none; color: red;}
span {color: black;}
a:hover {text-decoration: underline}
</style>
<a href=""><span>text</span></a>
Patrik16
Profil
Keď dám ďalší span napríklad span{color:orange;};span{color:green}
<a href=" "><span>text</span>
< a href=" "><span >text</span>
Zmení my to podčiarknutie na oranžové tam kde chcem a na zelené tam kde chcem alebo my to zadefinume len 1 farbu?
Nemôžem to teraz vyskúšať lebo som odcestovaný...


ok vyskusam uvidim zatial dakujem.


jakre:
Ešte otázočka prečo musí byť span{color:black}?
Nespraví my to podčiarknurie na čierne u všetkých odkazov?
jakre
Profil
Tomášeek:
Nabídl jsem takové řešení, jelikož nabízí mnohem více možností a přišlo mi vhodnější, než vnoření spanu do odkazu.

Patrik16:
V řešení, které poslal Tomášeek určuje vlastnost spanu (tedy černá barva) vlastnost odkazu. Pokud měníš jeho vlastnosti, dochází pouze ke změně barvy odkazu. Pokud chceš docílit toho, aby mělo podtržení odlišné barvy, může kód vypadat takto:

<style>
a{text-decoration: none}
a.cervena{color: red}
a.oranzova{color: orange}
a.zelena{color: green}
span {color: black}
a:hover {text-decoration: underline}
</style>
<a href="" class="cervena"><span>text</span></a>
<a href="" class="oranzova"><span>text</span></a>
<a href="" class="zelena"><span>text</span></a>
Tomášeek
Profil
jakre:
jelikož nabízí mnohem více možností
Možnosti nabízí stejné, jen v horší formě.

a přišlo mi vhodnější, než vnoření spanu do odkazu.
Ano, není to ideální, nicméně, vizuálně asi jediné správné (chci-li podtrhnout inline text uvnitř dalšího textu, nic jiného než text-decoration by nemělo přijít v úvahu, právě kvůli pozici a celkovému chování).

Krom té tvé borderové alternativy doplním ještě :after element na odkazu, se 100% šířkou a 1px výškou (či jinou, samozřejmě). Tam se bude dát lépe pracovat s pozicí blížící se klasickému podtržení (ono to mmch. jde i u toho borderu), nepřeškrtnutí dolních nožiček a smyček písmen v Safari to však nepředejde.

Patrik16:
Zmení my to podčiarknutie na oranžové tam kde chcem a na zelené tam kde chcem alebo my to zadefinume len 1 farbu?
Základ CSS, doporučuji jej nastudovat.

Ešte otázočka prečo musí byť span{color:black}?
Opět základ CSS. Zkus tu černou odsrtanit a uvidíš, co se stane a proč tam je.

Nespraví my to podčiarknurie na čierne u všetkých odkazov?
Do třetice základ CSS.
Patrik16
Profil
Ja viem základy a aj komplikovanejšie css možno že som nejaké funkcie vynechal a nikdo nevie všetko preto sa to pýtam
Keeehi
Profil
Patrik16:
Ja viem základy a aj komplikovanejšie css možno že som nejaké funkcie vynechal a nikdo nevie všetko preto sa to pýtam
Opravdu? Tak to by jsi snad měl vědět, že:
span{color:orange;}
span{color:green;}
je úplně to stejné jako
span{color:green;}

Nebo tohle snad považuješ za něco jiného než základy?
Tomášeek
Profil
Patrik16:
a aj komplikovanejšie css možno že som nejaké funkcie vynechal
Vynechal jsi naprostý základ.

Promiň, ale:
- neznalost tříd (5. odkaz Základního kurzu na CSS), v sekci "Pro pokročilé" je přímo odkaz, který vystihuje tvůj problém - Různé barvy odkazů pomocí CSS
- „Keď dám ďalší span napríklad span{color:orange;};span{color:green} ... Zmení my to podčiarknutie na oranžové tam kde chcem a na zelené tam kde chcem alebo my to zadefinume len 1 farbu?“ - Pravidla kaskádování (8. odkaz téže stránky)

neukazuje nejen na neznalost komplikovanějšího CSS, ale na absenci základů jazyka, nebo jeho totální nepochopení.
Patrik16
Profil
....

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: