Eredmény: 1 - 7 (7) összesen

Téma: Lightbox gond

  1. #1
    LeRoy papys logója
    Csatlakozott
    07-05-14
    Hely
    London, United Kingdom, United Kingdom
    Hozzászólás
    1.464
    Thanked 1 Time in 1 Post

    Alapbeállítás Lightbox gond

    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?



  2. #2
    Chrome Ball Netallica logója
    Csatlakozott
    07-10-10
    Hely
    Győr
    Hozzászólás
    1.503
    Begyűjtött 44 köszönetet
    21 hozzászólásával

    Alapbeállítás re: Lightbox gond

    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).



  3. #3
    LeRoy papys logója
    Csatlakozott
    07-05-14
    Hely
    London, United Kingdom, United Kingdom
    Hozzászólás
    1.464
    Thanked 1 Time in 1 Post

    Alapbeállítás re: Lightbox gond

    Köszi, így már beugrott ezt már egyszer kérdeztem (csak hát öregszem és hamar felejtek )



  4. #4
    LeRoy papys logója
    Csatlakozott
    07-05-14
    Hely
    London, United Kingdom, United Kingdom
    Hozzászólás
    1.464
    Thanked 1 Time in 1 Post

    Alapbeállítás re: Lightbox gond

    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ó



  5. #5
    Chrome Ball Netallica logója
    Csatlakozott
    07-10-10
    Hely
    Győr
    Hozzászólás
    1.503
    Begyűjtött 44 köszönetet
    21 hozzászólásával

    Alapbeállítás re: Lightbox gond

    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.



  6. #6
    LeRoy papys logója
    Csatlakozott
    07-05-14
    Hely
    London, United Kingdom, United Kingdom
    Hozzászólás
    1.464
    Thanked 1 Time in 1 Post

    Alapbeállítás re: Lightbox gond

    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}




  7. #7
    Chrome Ball Netallica logója
    Csatlakozott
    07-10-10
    Hely
    Győr
    Hozzászólás
    1.503
    Begyűjtött 44 köszönetet
    21 hozzászólásával

    Alapbeállítás re: Lightbox gond

    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.



A téma címkéi:

Könyvjelzők

Hozzászólás szabályai

  • Új témákat nem hozhatsz létre
  • Válaszokat nem küldhetsz
  • Fájlokat nem csatolhatsz
  • A hozzászólásaidat nem módosíthatod
  •