CSS-Layout-Website: Layout in drei Spalten

Unser Layout

Aufgabe

Unser Ziel - die Schaffung des Layout von drei Spalten mit CSS. Diese Anordnung kann die Grundlage der Informationen von der Website "cap" sein, die rechten und linken Lautsprecher für das Menü und zusätzliche Informationen mit der Zentraleinheit des Textes als "Keller" für das Urheberrecht und andere Kontakte. Typisch für den Inhalt des Projekts Layout.

Zweifellos kann dieses Layout nicht ein Wunder der Design Gedanken genannt werden, aber man kann immer diese Vorlage in der "göttlichen Form" bringen prkticheski indem Sie die richtigen Schriften der Wahl ihrer Größe, eine schöne und richtige Logo hinzufügen. Selbst Komplikation des Layouts, das Hinzufügen neuer CSS-Einheiten nicht schwierig sein.

Verwendete Technologien und Browser-Unterstützung

Site-Layout wird vollständig in CSS, geplant "gelegentliche" Nutzung von XHTML und JavaScript implementiert.

Gebrauchte CSS-Codierung wird von Internet Explorer 6, aktuelle Versionen von Mozilla und Opera unterstützt. Route einige Tweaks, das Layout wird in Internet Explorer arbeiten 5. Das sollte genug sein. Unsere CSS ist ähnlich gezwungen, den Geschmack Textbrowser und andere exotische Geräte zu sein.

Die Effizienz des Codes in IE 4, Netscape 4 und ältere Browser wird nicht überprüft, aber ich bin sicher, dass es Probleme geben wird. schauen Allerdings ist es nicht entscheidend, bei den Statistiken über die Popularität von Browsern HotLog, spylog auch liveintenet.

Die Vor- und Nachteile dieser Methode der CSS-Layout-Website

Im Layout gibt es ernsthafte Profis und hinreichend schwere Mängel. Sie müssen entscheiden, was für Ihre Website und seinen Besuchern wichtiger ist.

Nachteile:

• Es funktioniert nicht in Internet Explorer 4, Netscape Navigator 4 und ältere Browser.
• CSS-Codierung (Blöcke und deren Positionierung zu schaffen) wird von modernen Browsern unterstützt nicht perfekt, so dass die Seite sollte für kleine, aber unangenehme Unterschiede in der Darstellung der Seite in Ihrem Zimmer verwendet in allen Browsern getestet werden.
• Mehl mit vertikalen Positionierung und Festlegung der Höhe der Elemente in CSS. Es ist nicht so stolz, wenn Sie fit mit einer Genauigkeit kein Fan aller Elemente sind bis auf das Pixel.
• Für unser Layout setzt voraus, dass die Säule mit dem Hauptinhalt eine beeindruckende Höhe als die Seiten Säulen hatten. Andernfalls wird die Seite unordentlichen aussehen. Zu ihrer Kreditkarte, sagen wir, ist die Nachfrage typisch für die meisten Seiten mit einer vertikalen Design. Wenn die Seiten mit der Hand geschrieben werden (und nicht durch Skripte generiert), kann der Raum "beenden" Zeilenumbrüche.
• Schwierig, eine tabellarische Layout neu zu erlernen. Zu Beginn von margin'ov padding'ov wird auch krank Kopf sein

Plus:

