« 1 2 »
Autor Zpráva
Jelly
Profil
Mám blokové menu, ve kterém mají položky obrázkový background (s pluskem). Při přejetí myšidlem se obrázek mění na jiný (a:hover). Problém nastává, když chci položce přiřadit jiné pozadí (s tečkou). Funguje to jen na nejvyšší úrovni, v podmenu už ne. Jakýkoliv class="" je ignorován. Je vůbec možné v takovém menu nastavit jiné pozadí?

Mrkněte se, jak to vypadá. Menu je zde.

Stáhnout menu na vlastní pec lze tady.

Víte-li o nějakém úplně jiném způsobu řešení, bránit se nebudu. :)
Díky.
habendorf
Profil
Samozřejmě to možné je. Asi budeš muset přiblížit (upřesnit) deklaraci blíže k elementu.

Navíc to lze řešit čistě kontextově, bez tříd.
tiso
Profil
Tipnem si že máš problém s kaskádou. Prejdi si pravidlá kaskády.
Jelly
Profil
To habendorf:

A zkoušels to?

S přiblížením deklarace jsem si hrál, ale dělalo to paseku. Jsou tam paddingy pro odsazení textu...

Čistě kontextové řešení by vypadalo jak? Mohl bys to prosím naznačit?
habendorf
Profil
Čistě kontextové řešení by vypadalo jak? Mohl bys to prosím naznačit?

Třeba:

1. úroveň: ul li a {}
2. úroveň: ul li ul li a {}
3. úroveň: ul li ul li ul li a {}

Uvědom si, že deklarace ul li a {} se ti dědí dále do hloubky, takže ji musíš v ul li ul li a {} přepsat, atd. do hloubky.
Jelly
Profil
Uvědom si, že deklarace ul li a {} se ti dědí dále do hloubky, takže ji musíš v ul li ul li a {} přepsat, atd. do hloubky.

Ach tak, to tam mám. To funguje a je to vidět na první pohled.
Jenže když chci ten background s pluskem nahradit backgroundem s tečkou, nemůžu použít stejné deklarace. Musím to odlišit přes class. A ten je z nějakého důvodu ignorován...
gyoja
Profil
Ach tak, to tam mám.. Ne tak jak to píše habendorf. Máš jen ul ul a a ne ul li ul li a.
habendorf
Profil
Jelly: OK, tak jsem se na to koukl. Ty máš především blbě html.

<ul>
<li><a href="#">Menu 1</a></li>
<li>
<ul>
<li><a href="#">Sub-menu 1.1</a></li>
</ul>
</li>
Railbot
Profil
Nevím o jaký konkrétní příklad se tady jedná, ale takto vnořené menu se používá celkem bez problému (různé diskuse) ačkoli to po stránce html není správné (strkat do řádkového elementu blokový prvek).
habendorf
Profil
Railbot: Ty tučné li mu tam chybí, tak to myslím. Pak mu samozřejmě nefungují deklarace, protože žádné ul ul neexistuje.
habendorf
Profil
Railbot: BTW, li není inline, ale list-item.
Jelly
Profil
Ach tak, to tam mám.. Ne tak jak to píše habendorf. Máš jen ul ul a a ne ul li ul li a.

Ano, máš pravdu. To ale na věci nic nemění, protože toto funguje.

Mrkni do kódu.
Když nahradím background na nejvyšší úrovni, tak se to jiné pozadí zobrazí:
<li id="dot"><a href="#">Menu 2</a></li>
Když udělám to samé na druhé úrovni, už se tam to požadované pozadí neobjeví:
<li id="sdot"><a href="#">Sub-menu 3.2</a></li>

#dot a {
background-image: url(img/backmenut1.gif);
}
backmenut1.gif se zobrazuje

