Direktnavigation

Weitere Infos

Sie lesen:
LB Teil 1 (2009)

Little Boxes Teil 1 (Cover)

Aktuell (2015)
Einstieg in CSS

Einstieg in CSS (Cover)


2. Auflage!

Einstieg in CSS (Cover)

Beispielseiten

Inhaltsbereich

13.2 Praktisch: CSS-Klassen zum Floaten

Zum Testen ist es völlig in Ordnung, wie im vorherigen ToDo Inline-Styles direkt in den HTML-Quelltext zu schreiben, aber unter dem Gesichtspunkt der Wiederverwendbarkeit bietet es sich an, im Stylesheet jeweils eine Klasse für nach links und nach rechts schwebende Bilder einzurichten. Passende Namen wären zum Beispiel .bildlinks und .bildrechts.

Diese Klassen können Sie den Grafiken auf den Webseiten nach Belieben zuweisen:

  • Soll ein Element nach links schweben, bekommt es im HTML class="bildlinks".
  • Soll es nach rechts floaten, entsprechend class="bildrechts".

Im folgenden ToDo wird mithilfe von padding und border gleich noch ein hübscher (Bilder)rahmen definiert.

ToDo: CSS Klassen erstellen und der Grafik zuweisen
  1. Öffnen Sie ggf. das Stylesheet bildschirm.css.
  2. Definieren Sie im Stylesheet am Ende von Abschnitt 2 für allgemeine Klassen die folgenden zwei Styles:
    .bildlinks {
      float:left;
      padding: 3px;
      border: 5px solid #ccc;
      margin-right: 10px;
      margin-bottom: 10px;
    }
    .bildrechts {
      float:right;
      padding: 3px;
      border: 5px solid #ccc;
      margin-bottom: 10px;
      margin-left: 10px;
    }
  3. Speichern Sie das Stylesheet.
  4. Entfernen Sie auf der Startseite index.html das Attribut style für die Grafik und fügen Sie stattdessen die Klasse bildrechts hinzu:
    <p><img src="ballon.jpg" alt="Roter Luftballon" width="78" height="100" class="bildrechts" /> ...
  5. Speichern Sie die Webseite und betrachten Sie sie im Browser.

So sieht die Seite mit einer per .bildrechts formatierten Grafik jetzt im Browser aus:

Abbildung 13.3: Der Ballon schwebt und sieht gut aus
Abbildung 13.3: Der Ballon schwebt und sieht gut aus
Update: Float und display:inline

Wenn ein gefloatetes Element einen horizontalen margin hat, hat der IE6 diesen manchmal einfach verdoppelt. Dieser »doublemargin float bug« lässt sich leicht beheben, indem Sie dem gefloateten Element die Deklaration display: inline; zuweisen.

Diese Anweisung ist eigentlich völlig sinnlos, denn ein gefloatetes Element ist immer ein Block-Element, aber der Trick hat keine bekannten Nebenwirkungen in anderen Browsern und veranlasste den IE6 mysteriöserweise zur korrekten Berechnung von margin.

Sie müssen das heute nicht mehr machen, da der IE6 obsolet ist, aber man sieht die Kopplung von float und display:inline noch oft in alten CSS-Dateien, und jetzt wissen Sie auch warum.