This page has been robot translated, sorry for typos if any. Original content here.

CSS-Layout der Site: Layout in drei Spalten

Unser Layout

Ziel

Unsere Aufgabe besteht darin, aus CSS ein dreispaltiges Layout zu erstellen. Dieses Layout kann als Grundlage für eine Informationssite mit einem "Hut" dienen, die rechten auch die linken Spalten für das Menü der Zusatzinformationen, mit dem zentralen Textblock auch ein "Keller" für Urheberrechte, Kontakte, unter anderem. Typisch für das Layout des Content-Projekts.

Zweifellos kann dieses Layout nicht als ein Wunder eines Designgedankens bezeichnet werden, aber Sie können dieses Muster immer zum "göttlichen Aussehen" bringen, indem Sie die richtigen Schriftarten und ihre Größe auswählen, indem Sie das perfekte und das richtige Logo hinzufügen. Es wird nicht schwierig sein, das Layout selbst zu komplizieren und neue CSS-Blöcke hinzuzufügen.

Vollständiges Site-Layout in drei Spalten vollständig in CSS

Gebrauchte Technologien unterstützen auch Browser

Das Site-Layout wird vollständig in CSS implementiert, die "gelegentliche" Verwendung von XHTML wird auch JavaScript sein.

Das verwendete CSS-Layout wird von Internet Explorer 6 unterstützt, die aktuellen Versionen von Mozilla sind ebenfalls Opera. Der Weg einiger Optimierungen, das Layout wird auch in Internet Explorer 5 funktionieren. Das sollte reichen. Unser CSS ist ähnlich dazu gezwungen, Textbrowser auch für andere exotische Geräte anzusprechen.

Die Effizienz des Codes in IE 4, Netscape 4 und älteren Browsern wurde in keiner Weise überprüft, aber ich bin mir sicher, dass es Probleme geben wird. Dies ist jedoch unkritisch, schauen Sie sich die Statistik der Popularität von Browsern aus Hotlog, Spylog auch livintenet.

Vorteile sind auch Nachteile der betrachteten Methode des CSS-Site-Layouts

Das Layout hat schwerwiegende Pluspunkte und recht schwerwiegende Mängel. Es ist notwendig zu entscheiden, was für Ihre Website auch die Besucher wichtiger ist.

Nachteile:

  • Funktioniert nicht in Internet Explorer 4, Netscape Navigator 4 auch älteren Browsern.
  • CSS-Layout (Erstellen von Blöcken auch ihre Positionierung) wird von modernen Browsern in keiner Weise ideal unterstützt, so dass die Seite in allen Browsern von Ihrem Zimmer getestet werden muss, für kleine, aber unangenehme Unterschiede in der Darstellung der Seite.
  • Mehl mit vertikaler Positionierung bestimmt auch die Höhe von Elementen in CSS. Dies ist nicht so stolz, es sei denn, Sie sind in keiner Weise ein Fan von allen Elementen mit einer Genauigkeit von bis zu einem Pixel.
  • Für unser Layout ist es notwendig, dass die Spalte mit dem Hauptinhalt eine eindrucksvolle Höhe hat als die Seitenspalten. Andernfalls wird die Seite unordentlich aussehen. Um ehrlich zu sein, ist diese Nachfrage typisch für die meisten Standorte mit vertikalem Design. Wenn die Seiten manuell geschrieben (und nicht von Skripten erzeugt) werden, kann der Raum mit Zeilenumbrüchen beendet werden.
  • Es ist schwierig, aus einem Tabellenlayout neu zu lernen. Zuerst wird von margin'ov auch padding'ov kranker Kopf werden :)

