Lightbox gond

**papys** · 2010-06-24, 21:05

olyan problémába ütköztem, hogy amikor a kép megjelenik lightboxban akkor az oldal vízszintes menüje alá kerül a kép. Hogyan lehetne elérni hogy a lightboxos kép legyen legelöl? és takarja el teljesen a templétet?

Hasonló témák:

**Netallica** · 2010-06-24, 21:16

A z-indexet kell adnod a menünek css-ben. Nézd meg, hogy lightbox-nak mekkora a z-index értéke és annál nagyobbat adj meg a menünek is, de figyelj rá, hogy a menünél ez csak akkor működik ha pozicionálva van (mondjuk position: relative) és némely böngészőnél lehet, hogy igazítanod is kell (mondjuk float: left).

**papys** · 2010-06-24, 21:19

Köszi, így már beugrott

ezt már egyszer kérdeztem (csak hát öregszem és hamar felejtek

)

**papys** · 2010-06-24, 21:29

ez nem akar összejönni.

a templét menünek 10000 a z-indexe a lightboxé meg 100, ha ezt megemelem 100000-re se lesz jó

**Netallica** · 2010-06-24, 21:32

A Firefox nem szereti azt sem ha túl sok a z-index, próbáld csak ezerre tenni a menüt. Ha így sem jó akkor nagy eséllyel a menü nincs pozicionálva, illetve igazítva ahogy fentebb írtam. Template esetében még az is elképzelhető, hogy nem is egy div-ben van benne, ezt csak te látod.

**papys** · 2010-06-24, 21:44

ez a lightbox

Kód:

#lightbox {
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 1000;
    text-align: center;
    line-height: 0;
}
#lightbox a img{ border: none; }
#outerImageContainer{
    position: relative;
    background-color: #fff;
    width: 250px;
    height: 250px;
    margin: 0 auto;
}
#imageContainer{
    padding: 10px;
}
#loading{
    position: absolute;
    top: 40%;
    left: 0%;
    height: 25%;
    width: 100%;
    text-align: center;
    line-height: 0;
}
#hoverNav{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1000;
}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{
    width: 49%;
    height: 100%;
    background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
    display: block;
}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#imageDataContainer{
    font: 10px Verdana, Helvetica, sans-serif;
    background-color: #fff;
    margin: 0 auto;
    line-height: 1.4em;
    overflow: auto;
    width: 100%
}
#imageData{    padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold;    }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;    }
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;    }
#overlay{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 900;
    width: 100%;
    height: 500px;
    background-color: #000;
}

ez meg a menü

Kód:

