Sven Lennartz 12. September 2003

Zitatkästen, Einschübe und Infoboxen – Teil 2

Kein Beitragsbild

Ein guter Text will gut gestaltet sein. Schwierig wird’s, wenn man viel zu sagen hat. Eine praktische Methode, um zusätzliche Informationen unterzubringen, bieten Zitatkästen, Einschübe und Infoboxen. Mit CSS geht das besonders flexibel und einfach.

Wozu sperrige Tabellenkonstrukte, wenn es auch einfacher geht? Selbst wenn Text und Bild gleichzeitig verwendet werden, bedarf es keines großen Aufwandes.

Screenshot
Ausrichtung nach rechts

Der gesamte Einschub findet Platz in einem CSS Container. Das heisst, er wird in ein <div>-Element eingeschlossen.

 <div class="abb">
    <img src="bild.jpg" width="84" height="84"
    alt="Abbildung">
    <p class="legende">Dies ist die Legende, auch Bildunterschrift
    genannt.</p>
    </div>

Die Klasse „abb“ sorgt für Positionierung und Formatierung. „float“ ist verantwortlich für die Ausrichtung nach rechts und den Textumfluß. Mit „width“ bestimmen wir die Größe des Einschubs, während „margin“ den Abstand zwischen Box und Fließtext regelt und „padding“ für Platz zwischen Rahmen und Inhalt sorgt.

      DIV.abb {
    float: right;
    width: 25%;
    border: 1px solid red;
    margin: 10px;
    padding: 6px;
    text-align: center;
    }

Live Demo im neuen Fenster

Auch die Legende wird noch etwas verschönert. Den Abstand zwischen Grafik und Bildunterschrift definieren wir mit „margin-top“.

      .legende {
    font-weight: bold;
    font-size: 10px;
    margin-top : 6px;
    }

Die genannten Parameter können nach Bedarf variiert werden. Auch eine Positionierung nach links ist möglich.

Screenshot

Ausrichtung nach links

Sogar auf die Bildgröße hat man Einfluß. Eine zusätzliche Klasse „gr“ für das Bild verändert dessen Maße.

      .gr {
    width : 140px; height : 140px;
    }

Screenshot
Mehr Abstand

Die Verwendung von CSS bietet mehr Möglichkeiten als die klassische Tabelle, da Abstände exakter definiert werden können. Das betrifft den Einschub selber, aber auch seine Position zum Flietext, bis hin zur Bildgröße. Wer die nötige Codes in ein externes Stylesheet auslagert, erhält volle Kontrolle über sämtliche verwendete Einschübe.

Sven Lennartz

Sven Lennartz

Ex Webdesigner, Gründer von Dr. Web und Smashing Magazine. Heute ist Sven als Schriftsteller und Blogger unterwegs. Schau was er jetzt macht…
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.