Einfaches 6 Grid Layout fuer 960 Pixel

Schnell und flexibel Webseiten layouten mit Grid Layout.

- Die gesamte Seitenbreite legen wir auf 960 Pixel fest. Diese alles umschliessende Box nennen wir container_6.
- Jede Webseite wird in sechs Spalten aufgeteilt.
- 960px / 6 = 160px - jede Spalte ist also 190px breit.
- Jede Spalte bekommt links und rechts 10 Pixel Aussenabstand.
- Abstand (Luft fuers Auge) zwischen den Spalten also 10px + 10px = 20px.
- bleibt daher 160px - 10px - 10px = 140px uebrig
- Spalten koennen zusammengefasst werden, z.B.
6 = 3 + 3 (zweispaltiges Layout, also 960px = 480px + 480px
6 = 2 + 2 + 2 (dreispaltiges Layout: 320px + 320px + 320px = 960px)
6 = 1 + 4 + 1 (sog. Tempel-Layout mit zwei Saeulen, linke Saeule fuer Navi, rechte fuer Werbung, grosser Mittelbereich fuer Content

CSS-Datei
960x6simple.css

.container_6 {width: 960px; }
.grid_1 { width: 140px; margin: 10px; }
.grid_2 { width: 300px; margin: 10px; }
.grid_3 { width: 460px; margin: 10px; }
.grid_4 { width: 620px; margin: 10px; }
.grid_5 { width: 780px; margin: 10px; }

HTML-Datei
tempel_layout.html

<div class="container_6">
   <div class="grid_1">Nav</div>
   <div class="grid_4">Content</div>
   <div class="grid_1">Ads</div>
</div>

Ist viel einfacher als es sich anhoert. Am besten PDF-Datei ausdrucken (eine Seite) und neben die Tastatur legen.

Viel Spass!
Rob
http://www.linkmatrix.eu/public/pdf/6-grid-960.pdf

SPEED (CACHED): 22.965 ms - 2017-10-24 04:03:14