Autor Zpráva
DAV1D90
Profil *
Zdravim,
na stranke http://transformers.scifi-guide.net/ pouzivam vyskakovacie menu s troma urovnami a tretia uroven nechce "vyskakovat" hned vedla polozky druhej urovne, ale vyskakuje presne pod nou, ak pouzijem top: 0; tak mi to hadze, tak ako to mam teraz. Vyskusat to mozete napriklad Filmy/Pomsta porazenych/

Strasne by mi pomohlo keby mi to niekto opravil, ja si uz neviem rady...
ul#menu a {
display: block; 
}

ul#menu {
list-style-type: none; 
padding: 0px; 
margin: 0px; 
z-index: 10;
}
 
ul#menu li {
display: block; 
float: left; 
z-index: 15;
}

ul#menu li a {
line-height: 42px; 
padding: 0 12px 0 12px; 
text-decoration:none; 
color: #ddd; 
font-size: 13px; 
 }

ul#menu li a:hover {
background: #010101; 
color: #ccc;
}

ul#menu li ul {
display: none; 
margin: 0; 
padding: 0; 
background: #010101;
width: 138px;
z-index: 25;
}

ul#menu li ul li {
font-weight: normal; 
line-height: 22px; 
font-size: 12px; 
display: block; 
float: none; 
border: 0px;
border-bottom: 1px solid #111;
}
 
ul#menu li ul li a {
padding: 0 10px 0 10px;  
line-height: 22px; 
color: #ddd; 
font-size: 12px;
font-weight: bold;
}
 
ul#menu li ul li a:hover {
color: #ccc; 
background: #222; 
}
 
ul#menu li:hover ul.druha-uroven {
display: block; 
position: absolute; 
}

ul#menu li ul li ul {
display: none;  
background: #222;
width: 138px;
z-index: 25;
position: relative;
left: 129px;
top: 0px;
}

ul#menu li ul li ul li {
font-weight: bold; 
line-height: 20px; 
font-size: 12px; 
display: block; 
float: none; 
border: 0px;
}
 
ul#menu li ul li ul li a {
padding: 0 10px 0 10px; 
line-height: 20px; 
color: #ccc; 
font-size: 12px 
}
 
ul#menu li ul li ul li a:hover {
color: #ccc; 
background: #111; 
}

ul#menu li ul li:hover ul.tretia-uroven {
display:block; 
position:absolute; 
}


Vdaka

Moderátor Majkl578: Tvůj projev je špatně srozumitelný, piš prosím s diakritikou.
DAV1D90
Profil *
OK, tak budem teda písať s diakritikou. Včera som sa v tom opäť dosť vŕtal, ale vyriešiť môj problém sa mi zatiaľ stále nedarí. Takto to mám teraz: http://transformers.scifi-guide.net/now.jpg a takto nejako chcem aby to vyzeralo http://transformers.scifi-guide.net/now.jpg

Vedel by mi niekto s tým pomôcť? Už som fakt z toho zúfalý.
DAV1D90
Profil *
omg, zabudol som upraviť druhý link, ten má byť http://transformers.scifi-guide.net/target.jpg
zvěřiňák
Profil
ul#menu li ul li ul {
display: none;  
background: #222;
width: 138px;
z-index: 25;
position: relative;
left: 129px;
margin-top: -21px;
}

A vyhoď
 top: 0px;
DAV1D90
Profil *
vďaka, taká blbosť a nenapadlo ma to :( diky moc
DAV1D90
Profil *
No a ďalší problém. http://transformers.scifi-guide.net/ Naštýloval som si menu a teraz mi nefunguje zmena farby otvorenej položky v druhej úrovni, pokiaľ z tejto položky odídem do tretej úrovne. Pozrite sa na obrázok http://transformers.scifi-guide.net/problem.jpg . V prvej úrovni mi to funguje. Pozadie pod Filmy ostáva s čiernym pozadím aj po tom, keď s kurzorom prejdem do druhej úrovne alebo do tretej. Opäť by som bol veľmi v´dačný za vašu pomoc. Už ma z toho ide klepnúť. Vďaka.

#menublok {
text-align: left;
padding: 0;
margin: 0 auto;
width: 860px;
height: 44px;
margin-bottom: 2px;
z-index: 1; 
font-weight: bold;
}

ul#menu a {
display: block; 
}

ul#menu {
list-style-type: none; 
padding: 0px; 
margin: 0px; 
z-index: 10;
}
 
ul#menu li {
display: block; 
float: left; 
z-index: 15;
}

ul#menu li a {
line-height: 42px; 
padding: 0 12px 0 12px; 
text-decoration:none; 
color: #ddd; 
font-size: 13px; 
 }

ul#menu li a:hover, ul#menu li:hover {
background: #010101; 
color: #ccc;
}

ul#menu li ul {
display: none; 
margin: 0; 
width: 124px;
z-index: 25;
background: transparent url(images/bgnav.png) top center repeat;
padding: 6px 4px 10px 10px;
}

ul#menu li ul li {
font-weight: normal; 
line-height: 22px; 
font-size: 11px; 
display: block; 
float: none; 
border: 0px;
background: transparent;
}
 
ul#menu li ul li a {
padding: 0 2px 0 10px;  
line-height: 22px; 
color: #ff9933; 
font-size: 12px;
font-weight: normal;
background: transparent url(images/nav_arrow.png) top left no-repeat;
}
 
ul#menu li ul li a:hover, ul#menu li ul li:hover {
color: #ccc; 
background: transparent url(images/nav_arrowb.png) top left no-repeat;
}
 
ul#menu li:hover ul.druha-uroven {
display: block; 
position: absolute; 
}

ul#menu li ul li ul {
display: none;  
width: 120px;
z-index: 25;
position: relative;
left: 128px;
margin-top: -28px;
background: transparent url(images/bgnav.png) top center repeat;
padding: 6px 4px 10px 10px;
}

ul#menu li ul li ul li {
font-weight: bold; 
line-height: 22px; 
font-size: 12px; 
display: block; 
float: none; 
background: transparent;
}
 
ul#menu li ul li ul li a {
padding: 0 10px 0 10px; 
line-height: 22px; 
color: #ff9933; 
font-size: 12px;
background: transparent url(images/nav_arrow.png) top left no-repeat;
}
 
ul#menu li ul li ul li a:hover {
color: #ccc; 
background: transparent url(images/nav_arrowb.png) top left no-repeat;
}

ul#menu li ul li:hover ul.tretia-uroven {
display:block; 
position:absolute; 
}
zvěřiňák
Profil
Zkus se inspirovat tady na těch stránkách. Tam jim funguje něco podobného a taky mají v CSS pěkný propletenec.
DAV1D90
Profil *
No tak to mi žiaľ nepomohlo :/ To menu majú spravené úplne iným systémom. Ono to v podstate ani moc nevadí, ale keby to ostalo v tej hover farbe ccc, tak by bolo každému ihneď jasné, ktorú položku má rozbalenú. Každopádne netuším prečo to nefunguje. Dneska som sa tú menu časť css snažil očistiť od dvojitých príkazov, ale stále to robí.


Toto je časť css, ktorá prikazuje čiernu farbu v prvom levely (Hlavne menu, Filmy...)
ul#menu li a:hover, ul#menu li:hover {
background: #010101; 
color: #ccc;
}


Toto je časť css, ktorá prikazuje túto bielu farbu v tom druhom levely (Transformers 3, Pomsta porazených...)
ul#menu ul li a:hover, ul#menu ul li:hover {
color: #ccc; 
background: transparent url(images/nav_arrowb.png) top left no-repeat;
}


Prvý level funguje, tretí už nie. Je to pre mňa záhada.

Tu nasleduje komplet menu časť CSS

/* Menu */
#menublok {
text-align: left;
padding: 0;
margin: 0 auto;
width: 860px;
height: 44px;
margin-bottom: 2px;
z-index: 1; 
font-weight: bold;
}

ul#menu a {
display: block; 
}

ul#menu {
list-style-type: none; 
padding: 0px; 
margin: 0px; 
z-index: 10;
}
 
ul#menu li {
display: block; 
float: left; 
z-index: 15;
}

ul#menu li a {
line-height: 42px; 
padding: 0 12px 0 12px; 
text-decoration: none; 
color: #ddd; 
font-size: 13px; 
 }

ul#menu li a:hover, ul#menu li:hover {
background: #010101; 
color: #ccc;
}

/* druhý level */
ul#menu ul {
display: none; 
margin: 0; 
width: 124px;
z-index: 25;
background: transparent url(images/bgnav.png) top center repeat;
padding: 6px 4px 10px 10px;
}

ul#menu ul li {
font-weight: normal; 
line-height: 22px; 
font-size: 11px; 
display: block; 
float: none; 
border: 0px;
background: transparent;
}
 
