5 Tipps für die Codierung von XHTML / CSS-Layouts

Dies sind nur einige Tipps, die mir beim Übergang von der Tabelle half-basierte Web-Design-Standards konforme CSS-basierte Layouts.

1) Lesen Sie Thenoodleincident Design rant.
Dies ist der Artikel, die es geschafft haben "Klick" in meinem Kopf über die Verwendung von css für Layouts, sie erklärt es klar und eingehende auf das Denken hinter Stil Trennung von Inhalt.

2) Dont over-Layouts erschweren
Verwenden Sie größere Bilder mit mehr Details als Hintergrund und lag transparente divs over the top - auf diese Weise haben Sie mehr Platz für die Browser-Inkompatibilitäten und andere Eigenheiten, die Sie zu erkennen und zu vermeiden oder in Zukunft lernen.

3) div Dont go mad!
Sie sind nicht neu zu Tabellen-Layouts mit divs, brauchen Sie nicht eine andere div für jeden einzelnen Bereich - Sie können zum Beispiel andere Elemente zu Ihrem gewünschten Effekt zu erzielen. Dh Sie können Position und Stil Absätze und andere Seitenelemente - es muss nicht immer ein div!

4) Semantik - wie die Dinge getan werden sollte,
Das ist etwas äußerst wichtig, die Struktur Ihrer html, immer mit der korrekten HTML-Elemente - wenn ihr eine Liste von Dingen, Markierung, bis es eine Liste - dazu gehört auch Ihr Navigationssystem. Wenn die Paare von Dingen, eine Definitions-Liste - erinnern Sie verwenden keine Sorgen, was die Standard-Definition-Liste aussieht - Sie können es Stil, wie Sie wollen, müssen Sie bei der Effekte können Sie überrascht sein. Verwenden Sie Überschriften (H1, h2 usw.) zu Recht - nicht nur für einen kühnen Stil in normalen Text, markieren Sie es als eine Überschrift und Stil, die in Ihrem CSS.

5) Browser-Prüfung as you go along.
Statt der Erstellung Ihres gesamte Layout, dann überprüfen sie und finden, dass ihre in einem oder mehreren Browsern, die Sie dann fix und Brüche in etwas anderes verschraubt. Erstellen Sie die Header-Bereich, im Browser zu überprüfen und sie zu beheben, dass etwas nicht stimmt. Dann erstellen Sie die NAV, das gleiche tun. Erstellen Sie den Körper, das gleiche tun. Durch die Zerlegung so müssen Sie nicht durch Belastungen von Code und Stile zu waten, um das Problem zu finden. Think überschaubare Einheiten.

Wenn Sie gerne diesem Dig it!