#sdot a {
background-image: url(img/backmenut2.gif);
}
backmenut2.gif se nezobrazuje
habendorf
Profil
Jelly: Jak říkám, oprav si html.
Jelly
Profil
habendorf: Stalo se a stejně to nepomohlo. Já tam chci dostat ta pozadí, která mám v aaa.css pod "#dot a", "#dot a:hover", "#sdot a", "#sdot a:hover", ".ssdot a", ".ssdot a:hover", ".sssdot a", ".sssdot a:hover". Možná si nerozumíme... Zobrazuje se jen to "#dot a", "#dot a:hover".
habendorf
Profil
Id má vyšší prioritu než class, takže #neco a {} se ti dědí do hloubky a pomocí .neco a {} to nepřepíšeš.
Jelly
Profil
Id má vyšší prioritu než class, takže #neco a {} se ti dědí do hloubky a pomocí .neco a {} to nepřepíšeš.

V tom případě by tedy mělo fungovat ještě to "#sdot a", "#sdot a:hover", což se bohužel neděje...
gyoja
Profil
A nebylo by jednodušší něco takového:

<ul>
<li><a class="menu">Menu 1.</a></li>
<li><a class="menu">Menu 2.</a></li>
<li><a class="submenu">Menu 2.1.</a></li>
<li><a class="subsubmenu">Menu 2.1.1.</a></li>
<li><a class="subsubmenu">Menu 2.1.2.</a></li>
<li><a class="submenu">Menu 3.1</a></li>
<li><a class="subsubmenu">Menu 3.1.1</a></li>
<li><a class="menu">Menu 3.</a></li>
</ul>

<style>
a.menu {}
a.menu:hover {}
a.submenu {}
a.submenu:hover {}
a.subsubmenu {}
a.subsubmenu:hover {}
</style>

bez zanořování seznamů?
Plaváček
Profil
gyoja

A nebylo by jednodušší seznamy správně zanořit, aby také měly logiku, jak říká habendorf? A pak pomocí kontextu nastylovat co potřebuji a jak je to výše uvedeno?

ul li a{...}

ul li ul li a {...}

ul li ul li ul li a {...}


<ul>
<li> <a href="#"> Menu 1 </a>
<ul>
<li><a href="#">Submenu 1</a>
<ul>
<li><a href="#">Subsubmenu 1</a></il>
<li><a href="#">Subsubmenu 2</a></li>
</ul>
</li>
<li><a href="#">Submenu 2</a></li>
</ul>
</li>
</ul>
tiso
Profil
gyoja
nie je to sémanticky správne... Predstav si balíček samostatne zabalených cukríkov a balíček cukríkov zabalených v balíčkoch...
gyoja
Profil
Plaváček, tiso
Máte samozřejmě pravdu. Omlouvám se za selhání.

tiso
Predstav si balíček samostatne zabalených cukríkov a balíček cukríkov zabalených v balíčkoch
OT: Obojí mi šlo bez problémů. 1. varianta je ekologičtější. ;-)


Jelly
Upozornil bych však na to, že při zvětšování textu se ty obrázky v odkazech duplikují a v backgroundu je třeba je napozicovat. Též bych zvolil jednoduchý průhledný gif pouze o velikosti toho plus a tečky a barvu pozadí bych udělal přes background-color.
Jelly
Profil
Plaváček: Doporučuji vyzkoušet. Nefunguje to.

gyoja: Vzhledem k tomu, že je tam čtvero pozadí pro každou položku, musel bych pro každé <li> použít několik tříd, jedna je málo. Tohle řešení bych musel zkusit, i když se mi to moc nelíbí...

Možná to stále není úplně jasné...
Tyto položky mají mít pozadí s tečkou: Menu 2, Sub-menu 3.2, Sub-menu 3.3.1, Sub-menu 3.3.2.1.
Tečku má ovšem jen Menu 2.

