Fotos @ Kolumnen

Die Beispiele (von 1 bis 17) zeigen, was man mit „Kolumnen“ anstellen kann – ohne zusätzliches Plugin.

Der hauptsächliche Inhalt fast jeder Homepage besteht aus Text, Fotos oder auch Videos.

1. Zwei Kolumnen = „one-half“

Die jeweils erste Kolumne muss immer die CSS-Klasse „first“ bekommen.

„one-half first“

Erdbeeren @ „MAMEDi“

„one-half“

Zuckertopf @ „MAMEDi“

Eine spezielle „CSS“-Klasse sorgt für eine gerade Abschlußkante bei verschieden großen Bildern oder unterschiedlichen Textmengen.

2. Verschachtelt mit weiteren „one-half“

„one-half first“

Else @ „MAMEDi“

Die Verschachtelung verschiedener Kolumnen ist ebenfalls möglich. Dadurch ergeben sich viele Varianten für eine flexible Gestaltung.

„one-half“

„one-half first“

Erdbeeren @ „MAMEDi“

Bananen @ „MAMEDi“

„one-half“

Zuckertopf @ „MAMEDi“

Keksdose @ „MAMEDi“

3. Verschachtelt mit „third(s)“

„one-half first“

Zuckertopf @ „MAMEDi“

Bei derartigen Verschachtelungen können die Bereiche (= „div“) durchaus für Verwirrung sorgen. Erst recht, wenn auch noch ein umrahmender „CSS“-Befehl für de Abschlußkante dazukommt.

„one-half“

„one-third first“

Else @ „MAMEDi“

Tachometer @ „MAMEDi“

Birnen @ „MAMEDi“

„two-thirds“

Wischeimer @ „MAMEDi“

4. Verschachtelt mit „half“ und „third(s)“

„one-half first“

Birnen @ „MAMEDi“

„one-half first“

Erdbeeren @ „MAMEDi“

„one-half“

Bananen @ „MAMEDi“

„one-half“

„two-thirds first“

Tachometer @ „MAMEDi“

So ein Text wie derjenige, welcher hier gerade zu lesen ist, kann an jeder beliebigen Stelle zwischen den Bildern eingefügt werden.

Else @ „MAMEDi“

„one-third“

Wischeimer @ „MAMEDi“

Zuckertopf @ „MAMEDi“

Keksdose @ „MAMEDi“

5. Drei Kolumnen = „one-third“

„one-third first“

Zuckertopf @ „MAMEDi“

„one-third“

Else @ „MAMEDi“

„one-third“

Erdbeeren @ „MAMEDi“

6. Verschachtelt mit „third(s)“

„one-third first“

Wischeimer @ „MAMEDi“

„two-thirds“

„one-third first“

Keksdose @ „MAMEDi“

„one-third“

Else @ „MAMEDi“

„one-third“

Tachometer @ „MAMEDi“

Eine eigens definierte „CSS“-Klasse bewirkt, dass der Text – die Bildunterschrift oder Notiz zum Bild – unter dem Bild etwas kleiner und mit einer anderen Schriftart dargestellt wird.

Birnen @ „MAMEDi“

Erdbeeren @ „MAMEDi“

Bananen @ „MAMEDi“

7. Vier Kolumnen = „one-fourth“

„one-fourth first“

Keksdose @ „MAMEDi“

„one-fourth“

Haund @ „MAMEDi“

„one-fourth“

Wischeimer @ „MAMEDi“

„one-fourth“

Zuckertopf @ „MAMEDi“

Bei einer Mischung aus hoch- und querformatigen Fotos (siehe oben) wird wieder ein spezieller „CSS“-Befehl für einen geraden Abschluß benötigt.

8. Vier Kolumnen, zwei als „two-fourths“ fusioniert

„one-fourth first“

Strichgesicht @ „MAMEDi“

Kreise @ Weisser Hintergrund

„two-fourths“

Vier Augen @ „MAMEDi“

„Vier Augen … sehen mehr als Zwei“

„Augentraining · Das Schielen als Methode“

„one-fourth“

Manfred @ „MAMEDi“

Kreise @ Dunkler Hintergrund

9. Vier Kolumnen verschachtelt mit „half“

„two-fourths first“

„one-half first“

Erdbeeren @ „MAMEDi“

„one-half“

Keksdose @ „MAMEDi“

„one-half first“

Tachometer @ „MAMEDi“

„one-half“

Else @ „MAMEDi“

„one-fourth“

Wischeimer @ „MAMEDi“

„one-fourth“

Haund @ „MAMEDi“

Überschrift(en) „h1 bis h6“

Mit den Kolumnen läßt sich allerhand anstellen. Der Bereich, in dem dieser Text steht, ist z.B. ein „one-half“ und füllt den Freiraum unter obigen Bildern. Die Überschrift ist aktuell als „h4“ definiert und kann geändert, gelöscht oder für andere Zwecke benutzt werden.

10. Vier Kolumnen, drei als „three-fourths“ zusammengefaßt

„three-fourths first“

Vier Augen @ „MAMEDi“

„one-fourth“

Strichgesicht @ „MAMEDi“

Manfred @ „MAMEDi“

14. Sechs Kolumnen, 1 + 2 = „two-sixths“ und 4 + 5 + 6 = „three-sixths“ verschachtelt mit „half“

„two-sixths first“

Der Text zu einer Galerie kann natürlich auch über einem Bild stehen, wie es hier gerade zu sehen ist.

Notiz @ Foto

Diese Galerie besteht aus neun Bildern, von denen zwei durch die größere Fläche hervorgehoben werden. Eines davon ist im Wischeimer (siehe oben) und das zweite Foto befindet sich im „three-sixths“-Bereich, in dem unten zwei weitere Kolumnen („half“) integriert sind.

„one-sixth“

Notiz @ Foto

„three-sixths“

Notiz @ Foto

Die Arbeit und das Layouten mit den Kolumnen ist sicher alles andere als langweilig und bietet Spielraum für sehr abwechslungsreiche Gestaltungen.

„one-half first“

Notiz @ Foto

„one-half“

Notiz @ Foto

15. Sechs Kolumnen, Variation (von Beispiel 14) verschachtelt mit „half“

„three-sixths first“

Notiz @ Foto

Es lassen sich die unterschiedlichsten Gruppen – mit Texten an beliebigen Stellen dazwischen – bilden. Die Technik (= Kolumnen) ist dabei gar nicht das Komplizierteste, sondern vielmehr die kreative Idee und deren Umsetzung.

„one-half first“

Notiz @ Foto

„three-sixths“

„one-half first“

Notiz @ Foto

„one-half“

Notiz @ Foto

17. Gemischte = „half“, „third“, „fourth“, „half“

„one-half first“

Notiz @ Foto

„one-half“

Notiz @ Foto

„one-third first“

Notiz @ Foto

„one-third“

Eine Mischung aus verschiedenen Reihen mit zwei, drei oder vier Kolumnen sieht auch schon wirklich sehr gut aus. Dabei kann selbstverständlich auch eine der Kolumnen für den Text genutzt werden.

„MAMEDi“