Ergebnis 1 bis 5 von 5

Thema: Lightbox 2 / Hab mal ne Frage...

  1. #1
    HTML Newbie
    Registriert seit
    27.07.2010
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Lightbox 2 / Hab mal ne Frage...

    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-Code:
    <!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>
    CSS file
    HTML-Code:
    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;
                                     }
    BITTE HELFT MIR!


    lg



    EDIT: Tut mir leid der titel ist nich ganz passend^^
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Geändert von pmDesign (27.07.2010 um 20:39 Uhr)

  2. #2
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    569
    Danke
    0
    Bekam 66 mal "Danke" in 64 Postings

    Standard AW: Lightbox 2 / Hab mal ne Frage...

    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

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    27.07.2010
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Lightbox 2 / Hab mal ne Frage...

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

    lg

  4. #4
    HTML Newbie
    Themenstarter

    Registriert seit
    27.07.2010
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Lightbox 2 / Hab mal ne Frage...

    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

  5. #5
    HTML Newbie
    Themenstarter

    Registriert seit
    27.07.2010
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Lightbox 2 / Hab mal ne Frage...

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

Ähnliche Themen

  1. Problem mit der Bilderdarstellung in Lightbox
    Von xmatthias im Forum HTML & CSS Forum
    Antworten: 16
    Letzter Beitrag: 30.05.2010, 00:11
  2. Frage zu lightbox
    Von xmatthias im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 26.05.2010, 19:51
  3. Lightbox
    Von kyr im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 27.07.2009, 21:46
  4. Lightbox problem...
    Von radeon55 im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 4
    Letzter Beitrag: 30.06.2008, 13:00
  5. lightbox in iFrame!?
    Von Tamira im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 19.03.2008, 19:42

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •