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>
a zde css:
#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;
}
Jak říkám na z-index vůbec nereaguje :(.
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
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
Omlouvám se..
Zde je odkaz.
Děkuji.
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
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
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
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...
Adam1999
Profil
Ano ale co mám udělat aby se šířka přizpůsobila?
Tomáš123
Profil
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.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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