PSD-Tutorials.de
Forum für Design, Fotografie & Bildbearbeitung
Tutkit
Agentur
Hilfe
Kontakt
Start
Forum
Aktuelles
Besonderer Inhalt
Foren durchsuchen
Tutorials
News
Anmelden
Kostenlos registrieren
Aktuelles
Suche
Suche
Nur Titel durchsuchen
Von:
Menü
Anmelden
Kostenlos registrieren
App installieren
Installieren
JavaScript ist deaktiviert. Für eine bessere Darstellung aktiviere bitte JavaScript in deinem Browser, bevor du fortfährst.
Du verwendest einen veralteten Browser. Es ist möglich, dass diese oder andere Websites nicht korrekt angezeigt werden.
Du solltest ein Upgrade durchführen oder einen
alternativen Browser
verwenden.
Antworten auf deine Fragen:
Neues Thema erstellen
Start
Forum
Bildbearbeitung (2D), Vektor- & Layoutbearbeitung
Mediengestaltung, Design & Typografie
Bilder werden von lightbox2 nicht immer korrekt positioniert
Beitrag
<blockquote data-quote="kodela" data-source="post: 2705655" data-attributes="member: 767972"><p>Hallo,</p><p></p><p>ich bin neu hier und habe mich angemeldet, weil ich hoffe, zu einem kleinen Problem, das ich mit <em><strong>lightbox2</strong></em> bei der Positionierung von Bildern habe, hier Hilfe zu bekommen.</p><p></p><p>Problembeschreibung:</p><p></p><p>Auf meiner <a href="http://kodela.w4f.eu/" target="_blank">Homepage</a> habe ich eine Seite, auf der ich mit Hilfe von <em><strong>lightbox2 </strong></em>einige meiner Bilder zeige. Das klappt eigentlich so wie ich es mir vorgestellt habe. Wo liegt dann das Problem:</p><p>Es klappt nur dann, wenn ich die Seite mit den Bildern vom Server aus aufrufe.</p><p></p><p>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.</p><p></p><p>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.</p><p></p><p>Ich arbeite mit Windows 10 und verwende den Firefox als Browser. Hier ist der Inhalt der von mir verwendeten html5_stylesheet.css Datei:</p><p></p><p>[SPOILER="CSS Document"]</p><p>@charset "utf-8";</p><p>/* CSS Document */</p><p></p><p>/*</p><p>* {</p><p> margin:0px;</p><p> padding:0px;</p><p>}</p><p>*/</p><p>body {/*background-color:#ffffff;*/</p><p> background-image:url(img/hg_355.gif);</p><p> color:#000000;</p><p> font-family:Verdana, Geneva, sans-serif;</p><p> margin:0px;</p><p>}</p><p> </p><p>body a {</p><p> /*color:#289c10;*/</p><p> color:#1003c5;</p><p>}</p><p></p><p>header {</p><p> background-color:#156e03;</p><p> color: #dddddd;</p><p> font-size: xx-large;</p><p> font-style:italic;</p><p> font-weight:bolder;</p><p> padding: 10px;</p><p> text-align:center;</p><p>}</p><p> </p><p>/* Reset Grundlayout.css bezüglich div-Elementen */</p><p>div {</p><p> height: auto;</p><p> border: none;</p><p> margin: 0;</p><p> padding: 0;</p><p> width: auto;</p><p>}</p><p> </p><p>#hilfscontainer {</p><p> margin:0px auto;</p><p> max-width:1080px;</p><p>}</p><p></p><p>aside {</p><p> float:left;</p><p> text-align:center;</p><p> width:22%;</p><p>}</p><p></p><p>nav {</p><p> margin-top:30px;</p><p> padding-bottom:20px;</p><p> padding-left:5px;</p><p> padding-right:5px;</p><p> padding-top:10px;</p><p> text-align:center;</p><p>}</p><p></p><p>main {</p><p> background-color:#ffffff;</p><p> background-image:url(img/hg_355.gif);</p><p> color: #000000;</p><p> float:left;</p><p> width:78%;</p><p> display: block;</p><p>}</p><p> </p><p>section {</p><p> padding-bottom:0px;</p><p>}</p><p></p><p>ul {</p><p> margin:0;</p><p> padding:0;</p><p> width:100%;</p><p> list-style-type:none;</p><p> font-size:10;</p><p>}</p><p></p><p>ol {</p><p> list-style-type: disc;</p><p> margin-left: 0px;</p><p>}</p><p></p><p>#bild {</p><p> float: left;</p><p> margin-top: 30px;</p><p> margin-bottom: 15px;</p><p>}</p><p></p><p>#inhalt {</p><p> margin-top: 40px;</p><p> margin-left: 250px;</p><p> height: 310px;</p><p>}</p><p></p><p>main h1 {</p><p> font-size: xx-large;</p><p> margin-bottom: 10px;</p><p> margin-top: 20px;</p><p>}</p><p></p><p>h2 {</p><p> color: #D00000;</p><p> font-size: 22pt;</p><p> font-style: normal;</p><p> font-weight: bold;</p><p> text-align: center;</p><p>} </p><p> </p><p>h4 {font-size: 0.8em;</p><p> margin-bottom: 10px;</p><p> margin-top: 0px;</p><p>} </p><p></p><p>article {</p><p> border: 2px solid grey;</p><p> border-radius:10px;</p><p> margin:10px;</p><p> padding-bottom:25px;</p><p> padding-left:20px;</p><p> padding-right:20px;</p><p> padding-top:10px;</p><p>}</p><p></p><p>footer {</p><p> background-color:#156e03;</p><p> clear:left;</p><p> color:#bbbbbb;</p><p> font-size:x-small;</p><p> font-style:italic;</p><p> /*font-weight:bolder;*/</p><p> padding-bottom:10px;</p><p> padding-top:10px;</p><p> text-align:center;</p><p> width: 100%;</p><p>}</p><p></p><p>img {</p><p> max-width:100%;</p><p> height:auto;</p><p>}</p><p></p><p>/*Buttons für das Hauptmenü*/</p><p>ul li a {</p><p> text-decoration:none;</p><p> font-size:1.0em;</p><p> font-weight: bold;</p><p> color:#eeeeee;</p><p> padding:8px 6px;</p><p> margin-bottom:15px;</p><p> margin-left: 5px;</p><p> background-color:#156e03;</p><p> display:block;</p><p> border-radius:10px 10px 10px 10px;</p><p> box-shadow: 0px 0px 0px 2px #dfac20;;</p><p>}</p><p></p><p></p><p>ul li a:visited {</p><p> color:#ffffff;</p><p>}</p><p>ul li a:hover, ul li .current {</p><p> color: #333333;</p><p> background-color:yellow;</p><p>}</p><p> </p><p>/* Trennstriche */</p><p>hr {</p><p> width: 100%;</p><p> height: 2px;</p><p> margin: 0 auto;</p><p> background: #dfac20;</p><p> margin-top: 0px;</p><p> margin-bottom: 20px;</p><p>}</p><p></p><p>/*Buttons für Bildanzeige*/</p><p>.button a {</p><p> text-align: center;</p><p> font-weight: bold;</p><p> display: flex;</p><p> text-decoration: none;</p><p> color: #1003c5;</p><p> margin-left: 40%;</p><p> margin-right: 40%;</p><p> padding:0.3em 0em;</p><p> justify-content: center;</p><p> background-color:#f1b510;</p><p> border-radius:12px;</p><p> /*X-Achse, Y-Achse, Verlauf, Stärke*/</p><p> box-shadow: 0px 0px 0px 2px #1003c5;</p><p> margin-bottom:20px;</p><p>}[/SPOILER]</p><p></p><p>Es wäre schön, wenn mir jemand helfen könnte.</p><p></p><p>Gruß, kodela</p></blockquote><p></p>
[QUOTE="kodela, post: 2705655, member: 767972"] Hallo, ich bin neu hier und habe mich angemeldet, weil ich hoffe, zu einem kleinen Problem, das ich mit [I][B]lightbox2[/B][/I] bei der Positionierung von Bildern habe, hier Hilfe zu bekommen. Problembeschreibung: Auf meiner [URL='http://kodela.w4f.eu/']Homepage[/URL] habe ich eine Seite, auf der ich mit Hilfe von [I][B]lightbox2 [/B][/I]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; }[/SPOILER] Es wäre schön, wenn mir jemand helfen könnte. Gruß, kodela [/QUOTE]
Bilder bitte
hier hochladen
und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Zitate einfügen…
Authentifizierung
Wenn ▲ = 5, ▼ = 2 und ■ = 7, was ist ▲ × ▼ + ■?
Antworten
Start
Forum
Bildbearbeitung (2D), Vektor- & Layoutbearbeitung
Mediengestaltung, Design & Typografie
Bilder werden von lightbox2 nicht immer korrekt positioniert
Oben