XML-Technologien / ePUB / ePub für (In)Designer / Bilder, Kästen und andere Gestaltungselemente / Kästen und farbige Auszeichnungen fertigstellen / Kästen in HTML und CSS gestalten

Kästen in HTML und CSS gestalten

(Auszug aus "ePub für (In)Designer — Mit InDesign Schritt für Schritt zum E-Book" von Sascha Heck & Yves Apel)

Wir lassen die Datei noch offen bzw. öffnen sie mit einem Editor. Sollten Sie die Vorbereitung richtig erledigt haben, finden Sie am Ende der CSS-Datei eine »div«-Klasse mit dem Objektformatnamen, den Sie in InDesign gewählt haben.

div.Kasten {
}

Nun gilt es hier die richtigen Codezeilen einzufügen. Es gibt in CSS eine große Zahl an Gestaltungsmöglichkeiten für Kästen. Wir werden Ihnen an dieser Stelle die am häufigsten benutzten Codes erklären, angefangen mit den Abständen.

Das CSS-Box-Modell

CSS-Box-Modell

Abbildung: Das CSS-Box-Modell.

Inhalt: Inhalt eines Elements, z.B. Text oder ein Bild.

padding: Abstand zwischen Inhalt und Rahmen, der die Hintergrundfarbe des Inhalts übernimmt.

border: Rahmen des Elements.

margin: Außenabstand des Elements, der transparent ist oder die Hintergrundfarbe des drumherum befindlichen Elements (body, div etc.) übernimmt.

»div.Kasten« müssen Sie sich als virtuelle und noch unsichtbare Fläche vorstellen (Element), die zwischen zwei Textabschnitten positioniert ist. Die Abstände zu den Textabschnitten sowie zu den Seitenrändern (entspricht der Konturenführung in InDesign) werden mit dem Befehl: (A) margin: [Abstand oben] [Abstand rechts] [Abstand unten] [Abstand links]; angegeben. Die Werte können auch in weiteren Kombinationen definiert werden: (B) margin: [Abstand alle Seiten]; | (C) margin: [Abstand oben/unten] [Abstand links/rechts]; | (D) margin: [Abstand oben] [Abstand links/rechts] [Abstand unten];. Die Kombinationen sind nicht nur auf margin begrenzt.

padding-Angaben in CSS

Abbildung: padding-Angaben in CSS.

div.Kasten {
  margin: 1em 2em 1em 2em;
}

Der innere Abstand zur virtuellen Fläche wird mit padding: [Abstand oben] [Abstand rechts] [Abstand unten] [Abstand links]; geregelt.

div.Kasten {
  padding: 1em;
}

Nachdem die inneren und äußeren Abstände definiert sind, kann der Fläche eine Hintergrundfarbe zugewiesen werden, um den Kasten sichtbar zu machen. Dafür steht der Befehl background-color: #991614; zur Verfügung.

div.Kasten {
  background-color: #991614;
}

Zu guter Letzt wird die Kontur definiert. Diese setzt sich aus drei Grundcodes zusammen: der Konturstärke, der Konturfarbe und dem Konturstil.

div.Kasten {
   border-width: 2px; /*Konturstärke*/
   border-style: solid; /*Konturstil*/
   border-color: black; /*Konturfarbe*/
}

Kasten-Konturstil solid

Abbildung: Kasten-Konturstil solid.

Kasten-Konturstil dotted

Abbildung: Kasten-Konturstil dotted.

Kasten-Konturstil dashed

Abbildung: Kasten-Konturstil dashed.

Der Kasten wird mit sechs CSS-Codezeilen definiert:

div.Kasten {
  margin: 1em 2em 1em 2em;
  padding: 1em;
  border-width: 2px; /*Konturstärke*/
  border-style: solid; /*Konturstil*/
  border-color: black; /*Konturfarbe*/
  background-color: #991614;
}

Darstellung des Beispielkastens

Abbildung: Darstellung des Beispielkastens.

<< zurück

vor >>

Tipp der data2type-Redaktion:
Zum Thema ePub & InDesign bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright © dpunkt.verlag GmbH 2012
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "ePub für (In)Designer" denselben Bestimmungen wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

dpunkt.verlag GmbH, Wieblinger Weg 17, 69123 Heidelberg, fon 06221-14830, fax 06221-148399, hallo(at)dpunkt.de