• Nachdem die CSS-Layout gemeistert, es ist einfach, die Code, Änderungsarten zu verstehen. In einer durchdachten Anordnung von CSS-Einheiten kleinere Designänderungen ist in irgendeiner Weise ähnlich ist nicht schwer - es ist genug, um die Datei mit CSS zu bearbeiten.
• Text-Browser und andere Geräte zur Eingabe in begrenzte Informationen hat unser Layout möchten - ohne Styles, es ist ein einfältiger Text in einer Spalte zu einer minimalen Anzahl XHTML Design-Elemente.
• Ohne CSS-Stylesheet (.. Dh, ordentlich XHTML) Layout - diesen Titel an der Spitze und die nachfolgende Überschrift für den Haupttext. "Kutteln" (Links, Urheberrechte, Navigation, Nachrichten - all das ist nicht das, was der Benutzer auf eine Seite gekommen ist) verweilt in den Flügeln am Boden. Eine solche Anordnung für die Informationen in Bezug auf die Website von einfachen Geräten von Vorteil wäre, in eine zur Eingabe von Informationen ,, ist die Essenz der Suchroboter - sie lieben, zu welchem ​​Zeitpunkt ist ein Text auf der Seite, aber nicht ewig Tabellen-Tags.
• Schnelle Anzeige Browser. Im Falle der Einführung Seiten oder nicht schnelle Verbindung kann der Besucher beginnen den Haupttext, noch geladene Seite im Menü und so weiter auszusprechen.
• "Rubber" Layout - die Breite des Layouts der Blöcke hängt von der Größe des Browser-Fensters, so dass verschwindet nicht nützlich Platz auf dem Bildschirm.
• Einfache Implementierung für diese CSS-Layout-Version der Seite für den Druck.
• Reinigen Sie XHTML-Code und Design mit CSS, aber keine Tabellen - ist "cool" ist auch akut modisch .

Vielleicht, überwiegen die Profis. Also, wenn Ihre Website ist 3.11 auf Windows nicht gewidmet und dem entsprechenden Raum, wenn Sie bereit sind, auch auf das Layout komplexer Elemente mit Nicht-Standard-Standort hinzuzufügen ist das CSS-Box-Modell zu lernen, nicht möchten, können Sie mehr sagen.

Ein wenig Theorie CSS-Layout-Sites (Erstellung und Positionierung von CSS-Einheiten)

Auslegt, die Theorie der keine Lust, noch die Fähigkeit. Das Thema ist komplex und umfangreich. Ich werde versuchen, auch Links kurz, was auf "loszuwerden" out wird direkt im Layout verwendet werden.

Somit sind die Verbindungen:

• www.w3.org/TR/REC-CSS2/box.html - offizielle CSS - Spezifikation Blöcke. Beachten Sie die Blockparameter - Polsterung, Marge, Grenze, Breite - dann von dem, was eine Einheit besetzten Raum darstellt. Seite einzig wahre Samurai.
• www.w3.org/TR/REC-CSS2/visuren.html - Die offizielle Beschreibung der CSS - Positionierung (Position auf der Seite) blockiert. Die Handlung ist ähnlich ausschließlich für Menschen unbeugsamen Wunsch gestaltet. Beachten Sie die «Positionierschema», «normale Fluss», «Relative Positionierung» und «Absolute Positionierung» - alles, was für das Layout benötigt werden.
• www.webmascon.com/topics/designdetails/19a.asp - «philosophischen" Kunst des CSS - Layout gibt es eine allgemeine Informationen und nützliche Links.
• www.webreference.com/html/tutorial9/1.html - Siehe "obuchalka" in CSS - Einheiten.
• Beispiele für CSS-Layouts zusammen mit dem Code:
  www.thenoodleincident.com/tutorials/box_lesson/boxes.html
  www.glish.com/css/
  www.bluerobot.com/web/layouts/
• Über CSS-Positionierung auf dem russischen. Eine wunderbare Ressource, eine Fülle von praktischen Rezepte für jeden Tag, an jedem Standort:
  www.htmlbook.ru/content/181.html
  
• Auch rate ich dir, ein Buch oder laden Sie eine elektrische Variante zu kaufen (die auch gibt es eine gemeinsame, nicht weiß) "Web-Mastering-Tools CSS» Michael Dubakova. Nützliche Anteil von 2, 8 und 9 des Kopfes.

Jetzt, nur für sich. Block - ein rechteckiges Webseite Element, das durch einen Block (zum Beispiel <div> oder <p>) definiert Elemente (on-Ungläubiger, Tags) XHTML. Das Gerät nimmt etwas Platz und endet mit einem Newline, das Paar <div> Element wird auf der ersten Seite unter dem anderen angeordnet sein, denn es ist ein Block-Level-Elemente ist. Ein paar des Elements <i> wird nicht sein, t. To. Es Inline-Elemente.