Když si zobrazíte aaa.html, uvidíte, že se u zmíněných položek snažím to alternativní pozadí vynutit přes id="" nebo class="".
Ale původní (s pluskem) pozadí přebije jen na nejvyšší úrovni id="dot" a u Menu 2 je tedy pozadí s tečkou tak, jak chci.
Ostatní pozadí s tečkama se ne a ne objevit.
Jelly
Profil
Upozornil bych však na to, že při zvětšování textu se ty obrázky v odkazech duplikují a v backgroundu je třeba je napozicovat. Též bych zvolil jednoduchý průhledný gif pouze o velikosti toho plus a tečky a barvu pozadí bych udělal přes background-color.

Díky za upozornění. Vím o tom, ale to jsou detaily, to si pak doupravím.
Plaváček
Profil
Jelly

Já doporučuji, aby sis opravil správně strukturu HTML, pak ti doporučuji, abys ze stylu vyházel všechny předchozí zbytečné definice a zjistíš, že ti stylování pomocí kontextu bude šlapat jako hodinky. Opravdu nemám čas to celé tvořit za tebe. Lepší radu už ti bohužel dát nemohu.
Jelly
Profil
Plaváček: Strukturu HTML jsem si opravil, asi jsem to tu ještě nenapsal. Upravil jsem i UL LI UL LI A v css...
Toto ale fungovalo i předtím (i se špatnou strukturou), jinak by u všech položek bylo pozadí stejné jako na nejvyšší úrovni. Což tedy není - každé submenu má pozadí vlastní.
Jen zkrátka nejde to pozadí přebít jiným přes class="" nebo id="".

Nikdo se s něčím takovým ještě nesetkal?
No nepomohl mi ani pan Google...
gyoja
Profil
Po přezkoumání adresáře s obrázky a jejich porovnání s CSS si myslím, že máš v CSS v background-image špatně naodkazované obrázky. Zrušil bych všechny class a id a k položkám ul li a:hover bych přiřadil správné obrázky. Zkoušel jsem to u sebe na tvém kódu a no problem.
Plaváček
Profil
Jelly

Já ti nevím. Osobně, když mi něco takto nefunguje, udělám si fungl nový soubor a CSS a postupuju postupně od deklarace k deklaraci. Možnost, že máš špatně nalinkované obrázky mě napadla také, ale předpokládal jsem, že to máš ověřené.
tiso
Profil
Jelly
ako som Ti už písal - treba sa pohrať s kaskádou... Ovládaš jej pravidlá?
gyoja
cukríky: ...odkiaľ budeš vedieť či balíček obsahuje jeden cukrík alebo bude plný cukríkov?
gyoja
Profil
DOPLNĚNÍ:

Věci se mají takto
#vlevomenu ul li a {}
#vlevomenu ul li a:hover {}
#vlevomenu ul ul li a {}
#vlevomenu ul ul li a: hover {}
#vlevomenu ul ul ul li a {}
#vlevomenu ul ul ul li a:hover {}

+ správné url obrázků
+ správný html kód v UL
a jede to jako po másle (100%).

EDIT:

Tady je to opravené - jen do večera, pak to smáznu.

tiso
cukríky: ...odkiaľ budeš vedieť či balíček obsahuje jeden cukrík alebo bude plný cukríkov?.
Říkal jsi přece "predstav si" ;-).
Jelly
Profil
tiso: Určitě je možné, že mi uniká nějaká blbost... To se stává.

gyoja: Je to jinak. Ten a:hover mám v pořádku. Já potřebuju změnit pozadí jen u vybraných položek, tj. Menu 2, Sub-menu 3.2, Sub-menu 3.3.1, Sub-menu 3.3.2.1. Tak jak se to snažím vynutit v HTML pomocí <li class=""> nebo <li id="">.
tiso
Profil
gyoja
Takže cukríky si predstaviť vieš, ale odpoveď na otázku čo som položil už nie?
...necháme to tak...
« 1 2 »
Toto téma je uzamčeno. Odpověď nelze zaslat.