Hier möchte ich einen Vorschlag zur Reihenfolge der Deklarationen in einem Deklarationsblock machen.

Diese sollten meiner Meinung nach immer gleich sein. Wenn z.B. die Deklaration für width immer an der gleichen Stelle in einem Deklarationsblock steht, erhöht das die Lesbarkeit der CSS-Datei enorm.

Dabei orientiere ich mich ein bißchen nach dem Boxmodell:

Jedes Element das ich z.B. per Nachfahrenselektor ansprechen will steht in einer eigenen Zeile.

Nacheinander werden die Deklarationen in immer gleicher Reihenfolge eingetragen:

• Das Clearing
• Float
• Positionierungsarten
• Breite
• Höhe
• Hintergrund
• Textfarbe
• Textgröße
• Sonstige Texteigenschaften
• Der Innenabstand
• Rahmen
• Der Außenabstand

Das mache ich mittlerweile schon automatisch in dieser Reihenfolge.

Dabei kann ein Inhaltsverzeichnis sehr hilfreich sein. Die damit verbundene Mehrarbeit lohnt sich auf jeden Fall. Sollte man bei der mühevoll erstellte Website nach einem Jahr Änderungen durchführen müssen, hat man durch das Inhaltsverzeichnis sehr schnell den Überblick was wo steht.

Ein Inhaltsverzeichnis könnte so ausschauen:

Man kann natürlich noch hinter den einzelnen Punkten des Inhaltsverzeichnisses die Zeilennummern eintragen, darauf habe ich aber hier verzichtet.

Allgemeine Selektoren sieht bei mir meistens so aus:

Mit der ersten Anweisung setze ich die Abstände aller Elemente auf Null. Damit vereinheitliche ich die unterschiedlichen browserinternen Vorformatierungen und schaffe so eine gemeinsame Basis, von der aus ich alle Abstände neu definiere.

Das nennt man CSS-Prolog.

Das Wurzelement wird auf die Höhe des sichtbaren Bildschirmbereiches ausgedehnt

Für body werden Schrift,- und Hintergrundfarbe festgelegt. Außerdem Schriftgröße, Zeilenabstand und einige Schriftarten. Weitere Infos dazu findest du in diesem Artikel.

Die Standardschriftgröße für die wichtigsten Elemente werden definiert.

Alle Textabsätze bekommen einen unteren Abstand zugewiesen.

Die Listenzeichen werden ausgeschaltet. Da diese browserübergreifend oft nicht einheitlich dargestellt werden bastel ich mir lieber eine kleine Grafik als Listenzeichen und binde diese als Hintergrundgrafik ein. Das funktioniert browserübergreifend.

Default-Rahmen um Bilder und verlinkte Bilder werden auf Null gesetzt.

Alle Überschriften werden hier formatiert. Abweichendes dazu wird weiter unten in der CSS-Datei in den Unterseiten definiert.

Weiteres zur Ordnung in einer CSS-Datei könnt ihr hier nachlesen:

CSS – Ordnung 2

Hier findest du die dropdown_anfang.htm zum Quelltext rauskopieren.

Im Browser schaut es so aus:

Die XHTML-Struktur des Menüs ist folgende:

Die Untermenüs sind schon in die Menüliste eingeschachtelt. Zu beachten ist, das der Listenpunkt des Hauptmenüpunktes erst nach dem Submenü geschlossen werden darf. Den jeweils schließenden Hauptmenüpunkt habe ich fett hervorgehoben.

Die grundlegenden Formatierungen für die Links habe ich auch schon vorgenommen, damit wir uns ganz auf die Positionierung und Gestaltung der Submenüs konzentrieren können.

Los gehts! Bitte CSS ergänzen:

