Einfaches 6 Grid Layout fuer 780 Pixel

Schnell und flexibel Webseiten layouten mit Grid Layout.

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

CSS-Datei
780x6simple.css

.container_6 {width: 780px; }
.grid_1 { width: 110px; margin: 10px; }
.grid_2 { width: 240px; margin: 10px; }
.grid_3 { width: 370px; margin: 10px; }
.grid_4 { width: 500px; margin: 10px; }
.grid_5 { width: 630px; 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-780.pdf

SPEED (CACHED): 123.443 ms - 2017-10-24 04:01:49