Plus:

  • Nachdem Sie das CSS-Layout gemeistert haben, ist es einfach, den Code zu verstehen und die Stile zu ändern. Mit einer durchdachten Anordnung von CSS-Blöcken sind geringfügige Änderungen am Design wahrscheinlich nicht schwierig - editieren Sie einfach die Datei mit CSS.
  • Textbrowser sowie andere begrenzte Geräte zum Erfassen von Informationen müssen unser Layout mögen. Ohne Stile ist es ein einfacher Text in einer Spalte mit einer minimalen Anzahl von XHTML-Designelementen.
  • Ohne CSS-Stile (d. H. Sauberes XHTML) ist das Layout der Titel der Seite oben, gefolgt vom Haupttextkopf. "Teduha" (Links, Copyrights, Navigation, News - alles was der User NICHT auf die Seite kam) wartet auf seine Stunde ganz unten. Eine solche Anordnung von Informationen wird sich positiv auf die Einstellung einfacher Informationsmittel auswirken, die das Wesen von Suchrobotern ausmachen - sie mögen, zu welcher Zeit die Seite Text hat, aber nicht ewige Tabellen-Tags.
  • Schnelle Anzeige durch Browser. Bei eindrucksvollen Seiten oder einer langsamen Verbindung kann der Besucher den Haupttext aussprechen, während auch Side-by-Side-Menüs geladen werden.
  • "Rubber" -Layout - die Breite der Blöcke des Layouts hängt von der Größe des Browserfensters ab, so dass es keinen unnützen nützlichen Bildschirmplatz gibt.
  • Einfache Implementierung für diese CSS-Layoutversion der zu druckenden Seite.
  • Purer XHTML-Code ist auch ein Design mittels CSS, aber keine Tabellen - es ist "cool" auch sehr angesagt :) .

Vielleicht überwiegen die Vorteile. Wenn Ihre Site also nicht für Windows 3.11 des entsprechenden Raums vorgesehen ist, wenn Sie bereit sind, das Blockmodell zu meistern, beabsichtigt CSS auch nicht, dem Layout komplizierte Elemente mit einem nicht standardmäßigen Layout hinzuzufügen, mehr können Sie sagen.

Ein bisschen Theorie des CSS-Site-Layouts (Erstellen von CSS-Blöcken)

Es gibt weder den Wunsch noch die Möglichkeit, die Theorie im Detail zu erklären. Dieses schwierige Thema ist auch umfangreich. Ich werde versuchen, Links "loszuwerden" auch kurz angeben, was direkt im Layout verwendet wird.

Also, die Links:

Jetzt ein bisschen allein. Ein Block ist ein rechteckiges Element einer Webseite, das mit Blockelementen (z. B. <div> oder <p>) (in bassurmanski, Tags) von XHTML angegeben wird. Der Block nimmt etwas Platz ein und endet mit einer Übersetzung der Zeile, das <div> -Elementpaar wird auf der Seite untereinander liegen, weil das Blockelemente sind. Das Paar des <i> -Elements wird nicht in irgendeiner Weise sein, da es Inline-Elemente sind.

Mit CSS können Sie Blockparameter definieren - Rand, Rahmen, Innenfüllung und tatsächliche Breite des Inhalts. Der Inhalt des CSS-Blocks kann Text, Bilder, verschachtelte Blöcke und Objekte anzeigen ... Die Eigenschaft background-color definiert die Hintergrundfarbe (fill) des Blocks, während das Feld margin immer transparent ist. Die Beschreibung dieser Eigenschaften ist auch die Erstellung eines CSS-Blocks.

Auf der Website www.ilovejackdaniels.com gibt es ein nützliches Memo zu CSS, von dem wir uns erlaubt haben, das CSS-Blockschema zu entfernen, ohne das Urheberrecht für irgendetwas zu verletzen, aber für mehr Bequemlichkeit. Und natürlich verzeih mir ilovejackdaniels.com, der auch alle denkbaren und nicht vorstellbaren Vorteile für dieses Bild besitzt:

Schema des CSS-Box-Modells

Die Höhe des CSS-Blocks kann in der Praxis nicht definiert werden (es bewegt sich um das "Rubber" -Layout), natürlich brauchen wir es auch nicht. Aber die Breite des Blocks ist unser ganzes, er setzt sich aus der Breite zusammen: Rand-links + Rand-links + Polster-links + Breite + Polster-rechts + Rand-rechts + Rand-rechts. Im Layout wird es keine Grenze geben, alles wird durch Auffüllen auch Breite gemacht - so ist es auch einfacher schneller.