C mit Hilfe von CSS können Sie die Parameter der Blöcke definieren - die Außenflächen (Marge), Rahmen (Grenze), zum Inhalt (Padding) Klotzen auf, in der Tat, den Inhalt der Breite (Breite). Der Inhalt des CSS-Block kann Text, Bilder, verschachtelte Blöcke und Objekte ... Hintergrund-Farbe Eigenschaft definiert, die Hintergrundfarbe (fill) Block, der Feldrand prkticheski immer transparent manifestieren. Beschreibung dieser Eigenschaften haben auch die Erstellung von CSS-Block.

Die Seite hat eine nützliche Erinnerung www.ilovejackdaniels.com für CSS, wie wir selbst Diagramm schneiden CSS Block lassen, nicht für Urheberrechtsverletzungen, sondern Bequemlichkeit zu erhöhen. Und natürlich, vergib mir ilovejackdaniels.com, dem auch dieses Bild auf alle denkbaren und undenkbaren Vorteile gehören:

Höhe CSS-Block in der Definition der Praxis nicht selbst verleihen (es bewegt sich auf "Kautschuk" Layout), werden wir selbstverständlich ist es auch nicht notwendig. Aber die Breite des Blocks - ist alles, es ist die Summe der Breiten: margin-left + border-left + padding-left + Breite + padding-right + border-right + margin-right. Das Layout wird nicht Grenze, alles tun, durch die Polsterung und Breite - es ist einfacher und schneller.

CSS-Layout der Website ist die "Gummi", dh seine Breite auf den verfügbaren Raum abhängt (die Größe des Browser-Fensters), so dass die Breite und Polsterung sind als Prozentsatz definiert. Das Interesse definieren die Breite des übergeordneten Elements. Der Elternteil ist entweder ein Browser-Fenster (in der Tat, das Tag <body>) oder jedes Blockelement in einem definierten Element verschachtelt (im Layout mehrere <div> wird in einem einzigen übergeordneten <div> -b angelegt werden).

Die Blöcke werden mit Hilfe von CSS definierten Eigenschaften (Polsterung, Breite) erstellt. Sie müssen sie richtig auf der Seite anordnen. Es hat auch CSS-Positionierung. Wenn Sie nicht die Position der Blöcke auf der Seite beschreiben können, werden sie durch den Browser untereinander angezeigt werden, gemäß der Routine ihrer Beschreibung in der XHTML-Code der Seite. Diese Anordnung wird als der Normalströmung.

Es gibt verschiedene Techniken und Methoden. Wir werden die Eigenschaft Position verwenden: absolut (absolute CSS-Positionierung) und position: relative (relative Positionierung). Als nächstes müssen Sie den Offset (in Pixeln für starre Layout-Website oder als Prozentsatz für "Gummi") des Blocks auf der Seite von oben oder unten, links oder rechts Ausgangspunkt bestimmen. Was ist der Ausgangspunkt für das?

Für die position: relative Bezugspunkt ist die Lage des Blocks im normalen Fluss. . Dh - position: relative; Top: 10%; links: 10%; - Auch Block bewegt sich um 10% nach unten und rechts in Bezug auf seine normale Position. Wenn Sie sich als relative Positionierung nicht Offset nicht angibt, dann wird das Gerät im normalen Fluss befinden.

Für die position: absolute Bezugspunkt ist genau das bekannte Element; Normaler Durchfluss ist auch die Lage der anderen Elemente keine Rolle spielen. Dieser Punkt kann entweder ein Browser-Fenster oder Eltern-Einheit sein, die vollständig oder relativ positioniert. Der Offset wird bestimmt durch ähnliche Pixel oder Prozent der Eigenschaften oben, links, unten, rechts.

Lassen Sie uns versuchen, daraus zu lernen, so scheint es, "mit dem Leben unvereinbar" vernünftige Regeln Funken - aber nämlich das Layout der Site Code der drei Säulen.

XHTML und CSS-Layout-Code

Es gibt auch die "Brocken" von Code und ihnen zu erklären. .

XHTML-Code

