| Autor | Zpráva | ||
|---|---|---|---|
| PetraPP Profil |
#1 · Zasláno: 3. 4. 2015, 12:08:09
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 |
#2 · Zasláno: 3. 4. 2015, 12:20:12
PetraPP:
Nenastavuj vlastnosť padding elementu <li>, ale predovšetkým priamo odkazu.
|
||
| Keeehi Profil |
#3 · Zasláno: 3. 4. 2015, 12:20:57
Ž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 |
#4 · Zasláno: 3. 4. 2015, 12:47:41
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 |
#6 · Zasláno: 3. 4. 2015, 13:48:28
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 |
#7 · Zasláno: 5. 4. 2015, 23:07:51
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 |
#9 · Zasláno: 5. 4. 2015, 23:49:17
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. |
||
|
Časová prodleva: 9 let
|
|||
0