In diesem Artikel wird erläutert, wie Sie ein 3-Spalten-Layout in CSS erstellen. Anweisungen gelten für CSS3 und älter.

Zeichnen Sie Ihr Layout

Sie können Ihr Layout auf Papier oder in a Grafikprogramm. Wenn Sie bereits einen Drahtrahmen oder ein noch umfangreicheres Design im Sinn haben, vereinfachen Sie es auf die Basisboxen, aus denen die Site besteht. Dieses Design, das diesem Artikel beiliegt, hat drei Spalten im Hauptinhaltsbereich sowie eine Kopf- und Fußzeile. Wenn Sie genau hinsehen, können Sie feststellen, dass die drei Spalten nicht gleich breit sind.

Nachdem Sie Ihr Layout gezeichnet haben, können Sie sich über Dimensionen Gedanken machen. Dieses Beispieldesign wird die folgenden grundlegenden Abmessungen haben:

• Nicht mehr als 900 Pixel breit
• 20 px Bundsteg links
• 10 px zwischen Spalten und Zeilen
• Spalten mit einer Breite von 250 Pixeln, 300 Pixeln und 300 Pixeln
• Die obere Reihe ist 150px hoch
• Die untere Reihe ist 100px hoch

Schreiben Sie einfaches HTML/CSS und erstellen Sie ein Containerelement

Da diese Seite gültig ist HTML document, beginnen Sie mit einem leeren HTML-Container.

Fügen Sie die grundlegenden CSS-Stile hinzu zu Nullen Sie Seitenränder, Ränder und Abstände. Während es andere gibt Standard-CSS-Stile Bei neuen Dokumenten sind diese Stile das Minimum, das Sie für ein sauberes Layout benötigen. Fügen Sie sie dem Kopf Ihres Dokuments hinzu.

Um mit der Erstellung des Layouts zu beginnen, fügen Sie ein Containerelement ein. Es kommt manchmal vor, dass Sie den Container später loswerden können, aber für die meisten Layouts mit fester Breite erleichtert das Containerelement die Verwaltung in verschiedenen Webs Browser.

Gestalten Sie den Container

Der Container legt fest, wie breit der Inhalt der Webseite sein soll, sowie alle Ränder außen und die Füllung innen. Für dieses Dokument ist der Container 870 Pixel breit mit einem 20 Pixel großen Bundsteg auf der linken Seite. Der Bundsteg wird mit einem Randstil eingerichtet, aber die Polsterung des Containers wird auf Null gesetzt, um zu verhindern, dass Elemente so breit wie der Container sind.

Wenn Sie Ihr Dokument jetzt speichern, ist es schwierig, den Container zu sehen, da er nichts enthält. Wenn Sie Platzhaltertext hinzufügen, können Sie das Containerelement klarer sehen.

Verwenden Sie ein Headline-Tag für den Header

Wie Sie sich entscheiden, die Kopfzeile zu gestalten, hängt stark davon ab, was darin enthalten ist. Wenn die Kopfzeile nur eine Logografik und eine Überschrift enthält, verwenden Sie ein Überschriften-Tag (

) ist sinnvoller als die Verwendung von a

. Sie können die Überschrift genauso gestalten wie ein Div, und Sie vermeiden überflüssige Tags.

Der HTML-Code für die Kopfzeile befindet sich oben im Container und sieht so aus:

Um die Stile darauf festzulegen, wurde unten ein roter Rahmen hinzugefügt, damit Sie sehen konnten, wo er endet, die Ränder und der Abstand wurden auf Null gesetzt, die Breite auf 100% und die Höhe auf 150px eingestellt.

Vergessen Sie nicht, dieses Element mit dem float: left; Eigentum. Der Schlüssel zum Schreiben von CSS-Layouts besteht darin, alles freizugeben, sogar Dinge, die die gleiche Breite wie der Container haben. So wissen Sie immer, wo sich die Elemente auf der Seite befinden.

EIN CSS-Nachkommenselektor wendete Stile nur auf H1-Elemente an, die sich innerhalb des #container-Elements befinden.

Um drei Spalten zu erhalten, erstellen Sie zunächst zwei Spalten Column

Wenn Sie mit CSS ein Layout mit drei Spalten erstellen, müssen Sie Ihr Layout in Zweiergruppen aufteilen. Also für dieses dreispaltige Layout die mittlere und rechte Spalte und gruppiert und neben der linken Spalte in einem zweispaltigen Layout platziert wobei die linke Spalte 250px breit und die rechte Spalte 610px breit ist (je 300px für die beiden Spalten plus 10px für den Zwischensteg dazwischen .) Sie).

Die linke Spalte wird nach links verschoben, während die andere nach rechts verschoben wird. Da die Gesamtbreite beider Spalten 860px beträgt, befindet sich zwischen ihnen ein 10px Zwischensteg.

Fügen Sie zwei Spalten innerhalb der breiten zweiten Spalte hinzu

Um die drei Spalten zu erstellen, fügen Sie zwei Divs in die breitere zweite Spalte ein, genau wie Sie im letzten Schritt 2 Divs in der Containerspalte hinzugefügt haben.

Da sich diese beiden 300px breiten Boxen in einer 610px breiten Box befinden, befindet sich wieder eine 10px breite Rinne dazwischen.

In der Fußzeile hinzufügen

Nachdem der Rest der Seite nun formatiert ist, können Sie die Fußzeile hinzufügen. Verwenden Sie ein letztes div mit einer "Fußzeile"-ID und fügen Sie Inhalte hinzu, damit Sie sie sehen können. Sie können auch oben einen Rahmen hinzufügen, damit Sie wissen, wo er beginnt.

Fügen Sie Ihre persönlichen Stile und Inhalte hinzu

Nachdem Sie das Layout fertiggestellt haben, können Sie mit dem Hinzufügen Ihrer eigenen persönlichen Stile und Inhalte beginnen. Denken Sie daran, dass die Rahmen in der Kopf- und Fußzeile hinzugefügt wurden, um die Layoutabschnitte anzuzeigen, nicht speziell für das Design.