CSS überblendet

[jimbeem]

Hi Leute

Ich hab mir für Fotos eine Lightbox aus dem Internet gezogen, diese funktioniert ansich auch prima, doch wenn ich das Bild groß mache, legen sich die Navigationsreiter über das Bild.



Mit dem Befehl (direkt von der Site des Erstellers) dunkle ich den Hintergrund ab.

[COLOR=#800000]#overlay[/COLOR]{ [COLOR=#ff0000]background-image[/COLOR]: [COLOR=#0000ff]url(overlay.png)[/COLOR]; }
[COLOR=#800000]* html #overlay[/COLOR]{
    [COLOR=#ff0000]background-color[/COLOR]: [COLOR=#0000ff]#000[/COLOR];
    [COLOR=#ff0000]back\ground-color[/COLOR]: [COLOR=#0000ff]transparent[/COLOR];
    [COLOR=#ff0000]background-image[/COLOR]: [COLOR=#0000ff]url(blank.gif)[/COLOR];
    [COLOR=#ff0000]filter[/COLOR]: [COLOR=#0000ff]progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale")[/COLOR];
    }

Dies ist aus dem HTML.

[COLOR=#0000ff]<[COLOR=#800000]div[/COLOR] [COLOR=#ff0000]id[/COLOR]="header">
    <[COLOR=#800000]h1[/COLOR] [COLOR=#ff0000]id[/COLOR]="logo">Biograd <[COLOR=#800000]span[/COLOR] [COLOR=#ff0000]class[/COLOR]="green">kroatien</[COLOR=#800000]span[/COLOR]></[COLOR=#800000]h1[/COLOR]>
    <[COLOR=#800000]h2[/COLOR] [COLOR=#ff0000]id[/COLOR]="slogan">Urlaub bei Freunden...</[COLOR=#800000]h2[/COLOR]> 
    <[COLOR=#800000]ul[/COLOR]> <[COLOR=#800000]li[/COLOR] ><[COLOR=#800000]a[/COLOR] [COLOR=#ff0000]href[/COLOR]="../index.html"><[COLOR=#800000]span[/COLOR]>Home</[COLOR=#800000]span[/COLOR]></[COLOR=#800000]a[/COLOR]></[COLOR=#800000]li[/COLOR]>
      <[COLOR=#800000]li[/COLOR]><[COLOR=#800000]a[/COLOR] [COLOR=#ff0000]href[/COLOR]="../apart.html"><[COLOR=#800000]span[/COLOR]>Apartments</[COLOR=#800000]span[/COLOR]></[COLOR=#800000]a[/COLOR]></[COLOR=#800000]li[/COLOR]>
   <[COLOR=#800000]li[/COLOR]><[COLOR=#800000]a[/COLOR] [COLOR=#ff0000]href[/COLOR]="../broschuere.html"><[COLOR=#800000]span[/COLOR]>Brosch[COLOR=#ff0000]&uuml;[/COLOR]ren</[COLOR=#800000]span[/COLOR]></[COLOR=#800000]a[/COLOR]></[COLOR=#800000]li[/COLOR]>
   <[COLOR=#800000]li[/COLOR] [COLOR=#ff0000]id[/COLOR]="current"><[COLOR=#800000]a[/COLOR] [COLOR=#ff0000]href[/COLOR]="fotos.html"><[COLOR=#800000]span[/COLOR]>Fotos</[COLOR=#800000]span[/COLOR]></[COLOR=#800000]a[/COLOR]></[COLOR=#800000]li[/COLOR]>
  </[COLOR=#800000]ul>[/COLOR]
  </[COLOR=#800000]div[/COLOR]>
[/COLOR]

lg
Jimbeem

EDIT: Tztztz, immer diese Angst vor Viren, schätze mal es bringt nix wenn ich sage das nix drin ist.

Lightbox CSS:

#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#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: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
#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; outline: none;}   
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

Menüteil:

/* menu tabs */
#header ul {
 z-index: 999(999);
 position: absolute;
   margin:0; padding: 0;
   list-style:none;
 right: 0; 
 bottom: 6px !important; bottom: 5px;
 font: bold 13px  Arial, 'Trebuchet MS', Tahoma, verdana,  sans-serif; 
}
#header li {
   display:inline;
   margin:0; padding:0;
}
#header a {
   float:left;
   background: url(tableft.gif) no-repeat left top;
   margin:0;
   padding:0 0 0 4px;
   text-decoration:none;
}
#header a span {
   float:left;
   display:block;
   background: url(tabright.gif) no-repeat right top;
   padding:6px 15px 3px 8px;
   color: #FFF;

 

[threadi]

Deine Datei lade ich nicht runter. Zeig sowas online per Link. Allerdings habe ich bereits eine starke Vermutung woran es liegt. Die Lightbox blendet sich mittels absoluter Positionierung und z-index über den Inhalt der Seite. Der z-index scheint niedriger zu sein als der von deinem Menü. Die Lösung wäre, dass Du den z-index von deinem Menü verringerst. Vermutlich würde 999 schon reichen.

 

[jimbeem]

Wuhu das wars, 999 hat nicht gereicht, erst bei 99 gings weg.

Danke, auf sowas wär ich nie gekommen^^
Hab geglaubt da ist irgendwo ein Codeabschnitt der sagt das egal was ist, immer das Menü im Vordergrund ist.