zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden scheitere am Verschieben eines DIV

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 06.11.2016, 22:49
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.11.2016
Beiträge: 2
siggi befindet sich auf einem aufstrebenden Ast
Frage scheitere am Verschieben eines DIV

Hallo zusammen,
ich soll auf der Website meines Sohnes, die eine Image-Galerie anzeigt (Galerie: Responsive Image Gallery with Thumbnail Carousel) eigentlich einfach nur die Reihenfolge von Galeriebilder und groß angezeigtem Detailbild tauschen (Galerie unter Detail statt über Detail). Ich scheitere aber kläglich, weil ich nicht herausfinde, wie und warum das <div class="rg-image-wrapper"> genau an dieser Stelle angezeigt wird - die nachfolgenden Codeschnipsel helfen hoffentlich meine Frage zu verstehen.

Die Seite ist MG-Pictures, Fotograf aus Lollar. Dort mal auf eines der großen Vorschaubilder für die Kategorie klicken (z.B. Archiktektur), dann wird deutlich was ich meine.

Im HTML-Code der Seite wird nur (hier verkürzt wiedergegben) folgende Struktur erzeugt:
HTML-Code:
<div id="rg-gallery" class="rg-gallery">
	<div class="rg-thumbs"><!-- Elastislide Carousel Thumbnail Viewer -->
		<div class="es-carousel-wrapper">
			<div class="es-nav"> 
				...
			</div>
			<div class="es-carousel">
				...
			</div> <!-- End class="es-carousel" -->
		</div> <!-- End class="es-carousel-wrapper" -->
	</div> <!-- End rg-thumbs Elastislide Carousel Thumbnail Viewer --> 
</div> 	<!-- rg-gallery -->
Wenn die Seite angezeigt wird, ergibt sich aber folgende Struktur:
HTML-Code:
<div id="rg-gallery" class="rg-gallery"><div class="rg-view"><a href="#" class="rg-view-full"></a><a href="#" class="rg-view-thumbs rg-view-selected"></a></div>
	<div class="rg-thumbs"><!-- Elastislide Carousel Thumbnail Viewer -->
		<div class="es-carousel-wrapper">
			<div class="es-nav"> 
				...
			</div>
			<div class="es-carousel">
				...
			</div> <!-- End class="es-carousel" -->
		<div class="es-nav"><span class="es-nav-prev" style="display: none;">Previous</span><span class="es-nav-next">Next</span></div></div> <!-- End class="es-carousel-wrapper" -->
	</div> <!-- End rg-thumbs Elastislide Carousel Thumbnail Viewer --> 
	<div class="rg-image-wrapper">           
	...hier noch mehr elemente aber für die Frage nicht relevant
	</div>
</div> 	<!-- rg-gallery -->
Irgendwie kommt da noch das <div class="rg-image-wrapper"> dazu und wenn das nicht NACH, sondern VOR rg-thumbs käme, wären die beiden Elemente wohl so vertauscht wie ich das möchte (glaube ich zumindest...).

Es gibt auch ein Stückchen Javascript (<script id="img-wrapper-tmpl" type="text/x-jquery-tmpl">) im Header der Seite, das erzeugt diese Divs bzw. Klasse, aber welcher Code sorgt dafür, dass das UNTER der Galerie eingefügt wird?

Wenn mir jemand erklären kann, warum das div "rg-image-wrapper" an dieser Stelle auftaucht, dann finde ich selbst raus, wie ich es an eine andere Stelle bekomme .

Über den Link Responsive Image Gallery with Thumbnail Carousel sind auch die CSS-Dateien und die js-Bibliothek verfügbar. Eigentlich ist die Anleitung dort recht gut, hilft mir aber nicht bei meiner Frage.

Vielen Dank schon mal
Siggi
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 07.11.2016, 00:49
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Zitat:
Wenn mir jemand erklären kann, warum das div "rg-image-wrapper" an dieser Stelle auftaucht, dann finde ich selbst raus, wie ich es an eine andere Stelle bekomme
Keine Ahnung. Das hat nichts mit HTML / CSS zu tun. Da müsstest du denjenigen fragen, der sich das unselige JavaScript ausgedacht hat. Zumal das nicht mal vom Ersteller der Image Gallery stammt.

Eingriffe in die Bedienung des Browsers gehen gar nicht. Die ehrlichen Besucher bekommen Probleme, die dunklen Gestalten interessieren solche Sperren nicht mal ansatzweise. Vor 20 Jahren waren solche "Lösungen" mal groß in Mode - Die damit geschützten Seiten sind dann mangels Besuchern aber ganz schnell ausgestorben.

Die bewährte Grundregel lautet: Was nicht geklaut werden soll kommt gar nicht erst ins Internet. Einfach, sicher, benutzerfreundlich.

Aber zu deinem Problem: Entscheidend ist im Endeffekt nicht wie die großen Bilder dorthin gelangen, sondern der fertige Quelltext im Browser. Der kann mittels CSS gestaltet werden.

In deinem Fall bietet sich Flexbox als Lösung an. Zum Beispiel folgendes in die style.css einfügen:

Code:
.rg-gallery {
   display: flex;
   flex-direction: column;
}
.rg-thumbs {
   order: 1;
   margin-top: 20px
}
Wobei margin-top nicht zu Flexbox gehört sondern der Optik (Abstand) dient und natürlich noch angepasst werden kann.

Gruss

MrMurphy

Geändert von MrMurphy (07.11.2016 um 01:02 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 07.11.2016, 09:10
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.11.2016
Beiträge: 2
siggi befindet sich auf einem aufstrebenden Ast
Standard

Hallo
danke, der Tipp mit der flexbox hat wunderbar funktioniert .
Siggi
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Fragen zu CSS und Joomla DOKTOR CSS 2 23.05.2011 20:29
Brauche Hilfe: Schwarzes Nichts Zwox CSS 10 19.11.2010 17:53
Header entfernen tripple CSS 17 15.06.2010 16:41
Schriftfarbe in den Eintragungsfeldern von jforms Steveislucky CSS 2 16.03.2010 11:59
CSS Text nebeinander? carstiee09 CSS 13 13.11.2009 20:18


Alle Zeitangaben in WEZ +2. Es ist jetzt 21:54 Uhr.