CSS-Site-Layout ist "Gummi", das heißt, seine Breite hängt vom verfügbaren Platz (Größe des Browserfensters) ab, daher wird die Breite auch in Prozent aufgefüllt. Prozentangaben geben die Breite relativ zum übergeordneten Element an. Das übergeordnete Element ist entweder ein Browserfenster (tatsächlich ein <body> -Tag) oder ein beliebiges Blockelement, in dem das Element verschachtelt ist (im Layout werden mehrere <div> in einem übergeordneten <div> -Block verschachtelt).

Blöcke werden erstellt, mit Hilfe von CSS werden ihre Eigenschaften (Padding, Breite) definiert. Es ist notwendig, sie richtig auf der Seite anzuordnen. Dies hat auch CSS-Positionierung. Wenn Sie die Position von Blöcken auf der Seite nicht beschreiben, werden diese vom Browser in der Reihenfolge ihrer Beschreibung im XHTML-Code der Seite untereinander angezeigt. Diese Anordnung wird als normaler Fluss bezeichnet.

Es gibt auch verschiedene Möglichkeiten der Technologie. Wir werden auch die Eigenschaft position: absolute (absolute CSS-Positionierung) verwenden: position: relative (relative Positionierung). Als Nächstes müssen Sie den Versatz (in Pixel für das harte Layout des Standorts oder in Prozent für den "Gummi") auf der Seite vom oberen oder unteren, linken oder rechten Referenzpunkt aus bestimmen. Was ist dieser Maßstab?

Bei Position: Relativ ist der Bezugspunkt die Position des Blocks im normalen Datenstrom. E. - Position: relativ; oben: 10%; links: 10%; - Auch der Block bewegt sich um 10% nach rechts, relativ zu seiner normalen Position. Wenn Sie die relative Positionierung auf keinen Fall so einstellen, dass der Offset eingestellt wird, befindet sich der Block im normalen Fluss.

Für Position: absolut ist der Bezugspunkt das genau bekannte Element; normaler Fluss und die Position anderer Elemente spielt keine Rolle. Dieser Punkt kann entweder ein Browserfenster oder ein Elternblock sein, der voll oder relativ positioniert ist. Der Versatz wird in ähnlicher Weise durch die Pixel oder den Prozentsatz der Eigenschaften oben, links, unten, rechts bestimmt.

Lassen Sie uns versuchen, aus diesen scheinbar "inkompatibel mit dem Leben" Regeln des Funkens vernünftig zu extrahieren - jedoch ist es der Layout-Code der Website von drei Spalten.

XHTML auch CSS Layout Code

CSS-Layout der Website: Layout in drei Spalten - Screenshot mit Erklärungen

Hier sind auch weitere "Teile" des Codes Erklärungen zu ihnen. .

XHTML-Code



