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

CSS-Layout der Site: Layout in drei Spalten

Unser Layout

Aufgabe

Unsere Aufgabe besteht darin, ein Layout aus drei Spalten mit CSS zu erstellen. Dieses Layout kann als Grundlage für eine informative Seite mit einem "Header" dienen, das Recht ist auch Spalten für das Menü sowie zusätzliche Informationen, mit dem zentralen Textblock auch der "Keller" für Urheberrechte, Kontakte sowie andere Dinge. Typisches Inhalts-Projekt-Layout.

Zweifellos kann dieses Layout nicht als Wunder einer Designduma bezeichnet werden, aber Sie können diese Vorlage immer in einen "göttlichen Look" bringen, indem Sie die richtigen Schriftarten, ihre Größe und ein schönes Logo auswählen. Es ist nicht schwer, das Layout selbstständig zu komplizieren und neue CSS-Blöcke hinzuzufügen.

Site-Layout in drei Spalten komplett auf CSS

Technologien verwendet auch Browser-Unterstützung

Das Layout der Website wird vollständig in CSS implementiert, und es ist geplant, "sporadische" Verwendung von XHTML und JavaScript zu verwenden.

Das verwendete CSS-Layout wird von Internet Explorer 6 unterstützt, aktuelle 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 ebenfalls gezwungen, Textbrowser sowie andere exotische Geräte zu mögen.

Die Leistung des Codes in IE 4, Netscape 4 auch ältere Browser wurden nicht getestet, aber ich bin mir sicher, dass es Probleme geben wird. Dies ist jedoch unkritisch, schauen Sie sich die Beliebtheitsstatistik von Browsern aus Hotlog, Spylog und Liveinteet an.

Die Vor- und Nachteile der betrachteten Methode des CSS-Site-Layouts

Das Layout hat ernsthafte Vorteile sowie ziemlich schwerwiegende Nachteile. Sie müssen entscheiden, was für Ihre Website und ihre Besucher wichtiger ist.

Nachteile:

  • Funktioniert nicht in Internet Explorer 4, Netscape Navigator 4 ist auch ältere Browser.
  • CSS-Layout (das Erstellen von Blöcken und deren Positionierung) wird von modernen Browsern keineswegs ideal unterstützt, daher sollte die Seite in allen von Ihrem Raum genutzten Browsern auf kleine, aber unangenehme Unterschiede in der Darstellung der Seite getestet werden.
  • Mehl mit vertikaler Positionierung ist auch die Definition der Höhe von Elementen in CSS. Das ist nicht so stolz, es sei denn, Sie sind in irgendeiner Weise ein Fan von allen Elementen mit Pixelgenauigkeit.
  • 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 Seiten manuell geschrieben werden (und nicht von Skripten in irgendeiner Weise generiert werden), kann der Raum mit Zeilenumbrüchen "beendet" werden.
  • Es ist schwierig, aus dem Tabellenlayout zu lernen. Zuerst werden die Polster von den Rändern Kopfschmerzen bekommen :)

Plus:

  • Nachdem Sie das CSS-Layout beherrscht haben, ist es einfach, den Code zu verstehen und Stile zu ändern. Mit einer durchdachten CSS-Block-Anordnung werden kleine Design-Änderungen in keiner Weise schwierig sein - es genügt, die CSS-Datei zu bearbeiten.
  • Textbrowser sind auch gezwungen, unser Layout von anderen begrenzten Geräten zu mögen, um Informationen einzugeben - ohne Stile ist es ein einfacher Text in einer Spalte mit einer minimalen Anzahl von XHTML Designelementen.
  • Ohne CSS-Stile (also ein ordentliches XHTML-Layout) - dies ist der Titel der Seite ganz oben, auch der Haupttext, der dem Titel folgt. "Anforderung" (Links, Copyrights, Navigation, News - alles was NICHT der Grund dafür ist, dass der Nutzer auf die Seite kam) verlangsamt sich ganz unten. Eine solche Anordnung von Informationen wird sich positiv auf die Einstellung einfacher Geräte zur Eingabe von Informationen auswirken, die das Wesen der Suchroboter sind - sie lieben, wie viel Zeit der Text auf der Seite hat, aber nicht die ewigen Tabellentags.
  • Schnelles Browsen Bei eindrucksvollen Seiten oder einer langsamen Verbindung kann der Besucher beginnen, den Haupttext auszusprechen, während gleichzeitig die Seitenmenüs geladen werden usw.
  • "Rubber" -Layout - die Breite der Layoutblöcke hängt von der Größe des Browserfensters ab, daher wird der nützliche Bildschirmbereich nicht verschwinden.
  • Einfache Implementierung für dieses CSS-Layout der druckbaren Version der Seite.
  • Pure XHTML-Code ist auch mit CSS, aber keine Tabellen entworfen - es ist "cool" auch sehr modisch. :) .