#menu_holder_llight, 
#menu_holder_ldark{width:100%; position:relative; z-index:10000}
#menu_holder_rlight, 
#menu_holder_rdark{padding:10px 1px 10px 1px; position:relative; z-index:10000}
#top_menu{width:100%; margin:0 auto; display:block; position:relative; z-index:10000}
#horiznav{height:37px; z-index:500; float:none}
#horiznav ul{list-style:none; line-height:37px; padding-top:0px}
#horiznav ul li{position:relative; margin:0}
#horiznav a{text-transform:uppercase; display:block; cursor:pointer; height:37px; padding:0px 0px 0px 26px; margin:0px 0px 0px 0px; font:bold 9px/35px Verdana,Arial,Helvetica,sans-serif}
#horiznav li a:hover{height:37px}
#horiznav li{float:left; padding:0; padding:0px 26px 0px 0px}
#horiznav ul ul a{background:none}
#horiznav ul ul{border:none}
#horiznav li li a{font-weight:normal; padding:0 0px 0 0px; margin:0; height:32px; line-height:32px; text-indent:5px}
#horiznav ul ul a{display:block; text-decoration:none; text-transform:uppercase; height:auto; font-weight:bold}
#horiznav li li{padding:0; background:none}
#horiznav li li{float:left; padding:0}
#horiznav li:hover, #horiznav li.sfHover{left:0}
#horiznav ul ul a:hover{background:none; height:auto; line-height:32px; padding:0 0px 0 0px; margin:0}
#horiznav li ul{position:absolute; left:-999em; height:auto; font-weight:normal; border-width:0; margin:0px 0 0 0px; padding:0; border-bottom:none}
#horiznav li:hover, #horiznav li.sfHover{position:static}
#horiznav li:hover ul ul, #horiznav li:hover ul ul ul, #horiznav li:hover ul ul ul ul,  #horiznav li.sfHover ul ul, #horiznav li.sfHover ul ul ul, #horiznav li.sfHover ul ul ul ul{left:-999em}
#horiznav li:hover ul, #horiznav li li:hover ul, #horiznav li li li:hover ul, #horiznav li li li li:hover ul, #horiznav li.sfHover ul, #horiznav li li.sfHover ul, #horiznav li li li.sfHover ul, #horiznav li li li li.sfHover ul{z-index:10000; left:auto}
#horiznav ul ul li a{border-right:none}
#horiznav ul li:hover li:hover, #horiznav ul li#current ul li a, #horiznav ul li#current ul li, #horiznav ul li#current ul li a:hover, #horiznav ul li#current ul li.hover, #horiznav li.haschild:hover li span, #horiznav li.haschild.sfHover li span, #horiznav li.sfHover li span, #horiznav ul li li a, #horiznav ul li.haschild li#current a, #horiznav ul li.haschild li#current, #horiznav ul li.sfHover li.sfHover, #horiznav ul li ul li a:hover, #horiznav ul li ul li:hover, #horiznav ul li ul li.sfHover{background-image:none}
#horiznav li ul ul{margin:-32px 0 0 173px}
#horiznav ul li:hover li a, #horiznav ul li.sfHover li a{background-image:none}
#horiznav ul ul a, #horiznav li ul{width:173px}
#horiznav li li, #horiznav li.haschild ul li#current:hover, #horiznav li.haschild ul li#current.sfHover{width:173px}

#top_menu_d{width:100%; margin:0 auto; display:block; position:relative; z-index:100}
#horiznav_d{height:37px; position:relative; display:block; position:relative; padding:0px; margin:0px; overflow:hidden; background-color:#dbdbdb}
#horiznav_d a{white-space:nowrap; display:block; float:left; text-transform:uppercase; cursor:pointer; height:37px; padding:0px 26px 0px 26px; margin:0px 0px 0px 0px; font:bold 9px/35px Verdana,Arial,Helvetica,sans-serif}
#horiznav_d ul{margin:0; padding-top:0px; line-height:37px; float:left}
#horiznav_d ul ul ul{left:-20000px}
#horiznav_d li{padding:0; margin:0 0px 0 0; float:left; display:block}
#horiznav_d li ul{display:none; margin:0 auto; padding:0; position:absolute; top:37px; height:37px; overflow:hidden; left:0; width:100%}
#horiznav_d li a span, #horiznav_d li .separator span{display:block; padding:0}
#horiznav_d li ul a, #horiznav_d li.active ul a{display:block; float:left; font-weight:normal; padding:0 10px; background:none; height:37px; line-height:37px}
#horiznav_d li.active ul{display:block}
#horiznav_d li:hover ul, #horiznav_d li.sfHover ul{display:block; z-index:600}
#horiznav_d li a, #horiznav_d li .separator{font:bold  9px/35px Verdana,Arial,Helvetica,sans-serif; text-transform:uppercase}
#horiznav_d li li{background:none}

**Netallica** · 2010-06-24, 21:52

Ez így önmagában kevés mert nem derül ki, hogy melyik a menüben a fő div, lehet akár a #top_menu_d is és akkor oda kell a nagyobb z-index. Meg ilyeneknél látni kell az oldalt is és a forrást is mert lehet, hogy bár úgy tűnik, de nem az egész menü takarja ki a képet hanem csak egy része. S azt sem tudom, hogy a float-os részt amit írtam kipróbáltad-e.

Szóval ez kevés és elég játékos dolog megcsinálni, el lehet vele küszködni mert néhány lightbox ráadásul a js-ben is belemacerál a stílus elemekbe és felülírja amit eredetileg megadsz. Azt javaslom próbálgassad végig amit lehet.