Man kann mehrere direkt aufeinander folgende Bild-Tabellen zwar ganz bequem per Klick im Bildmenübalken links oder rechts ausgerichtet nebeneinander stellen, jedoch nicht zentriert.
Um die Bilder zentriert nebeneinander zu stellen, muss man aus den vielen Tabellen eine einzige machen. Dazu muss man im HTML-Modus des Ediors die Bild-Codes etwas umsortieren und, was man nicht braucht, löschen.
Diese Methode ist für die Mobilversion eines Blogs nur dann geeignet wenn ganz winzige Bilder nebeneinander gestellt werden. Die Breite der Bildtabelle wird nämlich nicht an die Bildschirmbreite des Smartphones angepasst und die einzelnen Bilder können auch nicht in die nächste Zeile umbrechen.
So geht's:
Erstmal lädt man die Bilder im Verfassen-Modus des Editors hoch, lässt die automatische Einstellung "Zentriert", wie sie ist (die braucht man später), gibt jeweils die gewünschte Bildgröße an und trägt jeweils die Bildunterschrift ein.
Dann wechselt man in den HTML-Modus des Editors. Dort sieht der Code bei drei Bildern dann beispielsweise wie folgt aus, wobei ich die erste der drei Bild-Tabellen markiert habe:
Die einzelnen Bild-Tabellen bestehen jeweils aus folgenden Elementen:
- table = Tabelle
- tbody = Tabellenkörper
- tr = Zeile
- td = Zelle (mit Bild darin)
- tr = Zeile
- td = Zelle (mit Bildunterschrift darin)
Um nun aus drei Bild-Tabellen nur eine zu machen, lässt man nur die erste Tabelle komplett stehen und holt sich aus den anderen Tabellen nur die Zellen (td) raus, um sie in die erste Tabelle umzusiedeln. Dort stellt man in der richtigen Reihenfolge alle td mit den Bildern darin hintereinander und dann in der richtigen Reihenfolge alle td mit den Bildunterschriften hintereinander.
Die Bild-td aus der zweiten Tabellle setzt man also direkt hinter die Bild-td aus der ersten Tabelle und die Bild-td aus der dritten Tabelle setzt man direkt da hinter. Und ebenso geht das mit den Bildunterschrifts-td.
Die Bild-td aus der zweiten Tabellle setzt man also direkt hinter die Bild-td aus der ersten Tabelle und die Bild-td aus der dritten Tabelle setzt man direkt da hinter. Und ebenso geht das mit den Bildunterschrifts-td.
Markierte Bild-td in der zweiten Bild-Tabelle:
Markierte Bildunterschrifts-td in der zweiten Bild-Tabelle, nachdem alle Bild-td schon fertig sortiert sind.
Die Reste der zweiten und dritten Tabelle müssen gelöscht werden, wenn man alle td fertig in die erste Tabelle umgesiedelt hat. Im folgenden Bild sind sie markiert:
So sieht der fertige Code dann aus:
Man hat jetzt automatisch eine zentriert stehende Bilder-Tabelle mit drei nebeneinander stehenden Bildern mit Bildunterschrift.
 |  |  |
| Bild 1 | Bild2 | Bild3 |
Die Bilder haben jedoch keine Außenabstände, sondern stehen direkt aneinander. Wenn man aber eine div-Klammer mit einem Klassennamen um die Bilder-Tabelle drumrum setzt, also beispielsweise
<div class="bildertabelle">
über die Bilder-Tabelle und
</div>
unter die Bilder-Tabelle und dann zu der Klasse "bildertabelle" im CSS oder zwischen style-Klammern im Post selbst das folgende Kommando einträgt, dann haben die Bilder die üblichen Abstände.
.bildertabelle img {
margin: 1em;
}
So sieht das dann aus:
| | |
| Bild 1 | Bild2 | Bild3 |
Wer die Bildunterschrift dichter am Bild stehen haben will, der kann statt des oben genannten Kommandos das folgende eintragen:
.bildertabelle img {
margin-top: 1em;
margin-right: 1em;
margin-left: 1em;
}
So sieht das dann aus:
| | |
| Bild 1 | Bild2 | Bild3 |
Will man zwei oder mehr solcher Bilderreihen untereinander stehen haben, muss man übrigens entsprechend viele solcher Tabellen untereinander setzen. Man darf immer nur so viele Bilder in eine Tabelle packen, wie der Post breit ist; denn die Tabellenelemente brechen nicht in die nächste Zeile um. Folgend habe ich zwei solcher Tabellen, mit ihren div-Containern drumrum, direkt untereinander gesetzt:
| | |
| Bild 1 | Bild2 | Bild3 |
| | |
| Bild 1 | Bild2 | Bild3 |
Ute Ziemes, sg.utez.de, 05.12.2013
0 Kommentare:
Kommentar veröffentlichen