Wirkungsbereich von input und id

[BlackHell]

Moin!
Ich möchte eine Gallerie aus reinem HTML und CSS erstellen.
Entweder mit vor/zurück Schaltflächen oder mit Thumbnails oder beides zusammen.
Die Anzahl der Bilder ist unterschiedlich und auch die Ausmaße derer kann unterschiedlich sein.
Ich habe 2 Flex-Container die je 50% Breite haben. In dem einen steht Text und in dem anderen die Bilder.
Bei mobilgeräten wird erst der Text und dann die Bilder angezeigt. Bei Desktop, Tablet usw. möchte ich das anders haben.
Da die unterschiedliche Anzahl der Bilder auf der einen Seite den Text überragt, scrollt man somit immer eine Hälfte Bilder und auf der anderen ist der Text schon längst fertig.
Also dachte ich an eine Gallerie mit input type=radio.
Dazu habe ich die Bildhälfte nochmals unterteilt in eine Thumb (10% der restlichen Breite) und eine Bilder (90% Breite).
Wenn ich im Thumb Bereich nun mit <label> und <input> arbeite, kann ich, wenn ich im css auf :checked prüfe, die zugehörige id im Bild bereich nicht ansprechen.

Beispiel:

<div class="Beschreibung">
    <div class="galleriebilder">
        <div class="thumb">
            <label><input type="radio" name="gallerie" id="thumbnail1"><img src="bild1.jpg" /></label>
            <label><input type="radio" name="gallerie" id="thumbnail2"><img src="bild2.jpg" /></label>
        </div>
        <div class="bildanzeige">
            <img id="bild1" src="bild1.jpg" />
            <img id="bild2" src="bild2.jpg" />
        </div>
    </div>
    <div class="Text">
    </div>
</div>

Wenn ich jetzt im css auf :checked prüfe, passiert nichts, egal welche Selektoren ich verwende.

Beispiel:

#thumbnail1:checked #bild1{opacity:1;}

Meinem Verständnis nach, da eine id ja nur einmal vorkommen darf und eine Klasse mehrmals, müsste ich damit doch direkt die Elemente ansprechen können, egal wo sich sich im Dokument befinden.
Positioniere ich die Bilder von Bildanzeige absolut überlagern sich sich nicht nur, wie gewünscht, sondern werden auch breiter und überlagern damit auch die restlichen 90% Breite die ihnen eigentlich nur zusteht.
Ich hatte schon überlegt, mit z-index und opacity zu arbeiten, doch auch damit habe ich bisher keinen Erfolg erzielt.
Wo ist mein Denkfehler?

[Matthias Apsel]

Hallo BlackHell,

Wo ist mein Denkfehler?

Das Leerzeichen ist der Nachfahrenselektor.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@BlackHell

#thumbnail1:checked #bild1{opacity:1;}

Das selektiert alle Elemente (hier: das Element) mit der ID 'bild1', die Nachfahren eines (des) gecheckten Elements mit der ID 'thumbnail1' sind.

Ein solches gibt es nicht. Kann es auch gar nicht geben, da input ein leeres Element ist, also keine Nachfahren haben darf.

Von einem input-Element aus kannst du nur das nachfolgende (mit +-Kombinator) oder alle nachfolgenden (mit ~-Kombinator) Geschwisterelemente selektieren. Du müsstest den Radiobutton dementsprechend im DOM plazieren.

LLAP 🖖

[BlackHell]

Danke soweit für die Antworten.
Ich hatte im Beispiel den Selektor nur weggelassen, da ich ja auch ~ und + schon ausprobiert hatte.
Alle Selektoren hintereinander aufzuführen schien mir ein wenig übertrieben.

[Matthias Apsel]

Hallo BlackHell,

Ich hatte im Beispiel den Selektor nur weggelassen, da ich ja auch ~ und + schon ausprobiert hatte.

Du hast ihn nicht weggelassen. Dein Selektor lautet vereinfacht: Element1 Element2. Das Leerzeichen dazwischen ist ein Kombinator, ebenso wie ~ oder +.

Matthias

[BlackHell]

Moin!

Drücke ich mich so mißverständlich aus? Dann bitte ich um Entschuldigung.
Ich habe begriffen, dass das Leerzeichen der Nachfolgeselektor ist.
Diesen habe ich extra gewählt, weil ich nicht #thumbnail1:checked~+*>#bild1 schreiben wollte und auch nicht zB. § als Selektor wählen wollte, da die Gefahr bestand, dass man mir sagt, diesen Selektor gibt es gar nicht usw.

[Gunnar Bittersmann]

@@BlackHell

Ich hatte im Beispiel den Selektor nur weggelassen, da ich ja auch ~ und + schon ausprobiert hatte.

Mit ~ oder + dazwischen kann der Selektor auch nicht greifen, da Radiobutton und Bild bei dir keine Geschwisterelemente im DOM sind.

LLAP 🖖

[BlackHell]

D.h. ich kann also eine id zwar vergeben, diese lässt sich aber nicht von überall her ansprechen sondern nur in ihren zuständigen Elementen.
Das dürfte also daraus hinauslaufen, dass ich meine divs für Thumbnails und die eigentlichen Bilder so nicht verwenden kann.
Wie kann ich dann auch sicher gehen, dass die Bildbreite nicht so groß wird, dass sie den nebenstehenden Text verdeckt?
Bzw. Wie halte ich die Bilder generell so im Zaum, dass sie nicht über ihren angestammten Platz hinauswachsen?
Wenn ich die Bilder absolut positionieren muss, habe ich einen overlay, den ich zwar verstecken könnte, dann würden aber Teile des Bildes fehlen.