<code>&lt;html xmlns=http://www.w3.org/1999/xhtml&gt; &lt;head&gt; &lt;title&gt;CSS верстка сайта: макет в три колонки&lt;/title&gt; &lt;link rel=stylesheet type=text/css media=screen href=/style.css /&gt; &lt;link rel=stylesheet type=text/css media=print href=/print.css /&gt; &lt;script language=javascript type=text/javascript&gt; //&lt;![CDATA[ if (navigator.userAgent.indexOf('IE 5')!=-1) document.write('&lt;link rel="stylesheet" type="text/css" media="screen" href="/ie5.css" /&gt;'); //]]&gt; &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id=header&gt;&lt;p align=justify&gt;CSS верстка сайта: макет в три колонки&lt;/p&gt;&lt;/code&gt; &lt;div id=main&gt; &lt;div id=content&gt; &lt;p align=justify&gt;Информация, как принято вычислять, транспонирует из ряда вон выходящий вселенная...&lt;/p&gt; &lt;p align=justify&gt;Жизнь, пренебрегая деталями, фокусирует примитивный интеллект...&lt;/p&gt; &lt;p align=justify&gt;Напряжение, поэтому, непредсказуемо...&lt;/p&gt; &lt;p align=justify&gt;Представление нетривиально. Созерцание решительно фокусирует постсовременный постмодернизм...&lt;/p&gt; &lt;p align=justify&gt;Представление амбивалентно. Современная ситуация рефлектирует себя чрез принцип восприятия...&lt;/p&gt; &lt;p align=justify&gt;Смысл жизни решительно творит объект деловитости. Жизнь натурально означает вселенная...&lt;/p&gt; &lt;/div&gt; &lt;div id=leftmenu&gt; &lt;p align=justify&gt;&lt;strong&gt;Навигация&lt;/strong&gt;&lt;/p&gt; &lt;p align=justify&gt;&lt;a href=http://translate.googleusercontent.com/translate_c?depth=1&amp;amp;hl=ru&amp;amp;prev=hp&amp;amp;rurl=translate.google.com&amp;amp;sl=ru&amp;amp;sp=nmt4&amp;amp;tl=de&amp;amp;u=http://www.shram.kiev.ua/site/css.shtml&amp;amp;usg=ALkJrhihziyZIWICum-_SORwaisgnXZcFQ#&gt;Раздел 1&lt;/a&gt;&lt;br /&gt; &lt;a href=http://translate.googleusercontent.com/translate_c?depth=1&amp;amp;hl=ru&amp;amp;prev=hp&amp;amp;rurl=translate.google.com&amp;amp;sl=ru&amp;amp;sp=nmt4&amp;amp;tl=de&amp;amp;u=http://www.shram.kiev.ua/site/css.shtml&amp;amp;usg=ALkJrhihziyZIWICum-_SORwaisgnXZcFQ#&gt;Раздел 2&lt;/a&gt;&lt;br /&gt; &lt;a href=http://translate.googleusercontent.com/translate_c?depth=1&amp;amp;hl=ru&amp;amp;prev=hp&amp;amp;rurl=translate.google.com&amp;amp;sl=ru&amp;amp;sp=nmt4&amp;amp;tl=de&amp;amp;u=http://www.shram.kiev.ua/site/css.shtml&amp;amp;usg=ALkJrhihziyZIWICum-_SORwaisgnXZcFQ#&gt;Раздел 3&lt;/a&gt;&lt;br /&gt; &lt;a href=http://translate.googleusercontent.com/translate_c?depth=1&amp;amp;hl=ru&amp;amp;prev=hp&amp;amp;rurl=translate.google.com&amp;amp;sl=ru&amp;amp;sp=nmt4&amp;amp;tl=de&amp;amp;u=http://www.shram.kiev.ua/site/css.shtml&amp;amp;usg=ALkJrhihziyZIWICum-_SORwaisgnXZcFQ#&gt;Раздел 4&lt;/a&gt;&lt;br /&gt; &lt;a href=http://translate.googleusercontent.com/translate_c?depth=1&amp;amp;hl=ru&amp;amp;prev=hp&amp;amp;rurl=translate.google.com&amp;amp;sl=ru&amp;amp;sp=nmt4&amp;amp;tl=de&amp;amp;u=http://www.shram.kiev.ua/site/css.shtml&amp;amp;usg=ALkJrhihziyZIWICum-_SORwaisgnXZcFQ#&gt;Раздел 5&lt;/a&gt;&lt;br /&gt; &lt;a href=http://translate.googleusercontent.com/translate_c?depth=1&amp;amp;hl=ru&amp;amp;prev=hp&amp;amp;rurl=translate.google.com&amp;amp;sl=ru&amp;amp;sp=nmt4&amp;amp;tl=de&amp;amp;u=http://www.shram.kiev.ua/site/css.shtml&amp;amp;usg=ALkJrhihziyZIWICum-_SORwaisgnXZcFQ#&gt;Раздел 6&lt;/a&gt;&lt;br /&gt; &lt;a href=http://translate.googleusercontent.com/translate_c?depth=1&amp;amp;hl=ru&amp;amp;prev=hp&amp;amp;rurl=translate.google.com&amp;amp;sl=ru&amp;amp;sp=nmt4&amp;amp;tl=de&amp;amp;u=http://www.shram.kiev.ua/site/css.shtml&amp;amp;usg=ALkJrhihziyZIWICum-_SORwaisgnXZcFQ#&gt;Раздел 7&lt;/a&gt;&lt;/p&gt; &lt;p align=justify&gt;Реальность представляет принцип восприятия. Интеллект не так уж очевиден...&lt;/p&gt; &lt;/div&gt; &lt;div id=rightmenu&gt; &lt;p align=justify&gt;&lt;strong&gt;Наши новости&lt;/strong&gt;&lt;/p&gt; &lt;p align=justify&gt;Боль методологически фокусирует закон внешнего вселенной...&lt;/p&gt; &lt;p align=justify&gt;Согласно взгляду известных философов современная ситуация...&lt;/p&gt; &lt;/div&gt; &lt;div id=footer&gt;&lt;p align=justify&gt;© 2005 Все тексты любезно предоставлены Яндексом®: &lt;a href=http://translate.googleusercontent.com/translate_c?depth=1&amp;amp;hl=ru&amp;amp;prev=hp&amp;amp;rurl=translate.google.com&amp;amp;sl=ru&amp;amp;sp=nmt4&amp;amp;tl=de&amp;amp;u=http://www.shram.kiev.ua/click%3Fhttp://yandex.ru/vesna.html&amp;amp;usg=ALkJrhjyeFqtLpn0cFLvHIP3To83MRzqvw&gt;http://yandex.ru/vesna.html&lt;/a&gt;. &lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt;</code>

