Autor Zpráva
PetraPP
Profil
Potřebovala bych poradit s CSS. Nějak se mně nedaří vložit odkaz pro celý <LI>. S tím i souvisí hover a barvy. Abych to měla OK :)
Zde je živá ukázka.
lionel messi
Profil
PetraPP:
Nenastavuj vlastnosť padding elementu <li>, ale predovšetkým priamo odkazu.
Keeehi
Profil
Živá ukázka
Zrušit paddnig u li (respektive ho přesunout do odkazu) a z odkazu udělat blokový element a nastavit mu 100% výšku.
Tomáš123
Profil
Keeehi:
a nastavit mu 100% výšku
To predsa nie je potrebné. Blok kopíruje rozmery nadradeného prvku (a ak nemá nastavený padding, bez problémov sa roztiahne).
Bubák
Profil
Tomáš123:
a ak nemá nastavený padding, bez problémov sa roztiahne
Na výšku nikoliv.

PetraPP:
Dovolil jsem si kód přepsat tak, jak bych ho napsal já a "optimalizoval" jsem ho i pro IE6 (vím, že to není třeba, ale je to zadarmo), s výjimkou zaoblených rohů.
Změny:
- dovolil jsem si dát text-transform nadřazenému elementu, nevím, zda je to dobrý nápad, ale pro kód v ukázce to má smysl
- vynuloval jsem seznamu margin i padding (je to čisté řešení a je to kvůli starším prohlížečům a jde o jediný kód, který jsem přidal), potřebné odsazení je pak možné nastavit paddingem, nebo marginem, já jsem zvolil padding
- šířku nastavuji odkazu, "chytne" se i IE6 (jedna z možností pro haslayout), a tu šířku stejně někde deklarovat musím
- barvy, padding a orámování deklaruji pro odkaz, pozadí a border se mění i v IE6, odkaz funguje už při najetí na border, je dobrým zvykem, aby plocha, na které funguje hover byla stejná, jako plocha, na které je dostupný odkaz a nebyla menší třebas o zmíněný border

Slíbený kód: http://kod.djpw.cz/iamb
Tomáš123
Profil
Bubák:
Na výšku nikoliv.
Ani ty nemusíš udávať výšku vo svojej ukážke, lebo odkaz ju roztiahne. Ale pravda, zle som sa vyjadril. Máš pravdu.
PetraPP
Profil
Ještě bych měla jeden dotaz. Do <li> vkládám více informací a potřebovala bych udělat pro celý <li> odkaz. Jak toho mohu u této živé ukázky docílit? Klidně ukázku upravte, budu jen ráda.
Tomáš123
Profil
PetraPP:
Teoreticky môžeš celý prvok obaliť do jedného obrovského odkazu. Táto cesta ale pravdepodobne nie je najvalídnejšia. Potom je možné prvok s odkazom absolútne napoziciovať nad požadovanú plochu a manuálne* nastaviť rozmery. Treťou cestou by mohol byť cursor: pointer v CSS a JavaScript. Ja by som asi išiel štvrtou cestou. Vykašľal by som sa na to.

*Nie nutne manuálne; vhodná kombinácia relatívneho poziciovania a zanorenia odkazu by to mohla spraviť. Potom by stačilo roztiahnutie pomocou top: 0; right: 0; bottom: 0; left: 0;.
Chamurappi
Profil
Reaguji na Tomáše123:
Táto cesta ale pravdepodobne nie je najvalídnejšia.
1) Prohlížečům blokové elementy v odkazu nikdy nevadily.
2) Sémanticky vzato také není důvod, aby blok nemohl být odkazem.
3) Texty jako „Vlhkost“ a „Venku: 5.6 °C“ stejně nejsou odstavce, mohly by to být klidně <span>y.
4) Podle HTML 5 to validní je. (Pan PetraPP už i na současné verzi e-pocasi.cz deklaruje <!doctype html>.)


Reaguji na PetruPP:
Klidně ukázku upravte, budu jen ráda.
Možná nechceme, abys byl ráda.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

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