TUTORIAL: Multi-Spalten-Layout mit CSS Float - Teil 2

Dies ist ein mittleres Niveau Tutorial und ist die Fortsetzung einer früheren Tutorial, das gefunden werden kann hier . Es setzt voraus, dass der Leser über gute Kenntnisse und Verständnis für HTML und CSS.

Einführung

In unserem vorherigen Tutorial, sahen wir, wie wir Multi-Spalten-Layouts mittels semantischer Markup und CSS, um Container zu manipulieren erstellen können. Die Methoden, die wir verwendet benötigt keine Workarounds, Hacks oder Browser-spezifischen Behandlungen. Hier, gut mit dem weiterhin durch die Untersuchung, wie die Techniken Mängel und Gefahren, ohne das Layout zu überwinden.

Hier sind die Markup-und CSS benutzt, waren wir mit am Ende des vorherigen Tutorial links.




Derzeit muss unser Dokument zu machen fast identisch in allen aktuellen Browsern * ( Abbildung 1 ).



* Mit dem "Strom", lose Im Bezug auf Internet Explorer 7, Firefox 2, Opera 9 und Safari 3. Die aktuelle Version von Konquorer sollte in diese Liste aufgenommen werden, jedoch habe ich keinen Zugang zu diesem Browser.

Arbeiten mit dem Content-Box Box-Modell und Padding

Das erste, was wir brauchen, zu diskutieren und zu verstehen, ist das Box-Modell. Dies zu verstehen ist wichtig, wenn wir eine feste Pixel-Breite definieren für ein Block-Element. In diesem Fall ist die <div> Elemente, die wir für die Spalten.

Es gibt zwei Arten von Box-Modelle, die "content-box" und die "border-box". Der Unterschied zwischen ihnen ist, wie wir ihren Dimensionen zu betrachten. Wo die Breite einer border-Feld gemessen Form Grenze zu Grenze, ein Content-Box ist in Bezug auf den Content-Bereich gemessen. Dies ist unten dargestellt ( Abbildungen 2 und 3 ).



box_content.gif
Das Box-Modell am häufigsten unterstützte heute ist der Inhalt-Box.

Da weve definiert bestimmten Breiten für die Spalten, wir wollen nicht zu ihrer Polsterung oder Margining berühren. Ausbau dieser wäre in der Tat, erweitern Sie den kumulativen Breite der Spalte und führen unsere Spalten zu wickeln. Deshalb haben wir diese zu normalisieren, indem sie auf "0".

Um diese Idee zu formulieren, wenn ich ein Content-Box erstellen und die Breite 200 Pixel, dann hat 10 Pixel Padding auf allen Seiten, würde die Box optisch machen als 220 Pixel.

Auch wenn es die counter-intuitive, anstatt der padding einmal, um den Container, wenden wir es mit den Text-Elemente innerhalb. Diese Elemente wurden nicht gegeben bestimmten Breiten und damit natürlich in Einklang mit den Behältern Content-Bereich. Dies war das letzte Stück von CSS Wir haben in den letzten Tutorial.



Wir könnten natürlich, genauer gesagt mit den Abmessungen unserer padding, indem Sie oben, rechts, unten und von links Dimensionen. Lets dazu vorübergehend mit dem <li> Element mit der Kurzschrift.



"Wie bekomme ich alle Spalten gleichermaßen expandieren?"

Die kurze Antwort ist: "Wir nicht. "Was wir allerdings, den Eindruck entstehen zu tun, dass dies vorkommen, indem Sie einen grafischen Hintergrund. Wir gelten nicht der Hintergrund für jede Spalte, individuell. Stattdessen nutzen wir einen einzigen Hintergrund-Bild auf die pare keine Container. In diesem Fall die <div> als "page_conatiner" identifiziert. In Abbildung 4 Sehen wir, wie die entsprechende Hintergrund aussehen wird. Um dies zu erreichen, müssen auch zu schaffen oder zu erhalten, eine Grafik, die 760 Pixel breit und 1 Pixel groß ist.



In der CSS können, entfernen wir den festen Farben, die wir früher für den angegebenen Spalten.



Weiter, gut für unsere Grafik, die standardmäßig wiederholen, oder Fliesen.



Wenn wir die Seite zu machen, scheint es, als ob die Spalten vertikal zu erweitern und auch unabhängig davon, wer viel Inhalt haben wir in einer bestimmten Spalte.



Arbeiten mit dem <ul> als Menü

Das nächste, was gut Blick auf das Menü. Die Gründe für die Verwendung von unsortierten Listen als Menü und die fortschrittliche Manipulation von ihnen wäre ein gutes Thema für ein Tutorial, es ist jedoch nicht in den Anwendungsbereich dieser ein.

Ändern einer <ul> als Menü verwendet zu sein scheint ein Stolperstein für viele von uns. In der Regel ist das Ziel der Gestaltung des Menüs ist es, daß jedes Glied erstrecken sich auf die horizontale Breite der Spalte. Darüber hinaus, wie für die Benutzer den Cursor mit der gesamten Region zu interagieren sowie mi.

Das Ziel ist erreicht, einfach, indem angewiesen diese Links als Block-Level-Produkten zu machen, im Gegensatz zu Inline-Level-Produkten. Nun auch zu einer Verminderung der Polsterung der <li> Container auf "0" Fügen Sie stattdessen das gewünschte padding den <a> Elemente. Nun werden die Schaffung einer neuen Auswahl in unserem CSS.