[Gunnar Bittersmann]

@@BlackHell

D.h. ich kann also eine id zwar vergeben, diese lässt sich aber nicht von überall her ansprechen sondern nur in ihren zuständigen Elementen.
Das dürfte also daraus hinauslaufen, dass ich meine divs für Thumbnails und die eigentlichen Bilder so nicht verwenden kann.

Du hast zwei Kopplungen: Radiobutton mit zugenörigem Bild und Label mit jeweils zugehörigem Radiobutton.

Die Kopplung Radiobutton–Bild geschieht mit CSS-Selektoren, da bist du also darauf angewiesen, dass Radiobuttons und Bilder im DOM so stehen, dass CSS-Selektoren wirken können. Dazu muss der Radiobutton ein vorangehendes Geschwisternelement des Bildes oder eines Vorfahrens davon sein.

Die Kopplung Label–Radiobutton geschieht bei dir darüber, dass das input-Element innerhalb des label-Elements steht. Muss man aber nicht so machen; das label-Element kann ein for-Attribut haben, was sich auf die ID des zugehörigen Eingabefeldes bezieht. Dann können label und input getrennt voneinander irgendwo im DOM stehen. Das kannst du dir zunutze machen.

LLAP 🖖

[BlackHell]

Da ich nun zwar verstanden habe, dass ich durch die ID das Label und den Input getrennt haben kann, es mir aber nicht gelang, dem Input ebenfalls das Bild als Thumbnail mitzugeben, habe ich weiter nach Lösungen gesucht und eine gefunden.
http://w3bits.com/css-image-slider/
Ich habe diese Vorlage für mich angepasst und es wurde so, wie ich es haben wollte.
Hier der vereinfachte Code inklusive meiner Anpassungen:

<html>
    <head>
        <style>
        	@-webkit-keyframes fade-in{
		  0% { opacity: 0; }
		  100% { opacity: 1; }
		}
		@-moz-keyframes fade-in {
		  0% { opacity: 0; }
		  100% {opacity: 1; }
		}
		@keyframes fade-in {
		  0% { opacity: 0; }
		  100% { opacity: 1; }
		}
		.gallerie-wrapper {    
         		display: flex;
			flex-direction: column;
		}
		#gallerie {  
		   width: 100%;
		   <!-- max-width: 1000px; -->
		}
		
		#gallerie img{
	        	width: 100%;
			height: auto;
		}
		
		#gallerie figure {
		  margin: 0 auto;
		  padding: 0 auto;
		}
			.trigger {
			opacity: 0;
			display: none;
		}
		#gallerie .trigger:checked + figure {
		  -moz-animation: ease-in-out 1s 1 fade-in;
		  -webkit-animation: ease-in-out 1s 1 fade-in;
		  animation: ease-in-out 1s 1 fade-in;
		  z-index: 500;
		}
		#gallerie .trigger:not(:checked) + figure {
		  display: none;
		}
		.gallerie-navigation label {  
		  cursor: pointer; 			  
		}

		.gallerie-navigation img{
			width: 100%;
			height: auto;
			border: 1px solid #000;
		} 

		.gallerie-navigation li {  
			list-style-type: none;
			width: 5vw;		
			margin: 0 1vw;
		}

		.gallerie-navigation ul{
			margin:0;
			padding:0;	
			display: flex;
			justify-content: space-between;
		}
		</style>
	</head>
	<body>
		<div class="gallerie-wrapper">
			<div id="gallerie">
				<input type="radio" name="gallerie" class="trigger" id="bild1" checked="checked" />
				<figure>
					<img src="http://placehold.it/1024" />
				</figure>
				<input type="radio" name="gallerie" class="trigger" id="bild2" />
				<figure>
					<img src="http://placehold.it/1000/abcdef" />
				</figure>
				<input type="radio" name="gallerie" class="trigger" id="bild3" />
				<figure>
					<img src="http://placehold.it/1920/ff0000" />
				</figure>
				<input type="radio" name="gallerie" class="trigger" id="bild4" />
				<figure>
					<img src="http://placehold.it/600/00f0f0" />
				</figure>
			</div>
			<div class="gallerie-navigation">
			    <ul>
				<li><label for="bild1"><img src="http://placehold.it/1024" /></label></li>
				<li><label for="bild2"><img src="http://placehold.it/1000/abcdef" /></label></li>
				<li><label for="bild3"><img src="http://placehold.it/1920/ff0000" /></label></li>
				<li><label for="bild4"><img src="http://placehold.it/600/00f0f0" /></label></li>
			    </ul>
			</div>
		</div>
	</body>
</html>

Dadurch dass die Gallerie im Flexbox-Modell ist, kann die Navigation überall um die Gallerie platziert werden.
Entweder durch Ändern von column in row und/oder Angabe von order.

Ich bin hierbei nur auf ein kleines Problem gestoßen.
Meine Gallerie Navigationsbilder bekommen einen Rand und den kann ich auch ausblenden lassen, wenn kein Bild vorhanden ist.
Nur das Label bzw. li selbst schaffe ich nicht auszublenden, so dass bei zB. 3 Bildern, die Eigenschaft space-between, die restlichen Bilder anders ausrichtet.
Hier kann ich auch beliebig viele Bilder vorbereiten. Ich muss nur jeweils die einzelnen Zeilen kopieren und anpassen.