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

Kein Beitragsbild

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

 Sponsorenliebe

Endlich smarte Buchhaltung!

We Billing

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.

Schreibe einen Kommentar

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