Sven Lennartz 12. September 2003

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

Kein Beitragsbild

Ex Webdesigner und Gründer von Dr. Web, heute ist Sven als Schriftsteller...

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

Ex Webdesigner und Gründer von Dr. Web, heute ist Sven als Schriftsteller und Blogger (Conterest) unterwegs. Hol dir sein gratis eBook Wie du mit wenig Zeit viel für dein Blog herausholst. Die Blogpflege Fibel.

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.

Cookies

Weitere Informationen zu den Auswahlmöglichkeiten findest du hier. Dazu musst du zunächst keine Auswahl treffen!

Um Dr. Web zu besuchen, musst du eine Auswahl treffen.

Deine Auswahl wurde gespeichert!

Informationen zu den Auswahlmöglichkeiten

Was du erlaubst!

Um fortfahren zu können, musst du eine Auswahl treffen. Nachfolgend erhältst du eine Erläuterung der verschiedenen Optionen und ihrer Bedeutung.

  • Ich stimme zu:
    Du erlaubst uns das Setzen aller Cookies, die wir in unseren Datenschutzhinweisen genannt haben. Dazu gehören Tracking- und Statistik-Cookies. Aus dem Tracking per Google Analytics bieten wir auf der Seite Datenschutz ein Opt-Out, also die Möglichkeit der Abmeldung, an.
  • Ich stimme nicht zu:
    Wir verzichten bei dieser Option auf den Einsatz von Google Analytics. Die für den Betrieb von Dr. Web notwendigen Cookies werden aber dennoch gesetzt. Einzelheiten entnimmst du bitte den Datenschutzhinweisen

Du kannst deine Cookie-Einstellungen jederzeit hier ändern: Datenschutz. Impressum

Zurück