| Autor | Zpráva | ||
|---|---|---|---|
| CROSSjoy Profil |
#1 · Zasláno: 25. 3. 2005, 02:24:30
Ahoj, zajímalo by mě, jestli je možné pomocí hoveru formátovat obyč. seznam. Nejlépe změna atributu disc na circle přes list-style-type: circle;
Např u vnořeného seznamu.: <ul> <li>X</li> <li>Y</li> <ul> <li><a href="#">XX</a></li> </ul> </ul> a teď nevím, jak se stylem: <style> li a:hover {list-style-type: circle} </style> Máte s tím někdo zkušenosti? Jde to vůbec? Chtěl bych to takhle jednoduše, číselné kódy simulující odrážky se mi moc nezamlouvají. BTW: Dá se někde sehnat seznam těch číselných kódů i s příklady? |
||
| Petra Profil |
#2 · Zasláno: 25. 3. 2005, 02:39:47
Jednak, ten seznam je napsaný špatně, ten vnořený <ul> musí být uvnitř <li>, přímo uvnitř <ul> žádné další <ul> být nemůže.
Dál, styl li a:hover nestyluje položku seznamu, nýbrž odkaz a odkaz nemá žádnou vlastnost ohledně odrážek. Takže se nabízí udělat z odkazu položku seznamu: <style> a {display:list-item} a:hover {list-style-type: square} </style> <ul> <li><a href="#">odkaz</a></li> </ul> |
||
| izsak Profil |
#3 · Zasláno: 25. 3. 2005, 09:44:58
|
||
| CROSSjoy Profil |
#4 · Zasláno: 25. 3. 2005, 14:36:12 · Upravil/a: CROSSjoy
Petro:
Tvůj příklad sice funguje, ale když potřebuju měnit vloženou položku (circle) na disc, tak už mi to nejde, popř. to mění všechny položky (jsou nastavený na circle -> disc). <ul> <li><a href="#">X</a></li> <li><a href="#">Y</a> <ul> <li><a href="#">Z</a></li> </ul> </li> </ul> Pokus se prosím znovu, u tohodle seznamu u té vnořené položky, který by se hoverem měla měnit z circle na disc. Dík. |
||
| Petra Profil |
#5 · Zasláno: 25. 3. 2005, 16:12:55
Tak nejdřív jestli si dobře rozumíme - chceš aby se při najetí myší na odkazy X a Y nic nestalo, zatímco na Z se mění odrážka? Buď můžeš dát libovolný tý položce nějakou třídu a nastylovat si jí jinak, obecně v tomhle případě pak:
<style> li {list-style-type:circle} ul li ul li a {display:list-item} a:hover {list-style-type: disc} </style> |
||
| CROSSjoy Profil |
#6 · Zasláno: 26. 3. 2005, 20:42:51
JO rozumíme si dobře.
Zkoušela jsi podívat se na to, co vznikne, ve Firefoxu? |
||
| Petra Profil |
#7 · Zasláno: 26. 3. 2005, 21:04:09
Zkoušela, podle toho jak chápu o co se snažíme tak to funguje správně, možná to ale nechápu přesně. Kdyžtak tu jest URL toho jak to myslím: webtvorba.cz/test/seznam.htm
|
||
| habendorf Profil |
#8 · Zasláno: 27. 3. 2005, 00:14:48
Petra: tvoje řešení má kosmetickou, ale nepříjemnou vadu - link (u tebe to "Z") má délku celého řádku. Jinými slovy reaguje i na kurzor na pravém kraji stránky, je-li výškově na úrovni linku.
Řešení je velmi jednoduché, stačí tomu zanořenému <a> nastavit jakoukoliv malou šířku: ul li ul li a {display:list-item; width:0.1em;} Text linku pak může být libovolně dlouhý, šířka mu nevadí. |
||
| Petra Profil |
#9 · Zasláno: 27. 3. 2005, 00:44:38
habendorf: Mea culpa, toho jsem si samozřejmě vůbec nevšimla :-) To malé width je hezké, ale u normálních prohlížečů to zase přeteče, takže kdyby tam chtělo být třeba pozadí tak bude jen 0.1em. Lepší řešení mě teda ale momentálně nenapadá.
|
||
| habendorf Profil |
#10 · Zasláno: 27. 3. 2005, 01:22:49
Petra: To je pravda, naštěstí nám ale lepší prohlížeče zase nabízejí použítí min-width. No, uznávám že to z hlediska čistoty není nic moc, ale funguje to. Nic lepšího mě taky nenapadá :o)
|
||
| CROSSjoy Profil |
#11 · Zasláno: 27. 3. 2005, 14:41:39 · Upravil/a: CROSSjoy
Zkoušela, podle toho jak chápu o co se snažíme tak to funguje správně, možná to ale nechápu přesně. Kdyžtak tu jest URL toho jak to myslím: webtvorba.cz/test/seznam.htm
Skoro je to dobře. Jen u těch nevložených položek by mělo být místo circle disc. Pak bych byl happy. |
||
| CROSSjoy Profil |
#12 · Zasláno: 27. 3. 2005, 14:53:18
Zkoušel jsem různé možnosti, ale většinou byl ve FF vnořené položky se dvěma odrážkami. Asi by bylo snažší nedělat seznam, ale normální linky, z nichž některým bych přes třídu dal určité vlastnosti, jako tu změnu při hoveru a odsazení.
|
||
| habendorf Profil |
#13 · Zasláno: 27. 3. 2005, 15:52:12
CROSSjoy Skoro je to dobře. Jen u těch nevložených položek by mělo být místo circle disc. Pak bych byl happy.
No to už si přepíšeš sám, ne? |
||
| Conty Profil * |
#14 · Zasláno: 27. 3. 2005, 17:03:51
Petra
Vratil bych se jeste k tomu vnorovani dalsich <ul>, mam to v menu a nemam ho v noreny v <li>,ale proste jen tak vlozeny a beha to normalne ve vsech prohlizecich, ale kdyz jsem vyzkousel ho vnorit do <li> tak uz to problemy delat zacne, samozrejme v IE:-) (FF a Opera v pohode), tak jak to s tim je, proc by to melo byt vnoreny do <li> diky |
||
| CROSSjoy Profil |
#15 · Zasláno: 27. 3. 2005, 17:22:37
Tak teď to funguje. Petra to poupravila.
DĚKUJU PĚKNĚ PETRO. |
||
| Petra Profil |
#16 · Zasláno: 27. 3. 2005, 19:59:35
Conty: Protože to tak prostě bylo vyrobený ( seznamy na w3c ). Vnořený seznam musí být vnořený do něčeho, když se dá <ul> do <ul> tak to tak nějak spíš lítá ve vzduchu. Stejně tak u tabulky nemůže být tabulka přímo v tabulce, musí se udělat řádek, v něm buňka a až v tý může být tabulka. Ono takových věcí co fungují normálně ve všech prohlížečích, které máme šanci vyzkoušet je hodně, otázka je, co to udělá jinde, takže proč to nenapsat správně, když to jde.
CROSSjoy: No jo, buď happy ;-) |
||
|
Časová prodleva: 19 let
|
|||
Toto téma je uzamčeno. Odpověď nelze zaslat.
0