Lightbox 2 / Hab mal ne Frage...

pmDesign

So ich war schon in einem anderen Forum aber irgendwie gehts da nur schleppend vorwärts....
Mein Problem ist folgendes.
Ich habe auf meiner Seite unter Artworks 2 Banner. Wenn auf diese Banner klickt öffnet sich per Lightbox dan die jeweilige Gallerie.
Das Funktioniert auch aber leider nur unter Firefox!
Im IE und Opera wird der zweite Banner nämlich dooferweise nicht angezeigt!
Leider weiß ich nicht warum.
Hoffe hier kann mir jemand helfen..
Der Link um das ganze nachzuvollziehen: http://pmdesign.cwsurf.de/index.html

HTML file

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


<html>
                 <head>
                 <title>pmDesign - Artworks</title>


                         <script type="text/javascript" src="js/prototype.js"></script>
                         <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
                         <script type="text/javascript" src="js/lightbox.js"></script>


                 <link rel="stylesheet" type="text/css" href="mycss.css">
                 </head>








<body>




         <div id="header"><img src="img/header.jpg" alt="header"></div>
         <div id="left_side"><img src="img/left_side.jpg" alt="left_side"></div>
         <div id="right_side"><img src="img/right_side.jpg" alt="right_side"></div>




                 <div id="navigation">










                 <div id="navigation_home"><a href="index.html"><img src="img/home_grey.jpg"
                                 onmouseover="this.src='img/home_darkgrey.jpg'"
                                 onmouseout="this.src='img/home_grey.jpg'" border="0" alt="home button"></a></div>


                 <div id="navigation_profil"><a href="profil.html"><img src="img/profil_grey.jpg"
                                 onmouseover="this.src='img/profil_darkgrey.jpg'"
                                 onmouseout="this.src='img/profil_grey.jpg'" border="0" alt="profil button"></a></div>


                 <div id="navigation_artworks"><a href="artworks.html"><img src="img/artworks_grey.jpg"
                                 onmouseover="this.src='img/artworks_darkgrey.jpg'"
                                 onmouseout="this.src='img/artworks_grey.jpg'" border="0" alt="artworks button"></a></div>


                 <div id="navigation_partner"><a href="partner.html"><img src="img/partner_grey.jpg"
                                 onmouseover="this.src='img/partner_darkgrey.jpg'"
                                 onmouseout="this.src='img/partner_grey.jpg'" border="0" alt="partner button"></a></div>


                 <div id="navigation_kontakt"><a href="kontakt.html"><img src="img/kontakt_grey.jpg"
                                 onmouseover="this.src='img/kontakt_darkgrey.jpg'"
                                 onmouseout="this.src='img/kontakt_grey.jpg'" border="0" alt="kontakt button"></a></div>






                 </div>






         <div id="copyright">© www.pmDesign.de - 2010</div>
         <div id="impressum"> <a href="impressum.html"> Impressum </a> </div>










         <div id="inhalt">
         <h3>Wilkommen in meiner Gallerie</h3>
         <p>Klicken Sie auf einen der Banner um zur jeweiligen Gallerie zu gelangen!</p>




         <div id="pixelcars_gallerie"><a href="images/image-1.png" rel="lightbox[gallerie1]" title="Beispielbild 1">
                                 <img src="img/pixelcars_gallerie_no_mouseover.png"
                                 onmouseover="this.src='img/pixelcars_gallerie_mouseover.png'"
                                 onmouseout="this.src='img/pixelcars_gallerie_no_mouseover.png'" alt="pixelcars gallerie banner"></a></div>


                                 <a href="images/image-2.png" rel="lightbox[gallerie1]" title="Beispielbild 2"></a>


         <div id="photography_gallerie"><a href="images2/image-1.jpg" rel="lightbox[gallerie2]" title="Beispielbild 1"
                                 <img src="img/photography_gallerie_no_mouseover.png"
                                 onmouseover="this.src='img/photography_gallerie_mouseover.png'"
                                 onmouseout="this.src='img/photography_gallerie_no_mouseover.png'" alt="photography gallerie banner"></a><div>


                                 <a href="images2/image-2.jpg" rel="lightbox[gallerie2]" title="Beispielbild 2"></a>
                                 <a href="images2/image-3.jpg" rel="lightbox[gallerie2]" title="Beispielbild 3"></a>
         </div>
















</body>
</html>

Alles anzeigen

CSS file

HTML

body {
                                 background-color: black;
                                 font-family: Arial, Helvetica, sans-serif;
                                 font-size: 12px;
                                 }






#header {
                                 width: 800px;
                                 height: 150px;
                                 background-repeat: no-repeat;
                                 margin: 0px auto;
                                 }




