Teil 3 / 3. Bilder arrangieren …mit Plug-in Advanced Image Styles

Hauptseite, Teil 1 / Standard-Bildergalerie WordPress
Teil 2 / Bilder arrangieren … „für Seite mit voller Breite"

Inhaltsverzeichnis

Die Standard-Bildergalerie WP
… gefolgt von Advanced Image Styles

Dabei geht es hier vorrangig um ein Gespür zur Positionierung insbesondere der Funktionalität des Floaten der Bilder.

Das Plug-in Advanced Image Styles ist für Positionierung auch Umrandung der Bilder erst mal praktisch.

Aufrufs Bearbeitung eines Bildes unter Bild-Details erfolgt über Erweiterte Optionen „Image Border“ und „Image Margins“ die Positionierung des Bildes.

Nachfolgend Beispiele, je nach Gebrauch anzuwenden.

Ein Bild individuell anordnen und mit Text umfließen

Ein Bild mit Ausrichtung, wie hier Bild rechts, mit Text umfließen funktioniert wie von selbst.

… mit zwei Bildern

Das hier ist nur ein Übungszettel. Dabei geht es hier vorrangig um ein Gespür zur Positionierung vornehmlich der Funktionalität des Floaten der Bilder.

Beispiels Beschreibung

Das erste Bild ist mit margin-leftetwas nach links gesetzt. Das floatet zweite Bild ergibt geringfügigen Höhenunterschied zum ersten Bild und ist mit margin-top ausgeglichen. Die Reihenfolge ergibt sich aus alignleft und floatleft.
Darauf, das floatete Bild, mit Text umfließen ist gleich darunter beschrieben. Auch das sich ergebende Missfallen der nonkonformen Ausrichtung folgenden Überschrift ist gelöst.

<div>

<img class="alignleft wp-image-1934 size-medium" style="border: 2px solid red;" src="http://die bilddatei" />

<img class="floatleft links wp-image-1934 size-medium" style="border: 2px solid yellow; margin-top: 6px;" src="http://die bilddatei" />

</div>

Nachfolgend (weiter unten) die Beschreibung zur obigen Auszeichnung <img class="floatleft links…, also zum CSS, class="links"

Text um das Bild floaten:

<div style="margin-right: -60px;">Text, Text, Text.</div>

Abstand zum Bild der nächsten Überschrift hindurch weiteres CSS, `class="clear"`

<div class="clear"></div>
 <h4>Mehrere Bilder nebeneinander anordnen</h4>

Die Definitionen
class="links" und class="clear"

www.ohne-css.gehts-gar.net
- Die Auszeichnung links für Text umfließen.
s. 4.1. Lösungen, um Floating zu verhindern
- Die Auszeichnung clear für Abstand zum Bild, der nächsten Überschrift bzw. nächsten Text.

Mehrere Bilder nebeneinander anordnen

Beispiels w. o., anstatt Text drittes Bild floaten

Die Definitionen
class="box" + box:last-child

Im CSS Stylesheet Editor:

 .box {
 float: left;
 width: 32%;
 margin-right: 2%;
/*padding: 20px;
 background: #eee;*/
 box-sizing: border-box;
}

.box:last-child {
 float: left;
 width: 32%;
 margin-right: 0;
/*padding: 20px;
 background: #eee;*/
 box-sizing: border-box;
}

^{Danksagung dem Autor obigen Hinweises}

Folgendes …

<div class="box"><img class="alignnone wp-image-1934" style="border: 2px solid red; margin: 25px;" src="http://die bilddatei" /></div>
<div class="box"><img class="wp-image-1934 size-medium" style="border: 2px solid yellow; margin: 25px;" src="http://die bilddatei" /></div>
<div class="box:last-child"><img class="wp-image-1934 size-medium" style="border: 2px solid blue; margin: 25px;" src="http://die bilddatei" /></div>