7 wichtige CSS-Layout-Tipps

Das Schwierigste bei CSS ist das Layout Ihrer Website. Hier sind ein paar Tipps, die genau damit umgehen. Einige dieser Tipps sind nicht gerade neu oder Raketenwissenschaft, aber hoffentlich ersparen sie jemandem irgendwo ein bisschen Ärger!

Tipp 1: Löschen Sie die Standardeinstellungen für Abstand und Rand, bevor Sie mit der Arbeit beginnen.
Verschiedene Browser haben unterschiedliche Standard-Ränder- und Füllgrößen, sodass Sie sozusagen mit einem Neuanfang beginnen möchten. Verwenden Sie diesen Befehl:

*
{
Rand: 0;
Polsterung: 0;
Rand: 0;
}

, um alle Standardeinstellungen für Rand und Abstand zu löschen. Beachten Sie auch den Rand, der auf 0 gesetzt ist. Bitte beachten Sie, dass Sie dadurch auch den lästigen violetten Rand rund um anklickbare Bilder loswerden, obwohl einige Leute argumentieren, dass der violette Rand für die Zugänglichkeit und Benutzerfreundlichkeit notwendig ist. Aber viele Leute mögen die runden Bilder mit violettem Rand nicht, und das ist eine Möglichkeit, sie auf einen Schlag loszuwerden, ohne sie einstellen zu müssen img border=0 für jedes Bild (was in jedem Fall gegen die strengen Markup-Regeln verstößt).

Tipp 2: Um Ihr Layout zu zentrieren, verwenden Sie ein Container-Div, um Ihren gesamten Inhalt aufzunehmen
Deklarieren Sie es wie folgt:

#Container

{
Rand: 0 Auto;
Breite: xxxpx;
}

Hier sind einige Punkte zu beachten. Deklarieren Sie die Breite NICHT mit 100 %. Dadurch wird das gesamte Objekt außer Kraft gesetzt, da Sie lediglich die Unterelemente im Container deklarieren und SIE dann mithilfe von zentrieren müssen Rand: 0 automatisch. Das ist SEHR SCHLECHT, da es bedeutet, dass Sie das zentrale Layout nicht nur einmal, sondern an mehreren Stellen für jedes Element in Ihrem Container deklarieren müssen.

Tipp 3: Arbeiten Sie von oben nach unten
Beginnen Sie buchstäblich mit der Arbeit an Ihrem CSS-Layout, beginnend mit den obersten Elementen in Ihrem Design sowie den „obersten“ Elementen in Ihrem HTML, wie dem Textkörper, sowie Ihren Hauptcontainern.

Deklarieren Sie Ihre CSS-Befehle auf der höchstmöglichen Ebene und versuchen Sie, etwas nur einmal zu deklarieren und es durchgehend kaskadieren zu lassen. Überschreiben Sie die Befehle auf einer niedrigeren Ebene nur, wenn dies unbedingt erforderlich ist. Dies verhindert eine ausführliche CSS-Datei, die schwer zu pflegen und zu verstehen ist. Zum Beispiel, wenn Sie haben {margin: 0 auto} Einstellungen für jedes einzelne Sub-Div in Ihrem Container – Sie sind in Schwierigkeiten.

Tipp 4: Dokumentieren Sie, was Sie tun, und verwenden Sie Firebug und den Firefox-Browser zum Debuggen
Sie schreiben Ihren CSS-Code nicht nur für sich selbst, eines Tages muss irgendein armer Kerl ihn debuggen. Machen Sie in Ihrer CSS-Datei zahlreiche Kommentare, um zu erklären, warum Sie Dinge auf eine bestimmte Art und Weise tun.

Dementsprechend kann es sein, dass Sie häufiger als Sie denken (oder sogar Ihr eigenes) das CSS einer anderen Person reparieren müssen, als Sie denken. Verwenden Sie das Firebug-Add-on für Firefox, um Ihr CSS zu debuggen. Dies ist lebensrettend, da es Ihnen einen Einblick darüber gibt, wo genau Ihr Design fehlerhaft sein könnte und warum.

Das einzige Problem dabei ist, dass Ihr Design möglicherweise in Firefox perfekt funktioniert, nicht jedoch in IE5, IE6 oder IE7. Das bringt uns zum nächsten Tipp.

