[Erledigt] Bilder werden von lightbox2 nicht immer korrekt positioniert

Erledigt - Bilder werden von lightbox2 nicht immer korrekt positioniert | PSD-Tutorials.de

Erstellt von kodela, 03.02.2019.

  1. kodela

    kodela Noch nicht viel geschrieben

    Dabei seit:
    02.02.2019
    Beiträge:
    11
    Bilder werden von lightbox2 nicht immer korrekt positioniert
    Hallo,

    ich bin neu hier und habe mich angemeldet, weil ich hoffe, zu einem kleinen Problem, das ich mit lightbox2 bei der Positionierung von Bildern habe, hier Hilfe zu bekommen.

    Problembeschreibung:

    Auf meiner Homepage habe ich eine Seite, auf der ich mit Hilfe von lightbox2 einige meiner Bilder zeige. Das klappt eigentlich so wie ich es mir vorgestellt habe. Wo liegt dann das Problem:
    Es klappt nur dann, wenn ich die Seite mit den Bildern vom Server aus aufrufe.

    Ich habe natürlich meine Homepage gespiegelt auch auf meinem Rechner, um einfacher die Ergebnisse von Änderungen prüfen zu können. Lasse ich mir die Bilder von der Seite auf meinem Rechner zeigen, werden die Bilder der ersten Sektion immer richtig positioniert. Ab der zweiten Sektion ist vor den Bildern jedoch in den meisten Fällen ein schwarzer Querstreifen, der eine Höhe von etwas mehr als 200 Pixel hat. Normalerweise hat der Rand oberhalb des Bildes eine Breite von 20 Pixel.

    Die Sache stört mich vor allem deshalb, weil ich mir ja nicht sicher sein kann, dass auch bei einem Aufruf meiner Hompage vom Server die Anzeige immer korrekt ist.

    Ich arbeite mit Windows 10 und verwende den Firefox als Browser. Hier ist der Inhalt der von mir verwendeten html5_stylesheet.css Datei:

    @charset "utf-8";
    /* CSS Document */

    /*
    * {
    margin:0px;
    padding:0px;
    }
    */
    body {/*background-color:#ffffff;*/
    background-image:url(img/hg_355.gif);
    color:#000000;
    font-family:Verdana, Geneva, sans-serif;
    margin:0px;
    }

    body a {
    /*color:#289c10;*/
    color:#1003c5;
    }

    header {
    background-color:#156e03;
    color: #dddddd;
    font-size: xx-large;
    font-style:italic;
    font-weight:bolder;
    padding: 10px;
    text-align:center;
    }

    /* Reset Grundlayout.css bezüglich div-Elementen */
    div {
    height: auto;
    border: none;
    margin: 0;
    padding: 0;
    width: auto;
    }

    #hilfscontainer {
    margin:0px auto;
    max-width:1080px;
    }

    aside {
    float:left;
    text-align:center;
    width:22%;
    }

    nav {
    margin-top:30px;
    padding-bottom:20px;
    padding-left:5px;
    padding-right:5px;
    padding-top:10px;
    text-align:center;
    }

    main {
    background-color:#ffffff;
    background-image:url(img/hg_355.gif);
    color: #000000;
    float:left;
    width:78%;
    display: block;
    }

    section {
    padding-bottom:0px;
    }

    ul {
    margin:0;
    padding:0;
    width:100%;
    list-style-type:none;
    font-size:10;
    }

    ol {
    list-style-type: disc;
    margin-left: 0px;
    }

    #bild {
    float: left;
    margin-top: 30px;
    margin-bottom: 15px;
    }

    #inhalt {
    margin-top: 40px;
    margin-left: 250px;
    height: 310px;
    }

    main h1 {
    font-size: xx-large;
    margin-bottom: 10px;
    margin-top: 20px;
    }

    h2 {
    color: #D00000;
    font-size: 22pt;
    font-style: normal;
    font-weight: bold;
    text-align: center;
    }

    h4 {font-size: 0.8em;
    margin-bottom: 10px;
    margin-top: 0px;
    }

    article {
    border: 2px solid grey;
    border-radius:10px;
    margin:10px;
    padding-bottom:25px;
    padding-left:20px;
    padding-right:20px;
    padding-top:10px;
    }

    footer {
    background-color:#156e03;
    clear:left;
    color:#bbbbbb;
    font-size:x-small;
    font-style:italic;
    /*font-weight:bolder;*/
    padding-bottom:10px;
    padding-top:10px;
    text-align:center;
    width: 100%;
    }

    img {
    max-width:100%;
    height:auto;
    }

    /*Buttons für das Hauptmenü*/
    ul li a {
    text-decoration:none;
    font-size:1.0em;
    font-weight: bold;
    color:#eeeeee;
    padding:8px 6px;
    margin-bottom:15px;
    margin-left: 5px;
    background-color:#156e03;
    display:block;
    border-radius:10px 10px 10px 10px;
    box-shadow: 0px 0px 0px 2px #dfac20;;
    }


    ul li a:visited {
    color:#ffffff;
    }
    ul li a:hover, ul li .current {
    color: #333333;
    background-color:yellow;
    }

    /* Trennstriche */
    hr {
    width: 100%;
    height: 2px;
    margin: 0 auto;
    background: #dfac20;
    margin-top: 0px;
    margin-bottom: 20px;
    }

    /*Buttons für Bildanzeige*/
    .button a {
    text-align: center;
    font-weight: bold;
    display: flex;
    text-decoration: none;
    color: #1003c5;
    margin-left: 40%;
    margin-right: 40%;
    padding:0.3em 0em;
    justify-content: center;
    background-color:#f1b510;
    border-radius:12px;
    /*X-Achse, Y-Achse, Verlauf, Stärke*/
    box-shadow: 0px 0px 0px 2px #1003c5;
    margin-bottom:20px;
    }

    Es wäre schön, wenn mir jemand helfen könnte.

    Gruß, kodela
     
    #1      
  2. TutKit

    TutKit Vollzugriff

    Vollzugriff auf sämtliche Inhalte für Photoshop, InDesign, Affinity, 3D, Video & Office

    Suchst du einen effektiven Weg, um deine Geschäftsideen aber auch persönlichen Kenntnisse zu fördern? Teste unsere Lösung mit Vollzugriff auf Tutorials und Vorlagen/Erweiterungen, die dich schneller zum Ziel bringen. Klicke jetzt hier und teste uns kostenlos!

  3. liselotte

    liselotte Bärliner Jung

    423
    Dabei seit:
    04.04.2006
    Beiträge:
    9.929
    Geschlecht:
    männlich
    Ort:
    Berlin
    Software:
    PH, InD, Illu, CS3 XP WIN7 & CS 6,WIN10 CC 18-19, 2020
    Kameratyp:
    Nikon D5000; Canon IXUS; Nikon AW 100
    Bilder werden von lightbox2 nicht immer korrekt positioniert
    Ja die Box macht was sie will (Jemen, Jordanien) Greek geht gar nicht
    Nach ein paar versuchen stellt er es dann richtig dar
    Getestet auf Firefox und Chrome genau so
    liegt evtl an der Lightbox
    MfG
     
    #2      
  4. kodela

    kodela Noch nicht viel geschrieben

    Dabei seit:
    02.02.2019
    Beiträge:
    11
    Bilder werden von lightbox2 nicht immer korrekt positioniert
    Das mit "Greek" ok. Ich habe in meinem ersten Entwurf geschrieben, dass die Bildalben im Aufbau seien. "Greek" kann also nicht funktionieren. Dieser erste Entwurf war plötzlich weg, nachdem ich zwischendurch in einem anderen Tab etwas nachgesehen habe. Musste alles neu schreiben und vergaß dabei auf diesen Hinweis.

    Du meinst, es "Liegt evtl an der Lightbox". Was schlägst Du vor, was man dagegen machen sollte?

    Gruß, kodela
     
    #3      
  5. kodela

    kodela Noch nicht viel geschrieben

    Dabei seit:
    02.02.2019
    Beiträge:
    11
    Bilder werden von lightbox2 nicht immer korrekt positioniert
    Hallo,

    mein Problem hing damit zusammen, dass ich über lightbox.option() die Option disableScrolling aktiviert hatte, mit anderen Worten, ich hatte das Scrollen für die Bildanzeige deaktiviert.

    Seitdem ich diese Option herausgenommen habe, gibt es kein Problem mehr mit der Anzeige. Allerdings wird nun für die Höhenanzeige der Scrollbalken eingeblendet, was völlig überflüssig ist.

    Gruß, kodela
     
    #4      
    liselotte gefällt das.
Seobility SEO Tool
x
×
×