ul#menu ul li a {
padding: 0 2px 0 10px;  
line-height: 22px; 
color: #ff9933; 
font-size: 12px;
font-weight: normal;
background: transparent url(images/nav_arrow.png) top left no-repeat;
}
 
ul#menu ul li a:hover, ul#menu ul li:hover {
color: #ccc; 
background: transparent url(images/nav_arrowb.png) top left no-repeat;
}
 
ul#menu li:hover ul.druha-uroven {
display: block; 
position: absolute; 
}

/* tretí level */
ul#menu ul ul {
display: none;  
width: 120px;
z-index: 25;
position: relative;
left: 128px;
margin-top: -28px;
background: transparent url(images/bgnav.png) top center repeat;
padding: 6px 4px 10px 10px;
}

ul#menu ul ul li {
font-weight: bold; 
line-height: 22px; 
font-size: 12px; 
display: block; 
float: none; 
background: transparent;
}
 
ul#menu ul ul li a {
padding: 0 10px 0 10px; 
color: #ff9933; 
background: transparent url(images/nav_arrow.png) top left no-repeat;
}
 
ul#menu ul ul li a:hover {
color: #ccc; 
background: transparent url(images/nav_arrowb.png) top left no-repeat;
}

ul#menu ul li:hover ul.tretia-uroven {
display:block; 
position:absolute; 
}
zvěřiňák
Profil
ul#menu ul li a:hover, ul#menu ul li:hover > a {
color: #ccc; 
background: transparent url(images/nav_arrowb.png) top left no-repeat;
}


Jak to funguje, to nevím, ale funguje to. Vyšťoural jsem to tady.
panther
Profil
zvěřiňák:
Jak to funguje, to nevím, ale funguje to
to není moc správný přístup. Ať používáš cokoliv, měl bys vědět, proč tomu tak je.

V tomto konkrétním případě by to fungovalo i bez většítka, tedy
ul#menu ul li:hover a {}
DAV1D90
Profil *
Diky moc zvěřiňák, tvoje riešenie funguje. Pantherovo riešenie som skúšal už včera, ale žiaľ ak to je bez toho "většítka", tak to zasa vyfarbuje tretiu úroveň do toto hover efektu. Čiže namiesto oranžovej tam je stále biela, resp. ccc, každopádne vďaka tiež. So znakom > som sa stretol v css po prvý krát. Vie mi niekto povedať akú to plní funkciu?
panther
Profil
DAV1D90:
So znakom > som sa stretol v css po prvý krát. Vie mi niekto povedať akú to plní funkciu?
to si najdi sám.

tak to zasa vyfarbuje tretiu úroveň do toto hover efektu
nevšiml jsem si, že to má více úrovní. Zapomeň na to, co jsem napsal, to platilo pro domnělé dvouúrovňové menu.
zvěřiňák
Profil
DAV1D90:
So znakom > som sa stretol v css po prvý krát. Vie mi niekto povedať akú to plní funkciu?
Taky jsem to nevěděl, už jsem to našel. Zpravidla používám pro slučování selektorů v CSS jenom operátory mezera a čárka, ale jsou čtyři (to jsem ani netušil). Další jsou většítko a plus.

, - Slucovani selektoru shodnych definic, generalizace.
(p,b - shodná definice pro p i b).

mezera - Nasledovnicky selektor - "neprima" linie potomku.
(p b - b vyskytující se kdekoli v p).

> - Selektor potomku - primy potomek.
(p>b - pouze b jako primy potomek p).

+ - Sourozenecky selektor - druhy z primych sourozencu.
(p+p - druhy z vystupujicich elementu).
panther
Profil
zvěřiňák:
spíše než vypisovat sem, jaké selektory jsou, jsi měl dát odkaz na stránku. Ne všechny fungují všude, jistě se tam o tom psalo.
zvěřiňák
Profil
panther:
Já jsem právě nenašel nějaký podrobný popis, tak jsem sem dal alespoň tohle. Spíš jsem myslel, že jako reakci na můj předchozí příspěvek se ozve někdo zkušenější (třeba ty) a dá odkaz někam, kde najdeme obsáhlejší vysvětlení.
panther
Profil
zvěřiňák:
Já jsem právě nenašel nějaký podrobný popis
já myslel, že jsi to odněkud opsal, když jsi to neznal. Já ty odkazy nepoužívám, musím je hledat.

Tady je přehled od Petra Staníčka, tady je přehled, co kde (ne)funguje.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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