Für die Zwecke des Sehens den Cursor-Interaktionen, und fügen Sie noch einen weiteren neuen Selektor, als auch - einen Pseudo-Zustand der <a> Element.





Fazit

In diesem Tutorial weve gesehen, wie die Errichtung und Aufrechterhaltung eines drei-Spalten-Layout mit semantischen Markup und CSS - ohne Umwege. Darüber hinaus erforscht weve, wie Sie häufige Fehler, die, sonst brechen unsere Aufteilung überwinden.

Während dieses Tutorial nicht ihn richten, kann die gleiche Technik, um Anteil Layouts angewendet.

Bitte PM mich mit Anregungen zur Verbesserung dieses Tutorial.

Danke!
dM

Ja, super Tutorial. Dank DM! Wird es Teil-3? - Seine unwiderstehlich.

Hmmm. Ich hatte nicht gedacht, ein Teil 3. Im nicht sicher, wo sie mit diesem. Ich denke, es George.

Hi DM, Guten Tag,
Ich habe einige Fragen. Lassen Sie uns sagen, das Hintergrundbild nicht wiederholen, so dass es Mitte oder wo sonst einige Position (links, rechts). Wie würden Sie empfehlen, dass ich es tun?


Wenn wir viele Seiten, würden Sie empfehlen, die ich kopieren und von meiner ersten HTML-Seite? sagen, ich habe mehr als 50 Seiten Links. (oder sogar mehr). Was die Web-Seiten-Layout Konsistenz betrifft, wie würden Sie empfehlen uns zu tun? Ihre Zeit ist sehr zu schätzen.

Vielen Dank,
g.

Das Hintergrundbild in der "page_container"-Element oder ein Container, kann auf verschiedene Weise, indem Richtlinien für die "background"-Definition manipuliert werden.

Im Rahmen der allgemeinen "Hintergrund" Definition (en) können Sie festlegen,
- Eine Farbe
- Ein Bild
- Wie sich das Bild wiederholt, oder nicht
- Wie reagiert das Bild in einem Scroll-Raum
- Die vertikale Position des Bildes durch Anpassung oder durch Messung Pixel
- Die horizontale Position des Bildes durch Anpassung oder durch Messung Pixel



Dies kann auch eine Kurzform erreicht werden...

(Ich habe nicht testen, aber die nahe genug für ein Beispiel)



Ich empfehle, dass site wide Stile immer in einer einzigen Datei untergebracht sind, wann immer möglich. Wenn Schwankungen innerhalb einer Website erforderlich sind, schlage ich vor, dass die unterschiedlichen Definitionen gegeben werden ihre eigenen Stylesheets und zusätzlich pro Seite geladen werden.

Heres ein Beispiel...

Ich verstehe nicht, diesen Teil. Ein Tutorial über das Duplizieren Ähnliche Seiten wäre meines Erachtens sinnvoll. Allerdings ist es bis zum Moderator zu entscheiden. Nochmals vielen Dank an dieser nettes Tutorial.

Wow! Ich wusste nicht, Id so behandelt werden, eine Anleitung, wie diese, wenn ich in dieser Website. Die besten CSS Tutorials Ive über. Vielleicht ist das Ihre Art der Anweisung, aber ich habe keine Zeit zu tun, ein Tutorial und tat es trotzdem!

Menü "Erweitert" Manipulation wäre eine gute Möglichkeit, um fortzufahren.

Eine Sache, die haben mich war das "weiße" Zeichen auf beiden Seiten des Containers. Wenn Sie wollte, dass Raum für Gestaltung und zusätzliche Funktionalität, wie würden Sie es tun?

Hey, danke. Ill bestimmt werden, die mehr von Ihnen.

Dies ist einer der besten Tutorials zu CSS-Layout, das Ive lesen! Danke!

Im das Problem, dass das Hintergrundbild des #page_container in Firefox. Ich kann sie sehen, ob ich eine Höhe für die Menge #page_container, aber ansonsten ist es nicht zu zeigen. Jede raten, was ist passiert?

Thanks so much again!

Wenn es nicht ein clear: both; Objekt in der pare keine Container, wird der Container nicht entstehen Höhe von der 3 Spalten, weil Theyve verließ das machen fließen. Ich war mit der Erfüllung dieser #Fußzeile.

Haben Sie die Fußzeile? Ist es innerhalb der #page_container div?

Wenn keine dieser richtig erscheint, bitte posten Sie Ihre Markup so kann ich sehen.


...und vielen Dank für das Kompliment. Im froh, Leute etwas aus dem Spiel.

Ich habe in der Tat eine Fußzeile mit clear: both. Aber es hatte auch einen Float auf ihm, die Dinge brechen scheint. Als ich den Schwimmer holte, war es gut!

Also, müssen Sie mindestens ein Objekt mit klaren und haben keinen Puffer, ist das richtig?

...und Sie sind sehr willkommen. Im Lehrer, ich. Ich weiß also, guten Unterricht. Und you've got it! You're wonderful zu brechen it down. Wenn Sie sich jemals in SF und brauchen einen Job, Im der Direktor der Ausbildung an einer Schule namens lernen. Look me up!

-David

Nochmals vielen Dank, David.

Ja, der Schwimmer Richtlinie dazu führen, dass ein Objekt in den normalen Ablauf der Seite ausgeschlossen werden. Die klare Anweisung führt dazu, ein Objekt zu betrachten für die schwammen Ländern zeigen, und wird der Container als auch beeinflussen.

Glad you got it fixed!