Vielleicht überwiegen die Vorteile. Wenn Ihre Site nicht für Windows 3.11 im entsprechenden Raum vorgesehen ist, haben Sie auch keine Absicht, dem Layout komplexe Elemente mit einem nicht standardmäßigen Layout hinzuzufügen, wenn Sie bereit sind, das CSS-Blockmodell zu beherrschen.

Ein bisschen CSS-Theorie des Website-Layouts (Erstellung von CSS-Blöcken)

Um die Theorie im Detail zu präsentieren, gibt es keine Wünsche oder Möglichkeiten. Dieses komplexe Thema ist auch umfangreich. Ich werde versuchen, die Links "loszuwerden" und kurz skizzieren, was direkt im Layout verwendet wird.

Also, Links:

Jetzt ein wenig weg. Ein Block ist ein rechteckiges Element einer Webseite, das mit XHTML-Elementen (bazurmansky, tags) (z. B. <div> oder <p>) angegeben wird. Der Block nimmt etwas Platz ein und endet mit einer neuen Zeile, ein Paar <div> -Elemente befinden sich auf der Seite untereinander, weil diese Blockelemente sind. Ein Paar des Elements <i> wird in keiner Weise verwendet, da es sich um Kleinbuchstaben handelt.

Mit CSS können Sie die Parameter der Blöcke bestimmen - äußere Ränder (Ränder), Ränder (Ränder), innere Ränder bis auf den Inhalt (Füllung), tatsächlich die Breite des Inhalts (Breite). Der Inhalt eines CSS-Blocks kann Text, Bilder, verschachtelte Blöcke sowie Objekte manifestieren ... Die Eigenschaft background-color definiert die Hintergrundfarbe (fill) des Blocks, während das Feld margin immer transparent ist. Die Beschreibung dieser Eigenschaften ist auch eine CSS-Blockerstellung.

Die Website www.ilovejackdaniels.com hat ein nützliches CSS-Tutorial, von dem wir uns erlauben, das CSS-Blockschema zu entfernen, nicht die Verletzung des Urheberrechts, sondern die Bequemlichkeit zu erhöhen. Und natürlich vergib mir ilovejackdaniels.com, der auch alle denkbaren und unvorstellbaren Vorteile dieses Bildes besitzt:

CSS-Boxmodellschema