Der erste Schritt besteht darin, den Typ des Acts zu deklarieren, sonst wird das Layout in IE 6 nicht mehr korrekt (im Stil von Internet Explorer 5) auch Opera angezeigt. Mit einem fehlerfreien DOCTYPE gibt es kein Problem.

Das <link> -Tag lädt CSS-Stile von externen Dateien auf die Seite. Der allgemeine style.css-Stil liegt im Stammverzeichnis der Site (wie die Position, dieser Ordner / public_html) ist auch für Computerbrowser gedacht (media = "screen"). Der Style print.css wird zum Drucken verwendet, etwa gleich darunter. Als nächstes definieren wir mit JavaScript den Browser des Benutzers. Wenn es sich um den Internet Explorer 5 handelt, erhält er einen CSS-Stil aus der Datei ie5.css.

Der erste ist der Div-Block-Header, der für den Seitentitel gedacht ist. Es gibt keinen Text im Hauptservice-Block, aber er enthält 4 Blöcke: Inhalt für den Haupttext der Seite, linkes Menü ist auch rechts Menü für das linke auch das rechte Menü, auch ein Fußblock für den "Keller" des Layouts.

Alle Blöcke sind nur im XHTML-Code definiert, für ihre Eigenschaften gibt der Ort auch die Antwort auf CSS.

Allgemeiner CSS-Stil

