• Skip to primary navigation
  • Skip to content
  • Skip to footer
DEMO | Home » Fotos @ Kolumnen

DEMO @ MAMEDi

Demoseite mit WordPress als CMS

  • Home
  • Referenzen
  • BLOG
  • Responsive Design
  • Kolumnen
  • Impressum

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“

 

11. Sechs Kolumnen = „one-sixth“

„one-sixth first“

Notiz @ Foto

„one-sixth“

Notiz @ Foto

„one-sixth“

Notiz @ Foto

„one-sixth“

Notiz @ Foto

„one-sixth“

Notiz @ Foto

„one-sixth“

Notiz @ Foto

 

12. Sechs Kolumnen, 3 + 4 = „two-sixths“

Manchmal hat man in einer Galerie ein besonders gutes Foto, welches hervorgehoben werden soll. Dafür lassen sich z.B. zwei (oder mehrere) Kolumnen zuammenfassen, wodurch das Bild mehr Fläche bekommt und größer angezeigt wird. Allerdings nur auf Desktops, Laptops und Tablets im Landscape-Modus. Auf kleineren Smartphones und beim Tablet im Portrait-Modus werden alle Bilder gleich groß und aufeinander folgend dargestellt.

„one-sixth first“

Notiz @ Foto

Notiz @ Foto

„one-sixth“

Notiz @ Foto

Notiz @ Foto

„two-sixths“

Notiz @ Foto

„one-sixth“

Notiz @ Foto

Notiz @ Foto

„one-sixth“

Notiz @ Foto

Notiz @ Foto

 

13. Sechs Kolumnen, 2 + 3 = „two-sixths“

Für eine Mischung aus Wischeimerigen mit Zuckertopfigen Bildern in einer Galerie bieten Kolumnen mit unterschiedlichen Zusammenfassungen ebenfalls eine interessante Möglichkeit der Darstellung. Allerdings auch wieder nur bei den größeren Ausgabegeräten wie Desktops, Laptops und Tablets im Landscape-Modus.

„one-sixth first“

Notiz @ Foto

Notiz @ Foto

Notiz @ Foto

„two-sixths“

Notiz @ Foto

Notiz @ Foto

„one-sixth“

Notiz @ Foto

Notiz @ Foto

Notiz @ Foto

„one-sixth“

Notiz @ Foto

Notiz @ Foto

„one-sixth“

Notiz @ Foto

Notiz @ Foto

 

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

Notiz @ Foto

Notiz @ Foto

Notiz @ Foto

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

„one-half“

Notiz @ Foto

„one-sixth“

Notiz @ Foto

Notiz @ Foto

Notiz @ Foto

Notiz @ Foto

Notiz @ Foto

„two-sixths“

Man muss sich insbesondere Gedanken über eine sinnvolle Reihenfolge von Bildern und Texten machen, weil die Kolumnen auf den Monitoren kleinerer Geräte untereinander dargestellt werden.

Notiz @ Foto

Notiz @ Foto

 

16. Sechs Kolumnen, weitere Variation verschachtelt mit „half“

„two-sixths first“

Notiz @ Foto

Notiz @ Foto

„one-sixth“

Notiz @ Foto

Notiz @ Foto

Notiz @ Foto

„three-sixths“
„one-half first“

Notiz @ Foto

Notiz @ Foto

„one-half“

Notiz @ Foto

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.

Auf unterschiedlichen Geräten wird der Text nicht immer optimal dargestellt, weshalb wieder der spezielle „CSS“-Befehl für eine gerade Abschlußkante sorgt.

„one-third“

Notiz @ Foto

„one-fourth first“

Notiz @ Foto

„one-fourth“

Notiz @ Foto

„one-fourth“

Notiz @ Foto

„one-fourth“

Notiz @ Foto

„one-half first“

Notiz @ Foto

„one-half“

Notiz @ Foto

Favicon · MAMEDi

„MAMEDi“

War das verständlich oder doch zu kompliziert?

Footer

! Datenschutz ?
       

Kontakt  @  MAMEDi

Fon  (0 44 43) 50 84 54
Mobil  (01 72) 5 47 83 52
E-Post  „mail@mamedi.de“

Über MAMEDi

Logo · MAMEDI.DE Der Name „MAMEDi“ ist das Akronym für „Manfred Menke, Dinklage“, der anhand typischer Beispiele auf dieser zu Testzwecken angelegten DEMO-Homepage Möglichkeiten der Gestaltung ausprobiert und präsentiert.

Footer-Widgets

Das hier ist der „Footer 2“, der im Bereich der sogenannten „Footer-Widgets“ liegt. Hier werden typischerweise solche Dinge wie Kontaktdaten, eine Suchfunktion, Aktuelles im Blog der Homepage und weitere Informationen zur Verfügung gestellt.

BLOG @ Demoseite

  • Schriften – ohne „CDN“ – direkt laden
  • Screenshot: „Am I Responsive“
  • Süsses „FAVICON“ – völlig ungefährlich
  • Guten Tag, Demoseite @ MAMEDi

MAMEDi-Schuhe

Web · Projekte

Barfuß gehen ist zwar schön, für manche Wege aber ungeeignet. Deshalb ist gutes Schuhwerk wichtig, um unversehrt ans Ziel zu gelangen. Für eine Homepage benötigt man ebenfalls eine solide Grundlage. Meine Empfehlung ist „WordPress“, das weltweit beliebteste CMS.

  • Home
  • Referenzen
  • Impressum

Demo @ MAMEDi   Copyright © 2019   WordPress