Kategorie: CSS

Formatierung einer HTML-Seite mit CSS

So heißt der Titel meines letzten Forschungsprojekts an der Fachhochschule Brandenburg. Mit diesem Projekt konnten wir (Andrew Tur, Benny Neugebauer, Christian Heinrich, Marco Bierbach, Marcus Kießling, Mathias Lange, Matthias Böhme & Sebastian Schmidt) im Projektorientierten Studium im Wintersemster 2007/2008 überzeugen und uns ganz knapp vor der „Mixed Reality“-Gruppe durchsetzen. Wir wurden dafür sogar mit T-Shirts der FHB belohnt.

Auf den Fachhoschul-Webseiten meines Kommilitonen Matthias Böhme befindet sich noch die Projekt-Homepage mit Poster, Präsentation und Screencast sowie den beiden eingereichten Templates für CSS Zen Garden.

Text läuft über ein Div hinaus

Wenn man einen Breite-definierten Div-Container hat und eine lange Zeichenkette ohne Leerzeichen hinein schreibt, läuft der „Text“ aus dem Div-Container. Um das zu verhindern, hilft die CSS-Eigenschaft overflow.

Beispiel:

.divcontainer
{
    width: 100px;
    overflow: hidden;
}

Eigenschaften:

visible; Inhalt bleibt komplett sichtbar und überschreibt Div
hidden; Inhalt wird am Ende des Div-Bereichs unsichtbar
scroll; Inhalt bleibt innerhalb des Divs und wird gescrollt
auto; Der Web-Browser erzeugt automatisch Scrollbalken

Ein Umbruch der Zeichenkette ist nur möglich, wenn Leerzeichen in den Zeichen enthalten sind oder mit der PHP-Funktion wordwrap.

CSS – IDs und Klassen

Es gibt in CSS zwei essenzielle Definitionsarten: ID und class. Diese sind anhand der HTML-Anweisungen erkennbar.

Steht <h1 class=“headtitle“>Überschrift</h1> im Quelltext, so muss hier mit einer Klasse gearbeitet werden. Ein gültiger CSS-Baustein sieht demzufolge so aus: .headtitle { } (der führende Punkt ist enorm wichtig).

Taucht im Quelltext Folgendes auf: <h1 id=“blue“>Überschrift</h1> definiert man die Attribute mit: #blue { }.

Klassen sind für die Anpassung von mehreren Elementen angedacht und können kombiniert und vererbt werden. Auf einer HTML-Seiten dürfen mehrere Elemente mit derselben Klasse auftauchen.

IDs sind hingegen sehr speziell. In einem Dokument darf jeweils nur ein einziges Element mit einer ID auftauchen (auch wenn so mancher Browser das anders sieht). Eine ID kann nicht mit einer anderen kombiniert werden und überstimmt die Definierung durch eine Klasse.