Die Höhe des CSS-Blocks in der Praxis kann in keiner Weise definiert werden (wir reden über "Gummi" -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 die Grenze in keiner Weise sein, wir werden alles durch Polsterung tun, auch die Breite - es wird einfacher auch schneller.

Das CSS-Layout der Site ist "Gummi", das heißt, seine Breite hängt vom verfügbaren Platz (Größe des Browserfensters) ab, daher sind Breite und Abstand als Prozentsatz definiert. Mit Prozentangaben wird die Breite relativ zum übergeordneten Element festgelegt. Das übergeordnete Element ist entweder ein Browserfenster (tatsächlich das <body> -Tag) oder ein beliebiges Blockelement, in das das definierte Element eingebettet ist (im Layout werden mehrere <div> in einem übergeordneten <div> -Block verschachtelt).

Blöcke werden erstellt, indem CSS ihre Eigenschaften (Auffüllung, Breite) definiert. Es ist notwendig, sie richtig auf der Seite anzuordnen. Dies ist auch die CSS-Positionierung. Wenn es keine Möglichkeit gibt, den Standort der Blöcke auf der Seite zu beschreiben, werden diese entsprechend dem Zeitplan ihrer Beschreibung im XHTML-Code der Seite vom Browser untereinander angezeigt. Diese Anordnung wird als normaler Fluss bezeichnet.

Es gibt verschiedene Techniken, die ebenfalls verfügbar sind. Wir verwenden die Eigenschaften position: absolute (absolute CSS-Positionierung) und position: relative (relative Positionierung). Als Nächstes müssen Sie den Offset (in Pixel für ein hartes Layout der Site oder als Prozentsatz für "Gummi") auf der Seite vom oberen, unteren, linken oder rechten Referenzpunkt aus festlegen. Was ist dieser Bezugspunkt?

Für Position: relativ ist der Startpunkt die Position des Blocks im normalen Fluss. Ie - Position: relativ; oben: 10%; links: 10%; - Die Einheit bewegt sich ebenfalls um 10% nach rechts, bezogen auf ihren normalen Standort. Wenn Sie die relative Positionierung registrieren, wird auch der Offset nicht gesetzt, der Block befindet sich im normalen Fluss.

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

Lassen Sie uns versuchen, aus diesen mit dem Leben scheinbar unvereinbaren Regeln einen vernünftigen Funken zu ziehen - allerdings ist es der Layout-Code der Site aus drei Spalten.

XHTML auch CSS-Code-Layout

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

Hier sind weitere "Teile" des Codes auch Erklärungen für sie. .

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;xid=17259,15700022,15700043,15700124,15700149,15700186,15700190,15700201,15700214&amp;amp;usg=ALkJrhhDFa3HjwApTxUwIEcR1arCiC0A7Q#&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;xid=17259,15700022,15700043,15700124,15700149,15700186,15700190,15700201,15700214&amp;amp;usg=ALkJrhhDFa3HjwApTxUwIEcR1arCiC0A7Q#&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;xid=17259,15700022,15700043,15700124,15700149,15700186,15700190,15700201,15700214&amp;amp;usg=ALkJrhhDFa3HjwApTxUwIEcR1arCiC0A7Q#&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;xid=17259,15700022,15700043,15700124,15700149,15700186,15700190,15700201,15700214&amp;amp;usg=ALkJrhhDFa3HjwApTxUwIEcR1arCiC0A7Q#&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;xid=17259,15700022,15700043,15700124,15700149,15700186,15700190,15700201,15700214&amp;amp;usg=ALkJrhhDFa3HjwApTxUwIEcR1arCiC0A7Q#&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;xid=17259,15700022,15700043,15700124,15700149,15700186,15700190,15700201,15700214&amp;amp;usg=ALkJrhhDFa3HjwApTxUwIEcR1arCiC0A7Q#&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;xid=17259,15700022,15700043,15700124,15700149,15700186,15700190,15700201,15700214&amp;amp;usg=ALkJrhhDFa3HjwApTxUwIEcR1arCiC0A7Q#&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;xid=17259,15700022,15700043,15700124,15700149,15700186,15700190,15700201,15700214&amp;amp;usg=ALkJrhj0Qxow5X2MFErvJKyM2PT519utLQ&gt;http://yandex.ru/vesna.html&lt;/a&gt;. &lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt;</code>

In der ersten Lektion wird der Typ des Acts deklariert, andernfalls wird das Layout (im Stile von Internet Explorer 5) in IE 6 auch von Opera falsch dargestellt. Mit fehlerfreiem DOCTYPE kein Problem.

Das <link> -Tag der Seite lädt CSS-Stile aus externen Dateien. Der universelle style.css-Stil liegt im Stammverzeichnis der Site (als Position, das ist der Ordner / public_html) ist auch für Computerbrowser gedacht (media = "screen"). Style print.css wird zum Drucken verwendet, mehr dazu unten. Dann definieren wir mit Hilfe von JavaScript den Browser des Benutzers. Wenn es sich um Internet Explorer 5 handelt, wird ihm der CSS-Stil aus der Datei ie5.css zugewiesen.

Der erste ist der Header div für den Seitenkopf. Es gibt keinen Text im Hauptservice-Block, aber 4 Blöcke sind darin eingeschlossen: Inhalt für den Haupttext der Seite, linkes Menü auch rechtes Menü für das linke bzw. das rechte Menü, auch ein Fußzeilenblock für das "Keller" Layout.

Alle Blöcke sind nur im XHTML-Code definiert, CSS bietet auch den Speicherort für ihre Eigenschaften.

Allgemeiner CSS-Stil

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

In der ersten Lektion definieren wir den <body> -Stil (d. H. Das Browserfenster) - wir entfernen auch die äußeren Einzüge, fügen Hintergrundfarbe hinzu (# f0f0f0 - hellgrau).

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

Für den Headerblock wurden die äußeren Ränder entfernt (Rand: 0px;), eine orangefarbene Füllung wurde ausgewählt und die Breite betrug 100% des übergeordneten Elements (es ist <body>). 100% besteht aus 98% der Breite des Blockinhalts, ebenfalls 1% für Padding-links und auch Padding-rechts. Abgekürzte Schreib-Padding: 1%; Setzt Einzug von allen vier Seiten (oben, links, unten, rechts).

Der Block wird sich im normalen Fluss befinden, mit dem wir bisher zufrieden sind, so dass eine Positionierung nicht notwendig 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 Einrückungsgrenzen, jedoch Breite: 100% - daher entspricht die Hauptbreite der Breite des Browserfensters. Es wird keinen Text im Block geben, aber er ist sehr wichtig für unser Layout. Erstens für die vollständige Positionierung der CSS-Blöcke des rechten und linken Menüs, zweitens, um einen grauen (#ccc) Menühintergrund für die gesamte Seitenhöhe zu erzeugen.

Wie erwähnt, bedeutet Position: relativ den Versatz des Blocks relativ zu seiner Position im normalen Fluss. Aber sobald die Offset-Größe überhaupt nicht spezifiziert ist, wird der Block ähnlich wie der normale CSS-Ablauf angeordnet. Deklarationsposition: relativ; notwendig für die vollständige Positionierung der Seitenmenüblöcke. 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.

Ein grauer Hintergrund ist für main festgelegt. Dies geschieht für das gefüllte Malen der Seitenmenüblöcke. In CSS können Sie die Höhe (Höhe) des Blocks offenbar nicht als Prozentsatz des Browserfensters festlegen, sodass die Höhe abhängig von der Inhaltskapazität bestimmt wird. Das heißt, die Seitenspalten des Menüs werden unterschiedliche Höhen haben, und auch der Hintergrund für sie hat nicht die Bedeutung. Daher füllen wir den Haupthintergrund. Als nächstes füllen wir den Inhaltsblock mit einer anderen Farbe als die "Fußzeile" des Layouts, die Spalten mit einem transparenten Hintergrund werden jedoch visuell dieselbe Höhe haben. Billig auch wütend.

Die Überlaufeigenschaft: versteckt; Es ist notwendig, den kleinen IE6-Fehler zu entfernen. Internet Explorer 6 unter Windows XP mit dem XP-Bildschirmthema (im Falle des klassischen Windows-Themes ist alles in Ordnung) glaubt, dass die Seite nicht vollständig in das Browserfenster passt, fügt auch eine horizontale Bildlaufleiste hinzu. Nur 1-2 Pixel werden gescrollt, anscheinend erhöht das XP-Thema die Breite der Oberflächenelemente des Browsers, aber es (der Browser) ist in keiner Weise davon bewusst ...

Wie auch immer, Überlauf: versteckt; zeigt an, dass der Inhalt, der über die Ränder des Containers hinausgeht (ein wichtiges Beispiel ist ein sehr langer Ausdruck in einem schmalen CSS-Block), ebenfalls abgeschnitten wird und dem Benutzer keine Gelegenheit gegeben wird (zum Beispiel Bildlaufleisten), diesen Inhalt anzuzeigen. 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 blockiert den Hauptinhalt auch als "Fußzeile". Ein hellgrauer Hintergrund für Lesbarkeit - ein schneeweißer Hintergrund und eine schwarze Schrift sind extrem kontrastreich und können auch das Auge ertragen. Orange wird für die Fußzeile verwendet. Der Rest der CSS-Blockbeschreibung ist identisch.

Beide belegen die gesamte Breite der Seite. Inhaltsbreite 58%. Externe Einzüge (abgekürzte Schreibweise im Format - Rand: oben links unten rechts;) 20% links und 20% rechts. Plus, die interne Blockierung des Inhalts aus dem Rahmen des Blocks in 1% von oben, nach links, nach rechts und nach unten. Wir betrachten die horizontale Größe des CSS-Blocks von links nach rechts: 20% + 1% + 58% + 1% + 20% = 100% .

Somit ist die Breite des Fußzeileninhaltes ebenfalls 100% des übergeordneten Hauptblocks, der wiederum 100% des Körpers einnimmt. Die Nuance - die äußeren Ränder des Randes sind 20% auf jeder Seite, die äußeren Ränder des Blocks sind transparent, das heißt, sie sind nicht mit Farbe gefüllt. Die CSS-Inhaltsblöcke sowie die Fußzeile belegen die gesamte Breite des Fensters, und bis jetzt ist es überhaupt nicht klar, welchen Platz man für die Seitenmenüs nehmen 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 die vollständige Positionierung spielen der normale Fluss und andere CSS-Blöcke keine Rolle. Ein Referenzpunkt wird benötigt, die Größe des vertikalen Versatzes ist auch die Breite des Blocks. Der Startpunkt kann ein Browserfenster, ein vollständig oder relativ positionierter Eltern-CSS-Block sein. Jetzt ist klar, warum wir position: relativ für den Hauptblock und Null-Offset verwendet haben.

Der linke Menüblock (linker Navigationsbereich) wird vom Haupt-CSS-Block positioniert, und der Versatz von oben nach links ist jeweils 0 Pixel. Für rechts das gleiche Offset, oben aber auch rechts. Die Breite beider Blöcke beträgt 20% (1% Padding-links + 18% Breite + 1% Padding-rechts) vom übergeordneten Hauptteil. In der Tat, das leftmenu auch rightmenu überlagert die Inhaltsblöcke auch Fußzeile - genauer gesagt, auf ihren transparenten äußeren Kanten des Randes!

Die Höhe des Seitenmenüs hängt vom Inhalt ab. Die Menüs haben keine Hintergrundfarbe, daher ist der Hintergrund für sie die graue Füllung des Hauptblocks. Inhaltsmargen sind auch Fußzeilentransparent. Aus diesem Grund haben die Seitenmenüs die gleiche Höhe und sind auch mit grauer Farbe gefüllt.

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

Der letzte Schliff. 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 den Rand und das Auffüllen unserer CSS-Blöcke. Und Opera auch Mozilla fasst sie zusammen, das Ergebnis ist ein äußerst beeindruckendes "Schlagen" des Textes darüber und auch unterhalb der Blockgrenzen. Dieser Code entfernt die vertikalen äußeren Einrückungen für die Elemente, die in den CSS-Blöcken des Layouts 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:

Falsche Dekoration unseres CSS-Layouts mit Internet Explorer 5

Gemäß den populäreren "Zählern" von Runet - spylog, hotlog auch liveintenet - Internet Explorer 5 wird von ungefähr 18% von Benutzern benutzt, deshalb ist es leider unmöglich, Unterstützung für diesen Browser abzulehnen.

Die Lösung liegt auf der Hand - für den falschen Browser, den falschen CSS zu tun, verbinden Sie diesen Stil auch 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 Sie den Link zur CSS-Datei ie5.css im Seitencode ein (mit demselben Skript).

#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 horizontale Raum durch die Formel berechnet: Rand-links + Rand-links + Polster-links + Breite + Polster-rechts + Rand-rechts + Rand-rechts. In diesem Fall wird die Breite des Inhalts (Text, Bilder, Flash-Objekte ...) durch den Parameter width angegeben.

IE5 berücksichtigt, dass width die Breite der gesamten sichtbaren Blockelemente bestimmt (der sichtbare Teil ist alles außer dem Rand), aber das Ergebnis der Subtraktion von Padding von der Breite von Padding-Werten ist auch der Rand. Daher müssen Sie für alle Blöcke die falsche Breite nach der Formel angeben - Leerzeichen besetzt minus Rand links links Rand rechts.

Ein weiterer Fehler - der Text des Seitenmenüs "klebt" am Rand des Blocks. Es kann gesehen werden, dass von oben (vertikal) eine Einfügung (Auffüllung) von der Seite des Blocks bis zum Inhalt vorhanden ist, aber horizontal nicht. Dies ist nur im Seitenmenü (der Grund, wahrscheinlich, in der vollständigen Positionierung dieser CSS-Blöcke), nur für horizontale Auffüllung ist auch nur dann, wenn sie in Prozent angegeben sind. Links für die Seitenmenüs in Pixeln sind links ebenfalls Einrückungen vorgesehen, zehn sollten ausreichen.

Auch auf dem Screenshot ist zu sehen, dass die linke und die rechte Spalte übereinander liegen. IE5 behandelt in keiner Weise die CSS-Eigenschaft, mit der wir den rechten Menüblock horizontal positionieren. Es ist notwendig, für ihn den Offset bereits auf der linken Seite um 80% (60 + 20 - warum genau so viel, ich denke, es ist auch so klar) zu verschreiben.

CSS zum Drucken von Seiten

CSS-Layout zum Drucken

Das Layout zeigt ein Paar Stile für verschiedene Anzeigegeräte:


style.css für Browser (media = "screen"), aber print.css zum Drucken von Geräten (media = "print"). Dementsprechend sind die CSS-Datenstile, die mit einem Freund verbunden sind, in keiner Weise miteinander verbunden, sondern beschreiben die Seite jeweils auf ihre eigene Weise. Der Stil für print.css wird äußerst simpel sein:

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

Stellen Sie den schneeweißen Hintergrund für die Blöcke ein, machen Sie die Textelemente schwarz. Hyperlinks (<a>) werden in Schwarz ähnlich sein. Stimme zu, für den Abschluss auf dem Siegel ist es sinnvoll.

mit der Richtungsanzeige: keine; Seitenmenü komplett entfernt. Offensichtlich wird die Seite für den Haupttext gedruckt, der Titel tut nicht weh. Der "Keller" bleibt beim Drucken erhalten, im Bedarfsfall können Sie ihn immer auch entfernen.

Fazit

Wir haben ein Seitenlayout in 3 Spalten, dieses Layout wird vollständig von CSS und auch leicht "verdünnt" XHTML und JavaScript beschrieben. Die Vorteile und Nachteile dieser Methode des CSS-Layouts sind oben beschrieben (am Ende des Artikels können Sie auch etwas vergessen - es hat überhaupt nicht gut funktioniert, stimme ich zu).

Es bleibt zu wählen, die Schriftart auch zu den Farben "zu schmecken", an die "Gummi" -Layout nicht weniger als "Gummi" Schriftgröße, über das Design der Überschriften denken, Sie erhalten auch ein normales Design einer Informationsseite, vollständig in CSS implementiert. Was wurde auch benötigt, um zu beweisen :)