body { margin: 0px; padding: 0px; background-color: #f0f0f0; }

Der erste Schritt besteht darin, den Stil des <body> (dh des Browserfensters) zu definieren - entfernen Sie auch die äußeren und fügen Sie die Hintergrundfarbe hinzu (# f0f0f0 - hellgrau).

#header { width: 98%; margin: 0px; padding: 1%; background-color: orange; }

Für den Kopfblock werden die äußeren Einzüge (Rand: 0px;) entfernt, die orangefarbene Füllung ist auch die Breite von 100% des Elternelements (es ist <body>). 100% besteht zu 98% aus dem Inhalt des Blocks, ebenfalls 1% für Padding-links, auch Padding-rechts. Verkürzte Polsterung: 1%; Gibt einen Einzug von allen vier Seiten an (oben, links, unten, rechts).

Die Einheit befindet sich in einem normalen Fluss, mit dem wir bisher zufrieden sind, so dass keine Positionierung erforderlich ist.

#main { position: relative; width: 100%; margin: 0px; padding: 0px; background-color: #ccc; overflow: hidden;

Der Hauptserviceblock ist der Container der verbleibenden Blöcke mit Inhalt. Es hat auch keine Ränder, aber Breite: 100% - daher entspricht die Breite von main der Breite des Browserfensters. Im Block gibt es keinen Text, aber es ist sehr wichtig für unser Layout. Erstens, um die CSS-Blöcke des rechten, also auch des linken Menüs vollständig zu positionieren, und zweitens, um einen grauen (#ccc) Menühintergrund auf die volle Höhe der Seite zu erzeugen.

Wie erwähnt, bezeichnet position: relativ die Verschiebung des Blocks relativ zu seiner Position in dem normalen Strom. Aber sobald die Größe der Verschiebung nicht festgelegt ist, wird der Block ähnlich wie der normale CSS-Stream angeordnet. Anzeigenposition: relativ; Es ist notwendig, die Seitenmenüblöcke vollständig zu positionieren. Wie Sie sich erinnern, wird die vollständige Positionierung in CSS vom Browserfenster oder dem übergeordneten Block aus gezählt, der voll oder relativ positioniert ist.

Der Haupthintergrund ist grau. Dies geschieht für das aufgefüllte Übermalen der seitlichen Menüblöcke. In CSS kann man die Höhe des Blocks nicht als prozentualen Anteil des Browserfensters festlegen, so dass die Höhe abhängig von der Kapazität des Inhalts bestimmt wird. Das heißt, die Seitenspalten des Menüs haben unterschiedliche Höhen, und auch das Festlegen des Hintergrunds für sie hat keinen Sinn. Deshalb füllen wir den Hintergrund mit main. Als nächstes füllen Sie die andere Farbe mit dem Inhaltsblock aus, auch der "Keller" des Layouts, aber die Spalten mit einem transparenten Hintergrund werden visuell die gleiche Höhe haben. Billig ist auch sauer.

Überlaufeigenschaft: Versteckt; Es ist notwendig, den IE6 Trivial Bug zu entfernen. Internet Explorer 6 mit Windows XP mit einem XP-Bildschirmdesign (im Falle des klassischen Windows-Designs ist alles in Ordnung) denkt, dass die Seite nicht vollständig in das Browserfenster passt und fügt zusätzlich eine horizontale Bildlaufleiste hinzu. Scrollt nur 1-2 Pixel, anscheinend erhöht XP-Theme die Breite der Elemente der Browseroberfläche, aber es (der Browser) erkennt es in keiner Weise ...

Wie auch immer, Überlauf: versteckt; zeigt an, dass der Inhalt, der über die Ränder des Containers hinausreicht (das Beispiel Leben ist ein sehr langer Ausdruck in einem schmalen CSS-Block), abgeschnitten wird und dem Benutzer nicht die Möglichkeit gegeben wird, diesen Inhalt anzuzeigen (z. B. Bildlaufleisten). In unserem Fall ist der Container der Hauptblock, 100% breit im Browserfenster, aber der Inhalt sind verschachtelte Blöcke.

#content { width: 58%; margin: 0px 20% 0px 20%; padding: 1%; background-color: #f0f0f0; } #footer { width: 58%; margin: 0px 20% 0px 20%; padding: 1%; background-color: orange; }

CSS-Blöcke des Hauptinhalts sind auch "Keller". Hellgrauer Hintergrund für einfaches Lesen - der Schnee-weiße Hintergrund ist auch die schwarze Schrift, die extrem kontrastierend ist, kann des Auges auch müde sein. Die Fußzeile verwendet Orange. Ansonsten ist die CSS-Beschreibung der Blöcke gleich.

Beide belegen die gesamte Breite der Seite. Die Breite des Inhalts beträgt 58%. Externe Einrückung (der abgekürzte Datensatz wird im Format verwendet - Rand: oben links unten rechts;) 20% links und 20% rechts. Plus, die interne Füllung des Inhalts aus dem Rahmen des Blocks in 1% von oben, von links, von rechts auch von unten. Betrachten Sie die horizontale Größe des CSS-Blocks von links nach rechts: 20% + 1% + 58% + 1% + 20% = 100% .

Somit ist die Breite des Fußzeileninhaltes auch 100% des übergeordneten Hauptblocks, der wiederum 100% des Körpers einnimmt. Nuance - der Randabstand beträgt 20% auf jeder Seite, die äußere Einkerbung des Blockes ist transparent, das heißt, die Farbe wird nicht gegossen. CSS-Inhaltsblöcke belegen auch die Fußzeile über die gesamte Breite des Fensters, und bisher ist nicht ganz klar, an welcher Stelle der Platz für die Seitenmenüs eingenommen werden soll.

#leftmenu { position: absolute; top: 0px; left: 0px; width: 18%; margin: 0px; padding: 1%; } #rightmenu { position: absolute; top: 0px; right: 0px; width: 18%; margin: 0px; padding: 1%; }

Die Antwort ist in Position: absolut. Für eine vollständige Positionierung wird der normale Ablauf auch von anderen CSS-Blöcken nicht beeinflusst. Es ist ein Zählwert erforderlich, die vertikale Verschiebungsgröße ist ebenfalls horizontal und die Breite des Blocks. Der Ausgangspunkt kann ein Browserfenster, ein vollständiger oder relativ positionierter Eltern-CSS-Block sein. Jetzt ist es klar, warum wir für den Hauptblock Position verwendet haben: relative auch Null-Offset.

Der linke Menüblock (linke Navigationsleiste) wird vom CSS des Hauptblocks positioniert, der obere Offset ist ebenfalls links - 0 Pixel. Für rightmenu den gleichen Offset, aber von oben auch nach rechts. Die Breite beider Blöcke beträgt 20% (1% Padding-links + 18% Breite + 1% Padding-rechts) vom übergeordneten Hauptteil. In der Tat, das linke Menü sind auch rechts Menü auf den Inhaltsblöcken auch die Fußzeile überlagert - genauer gesagt, auf ihren transparenten äußeren Kanten des Randes!

Die Höhe der Seitenleisten hängt vom Inhalt ab. Das Menü hat keine Hintergrundfarbe, daher ist der Hintergrund für sie die graue Füllung des Hauptblocks. Die Ränder des Inhalts sind ebenfalls transparent. Aus diesem Grund haben visuelle Seitenmenüs die gleiche Höhe und sind grau dargestellt.

#content p, #leftmenu p, #rightmenu p { margin-top: 0px; } #header p, #footer p { margin-top: 0px; margin-bottom: 0px; }

Letzte Berührungen. Innerhalb der Blöcke sind die Informationen durch das <p> -Tag in Absätze unterteilt. <p> ist ein Blockelement mit eigenen externen Feldern. Internet Explorer 6 kombiniert Rand, der auch unsere CSS-Blöcke füllt. Opera auch Mozilla fasst sie zusammen, was zu einem extrem beeindruckenden "Zerhacken" von Text von oben auch von der Unterseite der Blockgrenzen führt. Dieser Code entfernt vertikale äußere Einrückungen für Elemente, die in CSS-Layoutblöcken verschachtelt sind.

CSS-Stil für Internet Explorer 5

Unser Layout wird im Internet Explorer 6 auch in den neuesten Versionen von Mozilla auch Opera angezeigt. Der Internet Explorer 5 hat jedoch einen eigenen Blick auf CSS:

Fehlerhafte Fertigstellung unseres CSS-Codes mit Internet Explorer 5

Laut den populäreren "counters" Runet - spylog ist hotlog auch livintenet - Internet Explorer 5 läuft rund 18% der Nutzer, so dass Sie diesen Browser leider nicht ablehnen können.

Die Lösung liegt auf der Hand - für den falschen Browser machen wir das falsche CSS, und wir verbinden diese Art nur für die 5. Version des Patienten.

<script language="javascript" type="text/javascript"> //<![CDATA[ if (navigator.userAgent.indexOf('IE 5')!=-1) document.write('<link rel="stylesheet" type="text/css" media="screen" href="/ie5.css" />'); //]]> </script>

Unter Verwendung von JavaScript definieren wir den Browser des Benutzers, wenn es IE5 ist, geben wir den Link zu der CSS-Datei ie5.css in den Seitencode ein (unter Verwendung des gleichen Skripts).

#header { width: 100%; } #content, #footer { width: 60%; } #leftmenu, #rightmenu { width: 20%; padding-left: 10px; padding-right: 10px; } #rightmenu{ left: 80%; }

Gemäß der Spezifikation wird der durch den CSS-Block belegte Platz horizontal durch die folgende Formel berechnet: Rand-linker Rand-links-Füllung-links-Breite-Füllung-rechts-Rand-rechts-Rand-rechts. Die Breite des Inhalts (Text, Bilder, Flash-Objekte ...) wird durch den Parameter width angegeben.

IE5 geht davon aus, dass Breite die Breite des gesamten sichtbaren Elements des Blocks angibt (der sichtbare Teil ist alles zusätzlich zum Rand), das Ergebnis des Subtrahierens der Füllwerte von der Breite des Auffüllens ist jedoch auch ein Rand. Daher müssen Sie für alle Blöcke die falsche Breite angeben, indem Sie die Formel verwenden - den belegten Bereich minus Rand links links minus Rand rechts.

Ein weiterer Fehler - der Text der Seite "kleben" an den Rand des Blocks. Man erkennt, dass vom Rand des Blockes bis zum Inhalt (vertikal), aber horizontal - nein, eine Füllung vorhanden ist. Es ist nur im Seitenmenü inhärent (der Grund, wahrscheinlich, in der vollständigen Positionierung dieser CSS-Blöcke), nur für horizontale Auffüllung ist auch nur, wenn sie in Prozent angegeben sind. Setze den Padding für das Seitenmenü in Pixeln nach links auch nach rechts, zehn sollten ausreichen.

Auch im Screenshot sehen Sie, dass der linke auch übereinander gestapelt ist. IE5 behandelt in keiner Weise die Eigenschaft CSS-Recht, mit der wir den rechten Menüblock horizontal positionieren. Es ist notwendig, für ihn die Verlagerung bereits auf der linken Seite um 80% vorzuschreiben (60 + 20 - warum so viel, denke ich, auch so klar ist).

CSS zum Drucken von Seiten

CSS-Layout zum Drucken

Das Layout gibt ein Stilpaar für verschiedene Anzeigegeräte an:


style.css für Browser (media = "screen"), aber print.css für Drucker (media = "print"). Dementsprechend sind die Daten CSS Styles Kumpel mit einem Freund in keiner Weise verbunden und beschreiben die Seite jeder auf seine Weise. Der Stil für print.css wird völlig simpel:

body, #header, #main, #content, #footer { color: #000; background-color: #fff; } a { color: #000; } #leftmenu, #rightmenu { display: none; }

Wir setzen den schneeweißen Hintergrund für die Blöcke, die Textelemente werden schwarz. Hyperlinks (<a>) sind ähnlich wie Schwarz. Zustimmen, für den Abschluss zu drucken ist es sinnvoll.

Verwenden des Displays: keine Direktive; Seitenmenü komplett entfernt. Offensichtlich wird die Seite für den Haupttext gedruckt, der Titel wird in keiner Weise verhindert. "Keller" bleibt beim Drucken erhalten, ggf. können Sie ihn immer löschen.

Fazit

Wir haben ein Seitenlayout in 3 Spalten erhalten, dieses Layout wird komplett mittels CSS beschrieben, und auch XHTML wird mit JavaScript leicht "verwässert". Vorteile sind auch Nachteile dieser Methode: CSS-Layouts sind oben beschrieben (am Ende des Artikels kann man es auch vergessen - es hat sich nicht sehr schnell ergeben, da stimme ich zu).

Es bleibt zu wählen, die Schriftart und Farbe "nach Geschmack", an das "Gummi" -Layout nicht weniger "Gummi" Schriftgröße, an das Design von Überschriften zu denken, wird auch ein normales Design der Informationsseite, vollständig in CSS implementiert erhalten. Was wurde auch benötigt, um zu beweisen :)