Tipp 5: Entscheiden Sie, für welche Browser Sie Ihr CSS erstellen möchten, und testen Sie es von Anfang an
Einige Puristen bestehen darauf, sicherzustellen, dass Ihre Website für alle möglichen Browser funktioniert, andere sorgen dafür, dass sie nur für die „wichtigsten“ Browser funktioniert. Woher wissen Sie genau, welche Browser am häufigsten verwendet werden? Wieder einmal kommen die W3-Schulen zur Rettung.

Auf der folgenden Seite können Sie sehen, welche Browser am beliebtesten sind: http://www.w3schools.com/browsers/browsers_stats.asp. Auf dieser Seite können Sie sehen, dass so etwas wie IE5 nur von etwa 1.1 % der Browser verwendet wird. Es bleibt Ihnen überlassen, ob Sie es für sinnvoll erachten, Ihr CSS so zu erstellen, dass es mit diesem Browser kompatibel ist, oder ob Sie lediglich die Kompatibilität beispielsweise mit IE6, IE7 und Firefox testen. Was auch immer Sie tun: Wenn Sie mit der Erstellung Ihres CSS beginnen, beginnen Sie ganz oben und testen Sie im Laufe der Zeit jede einzelne Einstellung in jedem Browser. Es gibt nichts Schlimmeres, als eine perfekte Website in Firefox zu erstellen und dann direkt nach dem Codieren einer 1000-Zeilen-CSS-Datei festzustellen, dass sie im IE6 fehlerhaft ist. Den Code dann nachträglich zu debuggen und zu reparieren, ist ein Albtraum.

Tipp 6: Hier ist ein peinlicher kleiner Tipp zum Korrigieren Ihres CSS in IE6 oder IE7
Nehmen wir an, Ihr Design funktioniert in Firefox einwandfrei, ist jedoch in IE6 fehlerhaft. Sie können Firebug nicht verwenden, um herauszufinden, wo das Problem liegen könnte, da es in Firefox FUNKTIONIERT. Sie haben nicht den Luxus, Firebug in IE6 zu verwenden. Wie debuggen Sie also ein IE6- oder IE7-Stylesheet? Ich habe oft festgestellt, dass es hilft, etwas hinzuzufügen {Rand: 1 px durchgehend rot} or {Rand: 1 px einfarbig lila} zu den problematischen Elementen. So lässt sich oft erkennen, warum bestimmte Elemente nicht in den vorhandenen Platz passen. Es ist ein peinlicher kleiner Tipp, da er so primitiv und einfach ist, aber er funktioniert!

Tipp 7: Floats verstehen
Es ist wichtig, das Schweben von Elementen zu verstehen, insbesondere wenn es darum geht, Ihre schwebenden Elemente in den verschiedenen Browsern zum Laufen zu bringen!

Grundsätzlich werden Elemente wie Divs nach links oder rechts verschoben (niemals nach oben oder unten, nur seitwärts). Hier sind einige Dinge, die Sie bei schwebenden Elementen berücksichtigen sollten. Für jedes schwebende Element muss eine explizite Breite angegeben werden. Wenn Sie schwebende Divs verwenden, um ein 3-Spalten- oder 2-Spalten-Layout zu erstellen, geben Sie die Breiten lieber in Prozentsätzen als in festen Breiten an. Wenn Sie Prozentsätze verwenden, stellen Sie sicher, dass sich die Prozentsätze nicht auf 100 summieren %, führt dies oft dazu, dass die Spalte ganz rechts unter den Rest fällt, was deutlich darauf hindeutet, dass Sie versuchen, etwas in den verfügbaren Platz einzubauen, der dafür zu breit ist. Verwenden Sie lieber Prozentsätze, die in der Summe etwas unter 100 % ergeben, z. B. 25 %, 49 %, 24 % für eine linke Spalte, eine mittlere Spalte und eine rechte Spalte.

Floating-Elemente können äußerst komplex zu verstehen sein und es lohnt sich, einige Zeit auf guten Websites zu verbringen, die spezifische Richtlinien und Tipps bieten, wie z Position ist alles Webseite.

Zusammenfassung
Diese CSS-Tipps für das Layout sollten Ihnen hoffentlich etwas Zeit und Mühe ersparen, wenn Sie das nächste Mal ein tabellenloses Design in die Einreichung einbringen müssen! Dies war ein Gastbeitrag von Christine Anderssen.