| Autor | Zpráva | ||
|---|---|---|---|
| Adam1999 Profil |
Zdravím mám takový 2 problémy.
Vytvořil jsem si dropdown menu pod kterým mám umístěný slider jssor.com ale za boha ten slider nemůžu tím dropdown menu překrýt už jsem zkoušel úplně všechno co jsem našel na googlu ale prostě na z-index vůbec nereaguje nevíte někdo prosím jak to překrýt? Zde je html: <nav id="navbar">
<ul>
<li class="active"><a href="#">Úvod</a></li>
<li><a href="#">O projektu</a></li>
<li><a href="#">Vložit nabídku</a></li>
<li><a href="#">Makléři</a></li>
<li><a href="#">kontakt</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">User Experience</a></li>
</ul>
</li>
</ul>
</nav>
<div id="slider" class="slider">
<div u="slides" class="slides">
<div><img u="image" src="img/slider.png" /></div>
<div><img u="image" src="img/slider.png" /></div>
<div><img u="image" src="img/slider.png" /></div>
</div>
<div u="navigator" class="bullet">
<div u="prototype"></div>
</div>
</div>#header .slider {
text-align: center;
position: relative;
top: 100px;
width: 1178px;
height: 259px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
#slider .slides {
cursor: move;
overflow: hidden;
width: 1178px;
height: 259px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
#header .slider img {
display: block;
height: auto;
width: 100%;
border: 0;
}
#header .slider .bullet {
position: absolute;
bottom: 10px;
right: 10px;
}
#header .slider .bullet div, #header .slider .bullet div:hover, #header .slider .bullet .av {
width: 15px;
height: 15px;
line-height: 19px;
color: white;
font-size: 12px;
overflow: hidden;
cursor: pointer;
}
#header .slider .bullet div { background: url(../img/slider-bullet.png) no-repeat; }
#header .slider .bullet div:hover, #header .slider .bullet .av:hover { background: url(../img/slider-bullet-hover.png) no-repeat; }
#header .slider .bullet .av { background: url(../img/slider-bullet-hover.png) no-repeat; }
#header .slider .bullet .dn, #header .slider .bullet .dn:hover { background: url(../img/slider-bullet.png) no-repeat; }
#navbar {
height: 45px;
width: 950px;
}
#navbar > ul {
list-style-type: none;
height: 45px;
position: relative;
float: left;
top: 35px;
left: 70px;
}
#navbar > ul > li {
display: inline;
float: left;
background-image: url(../img/menu-li.png);
background-repeat: repeat-x;
height: 33px;
min-width: 100px;
text-align: center;
padding-top: 7px;
padding-left: 10px;
padding-right: 10px;
margin-right: 5px;
border: 1px solid rgb(95, 204, 255);
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#navbar > ul > li:hover {
background-image: url(../img/menu-li-hover.png);
background-repeat: repeat-x;
border: none;
padding-left: 11px;
padding-right: 11px;
padding-top: 8px;
}
#navbar > ul > li.active {
background-image: url(../img/menu-li-hover.png);
background-repeat: repeat-x;
border: none;
padding-left: 11px;
padding-right: 11px;
padding-top: 8px;
}
#navbar > ul > li > a {
display: block;
text-decoration: none;
color: rgb(0, 67, 99);
height: 33px;
width: 100%;
}
#navbar > ul > li:hover > a {
color: rgb(0, 0, 0);
font-weight: bold;
}
#navbar > ul > li.active > a {
color: rgb(0, 0, 0);
font-weight: bold;
}
/*
* Dropdown
*/
#navbar > ul > li > ul {
display: none;
}
#navbar > ul > li:hover > ul {
display: block;
}
#navbar > ul > li > ul > li {
float: none;
position: relative;
}Potom druhej problém je ten že když otevřu dropdown menu a je vněm text delší než horní nadpis v <li> tak se roztáhne celý horní <li> jak mám prosím udělat aby horní <li> zůstalo pořád stejné a roztáhlo se jen dropdown <ul>? Děkuji :). |
||
| juriad Profil |
#2 · Zasláno: 19. 4. 2015, 11:49:40
Adam1999:
Dodej odkaz na web, kde se projevuje ta chyba. Myslíš, že si někdo kvůli tobě bude rozbíhat nějaké slidery, aby zjistil, proč se to děje? |
||
| Adam1999 Profil |
#3 · Zasláno: 19. 4. 2015, 12:06:47
|
||
| Bubák Profil |
Adam1999:
„na z-index vůbec nereaguje“ V CSS žádný pokus o z-index nevidím, nevím, co jsi dělal špatně. z-index funguje jen u elementů s deklarovaným position na jinou hodnotu, než static. Stačí přidat pro
#navbar > ul přidat deklaraci z-index: 1;
|
||
| Tomáš123 Profil |
#5 · Zasláno: 19. 4. 2015, 12:32:53
Adam1999:
Momentálne nemám možnosť overiť príčinu, ale myslím, že oba problémy vyrieši absolútne poziciovaná vysúvacia časť. Pravdepodobne bude potrebné trochu prekopať kód. Keď sa dostanem ku PC, napíšem podrobnejšie. |
||
| Adam1999 Profil |
#6 · Zasláno: 19. 4. 2015, 12:50:07
Bubák:
> Stačí přidat pro > #navbar > ul přidat deklaraci z-index: 1; Super opravdu ti funguje nechápu že jsem na to nemohl přijít děkuji. Ted jenom jestli by jste mi prosím pomohli vyřešit problém s tou šířkou. Děkuji. |
||
| Tomáš123 Profil |
#7 · Zasláno: 19. 4. 2015, 16:02:44
Adam1999:
„Ted jenom jestli by jste mi prosím pomohli vyřešit problém s tou šířkou.“ Ešte keby si bol trochu iniciatívnejší. Prečítaj si znovu môj príspevok [#5]. Vysúvacou časťou myslím prvok <ul> vysúvacieho menu. Kód nie je potrebné prekopávať, keďže používaš príliš konkrétne selektory...
|
||
|
Časová prodleva: 3 dny
|
|||
| Adam1999 Profil |
#8 · Zasláno: 22. 4. 2015, 19:20:16
Ano ale co mám udělat aby se šířka přizpůsobila?
|
||
| Tomáš123 Profil |
#9 · Zasláno: 22. 4. 2015, 21:28:55
Adam1999:
> „jak mám prosím udělat aby horní <li> zůstalo pořád stejné a roztáhlo se jen dropdown <ul>?“ > „Ano ale co mám udělat aby se šířka přizpůsobila?“ Nechápem. Ak chceš aby sa submenu nerozťahovalo nadradenú položku, použi absolútnu pozíciu. V opačnom prípade absolútnu pozíciu nepoužívaj. Mám za to, že bez JS sa šírky za použitia absolútneho poziciovania nebudú ovplyvňovať nikdy. Chcel by som ešte niečo dodať ku vlastnosti z-index. Má význam iba v prípade, keď ide o dva prvky s nestatickou pozíciou (na tie sa totiž nevzťahuje). V prípade prekrytia prvku s deklarovanou position: static (predvolená hodnota) akokoľvek inak poziciovaným elementom, bez ohľadu na pozíciu prvku v zdrojovom kóde, element vyhráva. Z-index sa teda používa na prebitie predvoleného správania nestatických prvkov:
– vyššie sa zobrazí vždy ten prvok, ktorý je nižšie v kóde (neskôr deklarovaný) – prekvapivo (pre mňa) majú všetky nestatické pozície rovnakú prioritu, takže na modifikáciu zobrazenia už je z-index naozaj potrebný
Živá ukážka správania. V tvojom prípade, nie je potrebné nič upravovať, lebo slider je v kóde neskôr a vyhral by. Submenu teda potrebuje pomoc z-indexu. Iba mi prišlo vhodné spísať, ako to je, aby si nebol prekvapený, prečo ten zázračný z-index nefunguje. Väčšinou je z-index tá druhá cesta. Pomáha rozmýšľanie a nepoužívanie zbytočne nestatických pozícii.
|
||
|
Časová prodleva: 9 let
|
|||
0