CSS float: Bilder und Text jeweils in einer Flucht ausrichten

Freitag, 22 Januar 2010 08:24 MET

Thema:
Webgestaltung, Ausgewählte Artikel  
Stichworte:
,  
dieser Artikel  
Schattenriss einer männlichen Büste (Seitenansicht)
CSS float: Bilder und Text jeweils in einer Flucht ausrichten [hyperkontext | Weblog]
Kommentare 3

Mit der CSS-Anweisung float können wir ein Bild aus dem Textfluss nehmen. Oft wollen wir aber nicht, dass Text das Bild umfließt, sondern daneben in einer Flucht steht. Nachfolgend eine kurze Einführung.

Manche webgestaltende »Professionisten« verwenden noch immer HTML-Tabellen, um Bilder und Text nebeneinander in einer Flucht auszurichten.

Handwerk Webgestaltung

Ich habe mich vor kurzem wieder über webgestaltende »Professionisten« gewundert, die HTML-Tabellen verwenden, um Bilder und Text nebeneinander in einer Flucht auszurichten.

Zu Beginn sei erklärt, dass ich hier nicht Korinthen kacke und weder Suchmaschinen, noch Screenreader-Nutzer am Verständnis solch einer zweispaltigen Layout-Tabelle scheitern werden. Es geht viel mehr um das Verständnis des Handwerkes der Webgestaltung.

Die Semantik

Sagt mein Markup das, was ich sagen will? Modernes Webdesign (Manuela Hoffmann)

Es kann nur zwei Gründe in HTML (HyperText Markup Language) geben, die den Einsatz einer Tabelle zur Anreihung von Bildern (in jeweils eigener Datenzelle) und nebenstehendem Text erklären:

  1. Bilder oder Grafiken zusammen mit anderen Werten und Angaben stehen im Vergleich zueinander. Damit ist eine Tabelle bedeutungsvoll und logisch.

    Wenn wir etwa eine Lehr-Publikation erstellen, wo beispielsweise verschiedene Stile der Malerei beschrieben werden und jeweils ein typisches Gemälde dieser Sparte neben den Erläuterungen erscheint. In diesem Fall dient das Bild (beziehungsweise die alternative Bildbeschreibung) zur vergleichenden Darstellung, gehört zu einer Spalte der Tabelle und kann eventuell auch in eine Sortierung gebracht werden.

  2. Durch unzureichende Fachkenntnis wird die HTML-Tabelle bloß zur sichtbaren Positionierung verwendet.

Die unlängst gesichteten »Bild-Text-Tabellen« lassen sich fast ausschließlich nur durch Punkt 2 erklären und werden allesamt von Professionisten erstellt und gepflegt.

Frei nach Jens Grochtdreis sei die Frage gestellt, was machen die eigentlich beruflich?

Derartige Referenzen legen zumindest nahe, dass solche Frontend-Entwickler ihre Arbeitsgrundlagen nicht so recht verstanden haben und das ein oder andere gute Buch zu HTML und CSS studieren sollten.

Hierzu ein paar meiner bislang rezensierten Buchempfehlungen:

Damit ist mein »Aufreger« auch schon wieder beendet. Ich versuche mich statt dessen an einer kurzen Einführung und Demoseite, wie Bilder und Text mit CSS jeweils in einer Flucht ausgerichtet werden können.

Ich habe nämlich im Web kaum eine grundsätzliche und brauchbare Anleitung hierzu gefunden, schon gar nicht auf Deutsch. Vielleicht suchte ich aber auch nur mit den falschen Worten.

Bilder aus dem Textfluss nehmen

Der erste Schritt ist einleuchtend: Mit der CSS-Anweisung img{float:[left oder right]} nehmen wir das Bild aus dem Textfluss. Das Bild schiebt sich rechts oder links in den Text hinein, weiterer Text umfließt es.

Oft wollen wir aber nicht, dass Text das Bild umfließt, sondern daneben in einer Flucht steht.

Auch Definitions­listen lassen sich so formen.

Screenshot aus der Demoseite
zur Demoseite

Text und Bilder jeweils in einer Flucht ausrichten

Je nach Absicht, versehen wir den Container, in dem der Text verläuft, mit padding (weniger Komplikationen mit gesamtem Layout), margin, border oder eine Kombination daraus. Zusätzlich ziehen wir das gefloatete Bild um diese Breite nach rechts oder links raus.

Bei mehreren Bildern mit einer angenommen Breite von 80px sieht das vereinfacht etwa so aus:

  1. #text{ padding-left:80px; }
  2. #text img{ margin-left:-80px; float:left; clear:both; width:80px; }

Das angegebene clear:both ist übrigens wichtig, um zu vermeiden, dass ein kurz darauf folgendes Bild sich nicht ungewollt rechts neben das vorhergende Bild anreiht, sondern auch wirklich darunter.

Noch verständlicher ist die Sache, wenn sich jeweils ein Bild innerhalb eines Absatzes befindet. Damit können wir das Element p als Container verwenden:

  1. #text p{ padding-left:80px; clear:both; }
  2. #text p img{ margin-left:-80px; float:left; width:80px; }

In allen Fällen vorausgesetzt, dass mehrere Bilder die selbe Breite haben. Kleinigkeiten, wie Abstände zwischen Bild und Text, sind hier natürlich weggelassen.

Beispiele

Aus diesen Grundkenntnissen lassen sich nun viele Kombinationen (beispielsweise mit Listen) formen. Ich habe drei einfache Beispiele erstellt:

Anmerkung: Die Beispiele zeigen Anregungen und setzen Vorkenntnisse in CSS voraus.

Abschnitt 1 von 1
Datum:
veröffentlicht am 22 Januar 2010, 08:24 MET.
Artikel:
CSS float: Bilder und Text jeweils in einer Flucht ausrichten [hyperkontext | Weblog]
(twittern)
Kurz-URL:
http://hyperkontext.at/s/243
Thema:
Webgestaltung, Ausgewählte Artikel 
Stichworte:
,  
Reaktionen:
Kommentare 3
Kommentarfeed:
RSS 2.0

Kommentare (3) ansehen

Ihre Meinung

Absätze und Umbrüche werden im Eingabefenster automatisch erkannt.
Wenn Sie mit HTML vertraut sind, dürfen Sie gerne auch folgende Elemente verwenden:
<a href=""></a> <strong></strong> <code></code> <blockquote></blockquote>.

In der Vorschau geben Sie bitte noch Ihren Namen und mögliche weitere Daten zu Ihrer Person an und es erscheint die Schaltfläche zum Speichern Ihres Kommentars.

Mögliche themenverwandte Artikel aus dem Weblog

Blättern (chronologisch)

« neuerer Artikel
Empfohlene Blogs – aktualisiert 2010-01
älterer Artikel »
Dezember 2009 im Kontext