Die ersten Klassen deklarieren einen Akt des Typs sonst das Layout korrekt (im Stil des Internet Explorer 5) angezeigt in IE 6 und Opera. Mit unfehlbarer DOCTYPE ist kein Problem.

Tag <link> auf eine Seite geladen CSS-Stile aus externen Dateien. Universelle Weise style.css an der Wurzel der Site liegt (wie die Position der Ordner / public_html) ist auch für PC-Browser (media = "screen") ausgelegt. Stil print.css wird verwendet, dazu weiter unten zu drucken. Dann definieren mit Hilfe von JavaScript im Browser eines Benutzers ,, wenn Internet Explorer 5, um es in die CSS-Stil ie5.css Datei angegeben ist.

Der erste sollte div-Block-Header sein, für den Seitentitel gedacht. Im Service-Haupteinheit gibt es keinen Text, aber es investiert 4 Blöcke: Inhalte für die Hauptseite des Textes, LeftMenu rightmenu auch für links und rechts jeweils als Menüblock Fußzeile für den "Keller" Layout.

Alle Blöcke, sobald in XHTML Code identifiziert, ihre Eigenschaften und die Lage des CSS gibt die Antwort.

Gemeinsame CSS-Stil

Die erste Lektion wird mit dem Stil <body> entscheiden (dh Browser-Fenster ..) - Entfernen Sie die äußeren und inneren Ränder, eine Hintergrundfarbe (# f0f0f0 - hellgrau) hinzufügen.

Für die Header-Block, die äußeren Ränder entfernt (margin: 0px;), ausgewählt Orange die Breite auf 100% des Elternelements füllen (es ist der <body>). 100%, bestehend aus dem 98% Blockinhalt Breite und 1% für die padding-left und padding-right. Stenografie padding: 1%; die Polsterung an allen vier Seiten setzt (oben, links, unten, rechts).

Das Gerät wird in den normalen Ablauf angeordnet sein, dass wir noch erfüllt sind, so Positionierung ist nicht erforderlich.

Call-Haupteinheit ist ein Behälter mit einem Inhalt der anderen Blöcke. Es hat keine Grenzen und Polsterung, aber die Breite: 100% - daher ist die Breite gleich dem Hauptfenster des Browsers Breite. Das Gerät wird nicht ein Text, aber es ist sehr wichtig, um unser Layout. Zum einen für eine vollständige CSS-Positionierung der rechten und der linken Menüblöcke, und zweitens, zu schaffen eine graue (#ccc) Menühintergrund auf die gesamte Höhe der Seite.

Wie bereits erwähnt, position: relative Verschiebung eines Blocks relativ zu seiner Position im normalen Fluss bedeuten. Aber man muss nicht gesetzt die Größe der Verschiebung wird der Block CSS normalen Fluss ähnlich eingestellt werden. Ad position: relative; notwendig, um die Positionierung der seitlichen Menüblöcke zu vervollständigen. Wie Sie sich erinnern, komplett mit CSS-Positionierung wird aus dem Browserfenster oder Eltern-Einheit gezählt, die vollständig oder relativ positioniert ist.

Für den Hauptsatz grauen Hintergrund. Dies ist auf die Malerei mit Sidebar Blöcken gefüllt. In CSS, anscheinend kann man nicht die Höhe (Höhe) Einheit als Prozentsatz des Browser-Fensters gesetzt, so wird die Höhe durch den Inhalt des Behälters bestimmt. Das ist die Seite Menüspalte die gleiche Höhe halten wird, und den Hintergrund für sie nicht Sinn nicht besitzt. Also haben wir den Haupt Hintergrund zu füllen. Dann füllen Sie es mit verschiedenen Farbinhaltsblock als "Keller" Layout, aber Lautsprecher mit transparentem Hintergrund werden visuell die gleiche Höhe sein. Billig und heiter.

Die Eigenschaft overflow: hidden; Sie müssen die nagende Fehler IE6 zu entfernen. Internet Explorer 6 unter Windows XP mit dem XP-Bildschirm Thema (im Fall von Windows klassisches Thema alles in Ordnung), sagt, dass die Seite nicht ganz passt in den Browser ein Streifen von horizontalen Scrollen hinzufügt. Scrolls nur 1-2 Pixel, anscheinend XP-Thema erhöht sich die Breite der Elemente der Browser-Oberfläche, aber es (Browser) nicht in der Lage, zu erkennen, ...

Wie in jedem anderen Weg, overflow: hidden; zeigt an, dass die Inhalte, die über die Grenzen des Behälters (Beispiel aus der Praxis - ein sehr langer Ausdruck in einem engen Block von CSS) geht, diesen Inhalt sehen die Möglichkeit nicht zur Verfügung stellt, wenn der Benutzer geschnitten wird (Scroll-Balken, zum Beispiel). In diesem Fall ist der Behälter ein Blockhaupt, einer Breite von 100% des Browser-Fensters, aber der Inhalt - verschachtelte Blöcke.

CSS blockiert den Inhalt als "Keller". Hellgrau Hintergrund für eine bessere Lesbarkeit - weißem Hintergrund und schwarzer Schrift ist sehr kontrastreich und kann Bohrung im Auge. So verwenden Orange Fußzeile. Der Rest der CSS Beschreibung derselben Blöcke.

Beide besetzen die gesamte Breite der Seite. Breite 58% Gehalt. Externe Polsterung (Stenografie-Format verwendet - Seitenrand: Oben rechts unten nach links;) 20% 20% der links und rechts. Plus die internen Inhalte des Sprungrahmenblock in 1% oben, links, rechts und unten. Wir glauben , dass CSS - Einheit horizontale Dimension von links nach rechts: 1% + 20% + 58% + 1% + 20% = 100%.

Somit ist die Breite der Fußzeile und Gehalt 100% der Muttereinheit-Haupt, die wiederum 100% des Körpers enthält. Nuance - Außenrandpolsterung bis zu 20% auf jeder Seite sind die äußeren Ränder transparenten Block, das heißt, die Farbe füllt nicht ... CSS Inhalt und Fußzeile Blöcke besetzen die gesamte Breite des Fensters, solange diese nicht klar, wo im Raum die Seite im Menü zu nehmen.

Die Antwort ist in der Lage: absolut. Eine vollständige Positionierung spielt keine Rolle normalen Fluss der anderen CSS-Einheiten. speck Zahl benötigen, um die Größe der vertikalen Verschiebung sowie die horizontale Breite des Blocks. Der Ausgangspunkt kann das Browser-Fenster, vollständig oder relativ übergeordneten CSS Block positioniert. Heute ist klar, warum für das Hauptgerät, wir Position verwendet: relative und Nullpunktverschiebung.

LeftMenu Einheit (die linke Navigationsleiste) auf dem CSS-Blockhaupt positioniert, von oben und nach links versetzt - auf 0 Pixel. Für rightmenu gleichen Offset, sondern auch die rechts oben. Die Breite der beiden Einheiten - 20% (1% padding-left + 18% Breite + 1% padding-right) des übergeordneten Haupt. In der Tat, LeftMenu rightmenu auch auf die Inhaltsblöcke und Fußzeile auferlegt - oder besser gesagt, ihre transparente äußere Rand Rand!

Die Höhe der Seitenmenü ist abhängig vom Inhalt. Menü hat keinen Hintergrundfarbe, so dass der Hintergrund für sie ist die graue Schattierung Hauptgerät. Margin'y in Inhalt Fußzeile als transparent. Mit dieser visuellen Sidebars haben die gleiche Höhe wie gefüllt grau.

Der letzte Schliff. Innerhalb Informationsblöcke unterteilt in den Absätzen Tag <p>. <P> - Block-Element, das seine eigenen externen Feld hat. Internet Explorer 6 kombiniert Marge und unsere CSS-Einheiten Polsterung. Und Opera und Mozilla ihre summarise, das Ergebnis ist sehr beeindruckend, "Abstand" Text oben und unten an den Blockgrenzen. Dieser Code entfernt den äußeren vertikalen Abstand für die Elemente in den CSS-Layout-Blöcke eingeschlossen.

CSS-Stil für Internet Explorer 5

Unser Layout ist ohne Probleme in Internet Explorer 6 als die neuesten Versionen von Mozilla und Opera angezeigt. Aber Internet Explorer 5, der Blick auf CSS:

Nach dem populäreren "schitalok" Runet - spylog, HotLog auch liveintenet - Internet Explorer 5 im Verlauf von etwa 18% der Nutzer, verweigern daher den Browser zu unterstützen, können leider nicht.

Die Lösung liegt auf der Hand - für die falsche Browser auch die falsche CSS tun, um diese Art und Weise für die Version 5 des Patienten nur anschließen.

Verwendung von JavaScript im Browser eines Benutzers zu definieren ,, wenn IE5, wird auf der Seite Code eingegeben (mit demselben Skript) Link zu einer CSS-Datei ie5.css.

Gemäß der Spezifikation Einheit belegten horizontalen CSS Raum wird wie folgt berechnet: margin-left + border-left + padding-left + Breite + padding-right + border-right + margin-right. Dieser Inhalt Breite (Text, Grafiken, Flash-Websites, ...) setzen Breite Parameter.

IE5 glaubt, dass die Breite der Breite der sichtbaren Blockelemente angibt (der sichtbare Teil - alle zusätzlich zu dem Rand), sondern auf den Inhalt des Blocks ist das Ergebnis aus dem Wert der Breite und padding Grenze subtrahieren. Also müssen wir ihm den falschen Wert für die Breite der Blöcke nach der Formel zu zeigen - besetzten Raum minus minus margin-left margin-right.

Ein weiterer Fehler - Seite Text "sticky" Menüblock an den Rand. Es ist ersichtlich, dass die oben (vertikal) Polsterung (padding) des Blocks bis an den Rand des Inhalts ist jedoch horizontal - nein. Kenn Menü ist nur einer Seite (der Grund dafür ist wahrscheinlich die Positionierung der CSS-Einheiten zu vervollständigen), wird nur die horizontale Polsterung und nur, wenn sie als ein Prozentsatz angegeben. Rückt der linken und rechten Seite des Menüs in Pixel sollten zehn ausreichen.

Außerdem zeigt der Screenshot, dass die linken und rechten Lautsprecher übereinander sind. IE5 nicht CSS richtige Objekt behandeln, mit denen wir horizontal rightmenu Einheit positioniert haben. Es ist notwendig, für ihn Verschiebung zu verschreiben hat 80% links (60 + 20 - warum so viele denken, und das ist offensichtlich).

CSS für Druckseiten

Das Layout angegebene Paar Stil für verschiedene Geräte anzeigen Informationen:

style.css für Browser (media = "screen"), aber print.css Sachen (media = "print"). Dementsprechend CSS-Stile Daten mit einem Kumpel Kumpel in keiner Weise verbunden auch die Seite auf ihre eigene Weise zu beschreiben. Print.css der Art zu werden, extrem naiv:

Stellen Sie für den Schnee-weißen Hintergrund, tun schwarze Textelemente Blöcke. Hyperlinks (<a>) sind ähnlich wie schwarz. Zustimmen, für den Abschluss des Druckens es sinnvoll ist.

mit dem Display-Richtlinie: none; vollständig auf die Seite Menü entfernt. Offensichtlich wird die Seite für den Körper Text gedruckt werden, ist die Überschrift ähnlich tut nicht weh. "Keller" druckt, wenn nötig, können Sie immer es auch entfernen können prkticheski.

Abschluss

Wir haben das Seitenlayout zu 3 Spalten gedreht, das Layout vollständig mit CSS und ein wenig "verdünnt» XHTML und JavaScript beschrieben. Die Vor- und Nachteile dieser Methode der CSS-Layout oben beschrieben (am Ende des Artikels, auch teilweise vergessen kann - nicht ganz seinem kurzen gedreht, ich stimme).

Es bleibt die Schriftart und "Geschmack" Farben zu wählen, auf die "Gummi" Layout anhängen nicht weniger als "Gummi" Schriftgröße, denken über die Registrierung von Titeln und eine normale Gestaltung der Internet-Seiten erhalten, vollständig auf CSS umgesetzt. Was auch zu beweisen erforderlich