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?
Printable View
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?
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).
Köszi, így már beugrott :) ezt már egyszer kérdeztem (csak hát öregszem és hamar felejtek :huh: )
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ó
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.
ez a lightbox
ez meg a menü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;
}
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}
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.