#left_side {                     top:158px;
                                 width:100px;
                                 height:40px;
                                 position: absolute; left: 50%; margin-left:-300px;
                                 }


#right_side {                    top:158px;
                                 width:100px;
                                 height:40px;
                                 position: absolute; left: 50%; margin-left:250px;
                                 }




#navigation_home {
                                 top:158px;
                                 width:100px;
                                 height:40px;
                                 position: absolute; left: 50%; margin-left:-250px;
                                 }


#navigation_profil {
                                 top:158px;
                                 width:100px;
                                 height:40px;
                                 position: absolute; left: 50%; margin-left:-150px;
                                 }


#navigation_artworks {
                                 top:158px;
                                 width:100px;
                                 height:40px;
                                 position: absolute; left: 50%; margin-left:-50px;
                                 }


#navigation_partner {
                                 top:158px;
                                 width:100px;
                                 height:40px;
                                 position: absolute; left: 50%; margin-left:50px;
                                 }


#navigation_kontakt {
                                 top:158px;
                                 width:100px;
                                 height:40px;
                                 position: absolute; left: 50%; margin-left:150px;
                                 }


#inhalt {
                                 padding:15px;
                                 margin-top:42px;
                                 margin-left:413px;
                                 height:350px;
                                 width:470px;
                                 background-image:url(img/text_background.jpg);
                                 position: absolute; left: 50%; margin-left:-250px;
                                 overflow: scroll;
                                 }


#copyright {
                                 text-align: left;
                                 font-size:10px;
                                 font-family: Arial, Helvetica, sans-serif;
                                 color: #707070;
                                 top:580px;
                                 position: absolute; left: 50%; margin-left:-300px;
                                 }


#impressum a {
                                 text-align: right;
                                 font-size:10px;
                                 font-family: Arial, Helvetica, sans-serif;
                                 text-decoration:none;
                                 color: #707070;
                                 top:580px;
                                 position: absolute; right: 50%; margin-right:-300px;
                                 }


#inhalt a {
                                 text-decoration:none;
                                 color: #707070;
                                 top:580px;
                                 }


#inhalt h3 {
                                 background-image:url(img/pfeil.jpg);
                                 padding-left: 15px;
                                 background-repeat : no-repeat;
                                 }


#pixelcars {
                                 width: 400px;
                                 height: 100px;
                                 margin: 0px auto;
                                 }


#vtuning {                       width: 400px;
                                 height: 100px;
                                 padding: 20px;
                                 margin: 0px auto;
                                 }


#pixelcars_gallerie {
                                 width: 400px;
                                 height: 100px;
                                 margin: 0px auto;
                                 padding: 10px;
                                 }


#photography_gallerie {
                                 width: 400px;
                                 height: 100px;
                                 margin: 0px auto;
                                 padding: 20px;
                                 }


form {
                                 width: 300px;
                                 padding: 20px;
                                 margin: 0px auto;
                                 }


label {
                                 display: block;
                                 }


input#absender,
textarea {
                                 width: 300px;
                                 border: 1px solid #707070;
                                 margin-bottom: 10px;
                                 }


textarea {
                                 height: 150px;
                                 }


#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);
                                 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;
                                 }

Alles anzeigen

BITTE HELFT MIR!

lg

EDIT: Tut mir leid der titel ist nich ganz passend^^

MrMurphy

Hallo,

ich sehe im Quelltext auf der verlinkten Seite zwei Fehler:

1. Beim

<a href="images2/image-1.jpg" rel="lightbox[gallerie2]" title="Beispielbild 1"

fehlt das schließende >

2. Das letze <div> muss wohl eher ein </div> sein. Sonst öffnest du nämlich mehr divs als du schließt.

Gruss

MrMurphy

pmDesign

Danke daran lags!
Da hätte ich auch selbst drauf kommen können^^

lg

pmDesign

Hallo ich noch einmal^^
Also es funktioniert jetzt alles sehr gut mit der Seite nur eine Sache stört mich.
Ich möchte die Seite für firefox, opera, chrome und IE optimieren.
Das klappt auch sehr gut jeder browser gibt die Seite richtig wieder.
Außer Internet Explorer!
Klickt mal bitte auf meine Seite ( http://pmdesign.cwsurf.de/artworks.html ) und dan auf Pixelcars. Es öffnet sich dan die Lightbox. Am unteren Bildschirmrand zeigt der IE jetzt so einen hässlichen weißen Rand! WARUM?

Das ist das einziges Problem was ich noch hätte dan ist die Seite fertig

Bitte helft mir!^^

lg

pmDesign

Hallo hat da den keiner ne Idee???? ....

Tags