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.
Kategorie: CSS
Bild-Transparenz mit CSS
a img {
-moz-opacity: 0.30; /* Gecko */
filter:alpha(opacity=30); /* IE */
opacity: 0.30; /* Opera */
}
a:hover img {
-moz-opacity: 1.00; /* Gecko */
filter:alpha(opacity=100); /* IE */
opacity: 1.00; /* Opera */
}
Text läuft über ein Div hinaus
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
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.
DIV Positionierung
Richtige Platzierung von DIV-Containern:
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position
Sliding Doors-Technique:
http://alistapart.com/articles/slidingdoors/
Rounded Corner-Generator