Die Liste, alle Hauptmenüpunkte und der umgebende Container (#topnavi) werden gefloatet und im Textbereich wird gecleart, um den normalen Textfluß wiederherzustellen.

Das Ergebnis:

Bitte CSS ergänzen:

Der Float wird für die zweite Menüebene wieder aufgehoben, damit diese Links später untereinander stehen.

Die Liste der zweiten Ebene wird absolut positioniert und aus dem Bildschirm geschoben, damit sie die Umgebung nicht mehr beeinflusst und im Normalzustand nicht zu sehen ist.

Wenn ein Hauptmenüpunkt gehovert wird, springt das Submenü wieder in den sichtbaren Bereich, weil die Positionsangabe left:auto; definiert wurde.

Der optische Stand der Dinge:

Einwandfrei!

Und jetzt mal im IE 7 öffnen.

Das Submenü klappt nicht aus

Der IE7 leidet am CSS Popup Bug, der bestimmte Angaben für das gehoverte Element (hier li) benötigt, wenn sich dessen Nachfahren (hier ul) ändern sollen.

Außerdem tritt beim IE7 der Whitespace-Bug auf, d.h. zwischen den li-Elementen des Submenüs sind Lücken zu sehen. Das kommt daher weil die li-Elemente durch die Angabe einer Breite HasLayout haben, die Links jedoch nicht. Davon sind auch die älteren IE’s betroffen.

Bitte den Conditional Comment ergänzen:

Im IE 7 ist alles in Ordnung, aber was ist mit dem IE 6?

Das Submenü klappt immer noch nicht aus. Das liegt daran das der IE 6 :hover nur in Verbindung mit a kennt. Mit li:hover kann er nix anfangen.

Mit etwas Javascript bekommen wir das in den Griff. Damit ist es möglich den li-Elementen bei onmouseover eine Klasse .sfhover hinzuzufügen, die dann per CSS angesprochen werden kann.

Bitte einen weiteren Conditional Comment hinzufügen:

Bitte CSS ergänzen:

Jetzt ist auch im IE 6 alles in Ordnung.

Inspiriert von: Fortgeschrittene CSS-Techniken

Nachdem der Kommentar eingetragen ist stelle ich leider öfter fest, daß das Zitat optisch kaum oder gar nicht hervorgehoben ist, was meist dann nicht so toll ausschaut.

Dabei ist es mit ein wenig CSS gar nicht so schwierig das zu ändern. Das Wort Zitat: soll automatisch eingefügt werden und das Zitatfeld optisch etwas aufgepeppt werden.

Zuerst trage ich in meinem Blog einen Testkommentar mit einem Testzitat ein. Dann schaue ich mit der Firefox-Erweiterung Firebug welchen CSS-Pfad ich benötige, um die Änderungen vorzunehmen:

#inhalt ol#commentlist li blockquote p

Okay, nun frisch in die style.css des Themes hineingekritzelt:

Das sieht ja schon mal deutlich anders aus. Jetzt fehlt nur noch das
Wort Zitat: vor dem Zitat. Dafür eignet sich die CSS-Pseudoklasse :before mit der Eigenschaft content, die hier zur Anwendung kommt:

Ein Beispiel was diese Gestaltungsanweisungen bewirken könnt ihr euch
hier anschauen.

Solltet ihr mit dem IE6 oder dem IE7 unterwegs sein, wird das Wort Zitat leider nicht eingeblendet, weil er mit der Pseudoklasse :before nix anfangen kann. Aber das der IE irgendwas nicht kennt oder falsch macht ist ja normale Härte und wundert sicher keinen von euch.

Hier findest du die footstickeralt_anfang.htm, zum Quelltext rauskopieren.

Im Browser schaut es so aus:

Die Quelltextstruktur ist folgendermaßen:

Wir haben ein Element was alles umschließt

#umhang

und eines welches #kopf und #textbereich umschließt:

#umhang_innen.

#fuss ist zwischen dem Ende von #umhang_innen und #umhang in den Quelltext geschrieben worden.

Theoretisch könnte man auch auf #umhang verzichten. Dieses alles umschließende Element wird jedoch oft benötigt, um eine Webseite horizontal zu zentrieren.

#umhang_innen benötigt eine Mindesthöhe von 100%.
Mit height:100%; wird die Höhe der Box auf die Höhe des sichtbaren Bereiches (Viewport) beschränkt, auch dann wenn die Menge des Inhaltes mehr Platz erfordert. Nur die Deklaration von min-height:100%; lässt die Box mitwachsen.

CSS ergänzen:

Wie wir sehen, sehn wir nichts.

Warum eigentlich nicht??

Bei einer Prozentangabe ist immer die Frage: Prozent von was?

In diesem Fall bezieht es sich auf die Höhe des Elternelementes, d.h. #umhang. Für #umhang ist keine Höhe definiert, also kann 100% nicht errechnet werden und fällt auf height:auto; zurück. Das Element wird nur so hoch wie sein Inhalt.

#umhang hat aber auch noch ein Elternelement: <body> und das
wiederrum hat auch noch einen Vorfahren: <html>.

Erst dann ist Schluß.

Da <html> kein Elternelement mehr hat, bezieht sich die Prozentangabe für <html> auf den sogenannten Initial Containing Block, das ist ein Rechteck in der Größe des sichtbaren Bereiches (Viewport).

CSS ergänzen:

Jetzt sieht es so aus:

Naja, da fehlt aber jetzt was!

Okay, da #umhang_innen die Deklaration min-height:100%; bekommen hat und #fuss im Quelltext außerhalb von #umhang_innen liegt, ist ja auch logisch das #fuss jetzt unterhalb des sichtbaren Bereiches liegt.

Für #fuss haben wir eine Höhe von 50px definiert. Mit einem entsprechenden negativen margin-top für #fuss hieven wir denselben wieder nach oben in den sichtbaren Bereich.

CSS ergänzen:

Das Ergebnis sieht jetzt so aus:

Ganz ordentlich.

Leider ist das Ergebnis im IE 6 nicht ganz so ordentlich, weil er mit min-height nix anfangen kann.

Da er jedoch height wie min-height behandelt können wir ihm mit einer Deklaration in den Conditional Comments auf die Sprünge helfen.

Conditional Comment ergänzen:

Jetzt ist auch der IE 6 glücklich!

Eine schönes Design mit Dropdown-Navi und sich überlagernden Elementen hurtig entworfen. Frisch gecodet, im Browser angeschaut und festgestellt, das die Dropdown-Navi hinter dem nachfolgenden Element aufklappt und somit unbenutzbar ist. Außerdem überlagern sich andere Elemente nicht so, wie du es dir gedacht hast.

Was tun??

Na klar, position:absolute; und /oder position:relative; hier und dort eingesetzt.

Noch immer nicht??

Okay, also wird massiver positioniert. Die ersten z-index tauchen auf. Bei Elementen die auf jeden Fall vorne sein müssen gleich zur Sicherheit mal z-index:5000; vergeben, damit das auch sicher klappt.

Es geht trotzdem nicht??

Nun wird nach der Trial und Error-Methode wild herumpositioniert und mit z-index nur so um sich geworfen. Ein Hauch von Verzweiflung liegt in der Luft.

Was kann ich bloß tun, damit Wunsch und Ergebnis eins werden?

Stapelung ist kein leichtes Thema, schon gar nicht wenn man alle Aspekte inklusive der üblichen Extrawürste für den Internet Explorer verstehen will.

Für den Anfang reicht es die Grundlagen zu verstehen und dabei soll dir dieses kleine Tutorial helfen.

Hier findest du die stapelung 1_anfang.htm, die den Anfang des Tutorials darstellt.

Im Browser schaut es so aus:

Im normalen Textfluss ordnen sich die Elemente untereinander an. In der natürlichen Stapelreihenfolge befindet sich das zuletzt notierte Element im Quelltext am nächsten zum Betrachter (Z-Achse). Durch negative margin-Werte können optisch ursprünglich untereinander platzierte Elemente übereinander geschichtet werden.

CSS-Ergänzung:

Das Ergebnis:

Die Stapelungsreihenfolge auf der z-Achse (zum Betrachter hin) ist hierbei nun:
-background h1
-background p
-Text h1
-Text p

Text und Hintergrund werden also getrennt geschichtet.

CSS-Ergänzung:

Das Ergebnis:

Wird h1 relativ positioniert überlappt es das nach oben gezogene p , weil es durch die Positionierung ungleich position:static; aus dem Textfluss raus ist.

CSS-Ergänzung:

Das Ergebnis:

Wird p durch position:relative; auch aus dem Textfluss genommen, überlappt es wieder die Überschrift. Beide sind zwar ungleich position:static;, das p kommt im Quelltext aber erst nach der Überschrift, ist also nun wieder vorne.

Die Stapelungsreihenfolge auf der z-Achse ist nun folgende folgende:
-background h1
-Text h1
-background p
-Text p

CSS-Ergänzung:

Das Ergebnis:

Jetzt ist h1 wieder vorne.

Mit z-index kann die Reihenfolge von überlappenden Elementen auf der z-Achse bestimmt werden. z-index wirkt nur auf Elemente die ungleich position:static sind.

CSS-Ergänzung:

Das Ergebnis:

h1 ist noch immer vorne.

CSS-Ergänzung:

Das Ergebnis:

Jetzt ist p wieder vorne, weil es einen höheren Z-Index-Wert als
h1 hat.

Daraus kann man ableiten, das je höher der Z-index-Wert, desto näher wird das Element zum Betrachter hin angeordnet.

Wir wir aber gesehen haben ist die Definition von z-index oft nicht nötig, da durch einfache Positionierung ungleich position:static; die Stapelreihenfolge auf der z-Achse schon ausreichend geändert wird.

Das wars erstmal. Vieles habe ich der Einfachheit halber weggelassen. Wenn ihr euch ausgiebig dazu informieren wollt, kann ich euch nur das Buch Fortgeschrittene CSS-Techniken von Corina Rudel und Ingo Chao ans Herz legen.

In der XHTML-Datei wird unmittelbar vor dem Ende von </head> folgendes eingefügt:

[if lte IE 8] heißt alle IE-Versionen, die kleiner oder gleich IE 8 sind. Da die verschiedenen Versionen des IE unterschiedliche Fehler haben, müssen die von dem Fehler betroffenen IE-Versionen auch innerhalb der ie.css gesondert angesprochen werden können.

Dazu gibt es folgende Möglichkeiten:
Sollen alle IE-Versionen angesprochen werden, schreibe die Anweisungen ganz normal in dieie.css.
Soll das nur der IE 7 zu sehen bekommen, notiert vor der normalen Anweisung: *:first-child+html
z.B. dann *:first-child+html li {zoom:1;}
Alternativ geht auch *+html li {zoom/**/:1;}

Kürzer wäre nur *+html vor der normalen Anweisung, z.B. dann *+html li {zoom:1;} Das liest dann außer dem IE 7 noch der IE 5, aber da dieser nicht mehr weit verbreitet ist, reicht die verkürzte Schreibweise wohl i.d.R. aus.

Wenn das nur der IE 6 und IE 5 sehen sollen, notiert ihr vor der normalen Anweisung: * html z.B. dann * html li {zoom:1;}

Sollte das nur der IE 5 + IE 5.5 sehen schreibt ihr:
* html li {zoom /**/:1;} – Wichtig ist die Leerstelle vor /**/ !!