Erledigt - Bilder werden von lightbox2 nicht immer korrekt positioniert

[kodela]

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:

Spoiler: CSS Document

@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

 

[liselotte]

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

 

[kodela]

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

 

[kodela]

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