960 Grid System (960gs): Unterschied zwischen den Versionen
(Die Seite wurde neu angelegt: „http://960.gs/demo.html http://960.gs Beispiel <pre> <div class="container_12"> <div class="grid_3 prefix_1 suffix_8"> 1 vorher, 3 breit, 8 nachher </div> …“) |
|||
| (Eine dazwischenliegende Version desselben Benutzers wird nicht angezeigt) | |||
| Zeile 10: | Zeile 10: | ||
<div class="grid_10>10 Breit </div><div class="grid_2"> 2 Breit</div> | <div class="grid_10>10 Breit </div><div class="grid_2"> 2 Breit</div> | ||
</div> | </div> | ||
| + | </pre> | ||
| + | |||
| + | |||
| + | == 960gs Klassen == | ||
| + | |||
| + | Gesamtbreite des Layouts ist 960px. Man kann relative einfach breitere Ränder erzeugen. | ||
| + | |||
| + | .container_12 | ||
| + | .container_16 | ||
| + | erzeugen einen Container für den ein 12er oder 16er Spalten Raster gilt (also 960px/16 = 60px oder 960/12 = 80px Raster) | ||
| + | |||
| + | .grid_1 | ||
| + | ... | ||
| + | .grid16 | ||
| + | erzeugen Inhalte verschiedener Breiten, die entweder im 12er oder 16er Raster liegen (je nachdem ob container_12 oder container_16 als Elternelement vorliegt. | ||
| + | |||
| + | .prefix_1 | ||
| + | ... | ||
| + | .prefix_15 | ||
| + | Erzeugt leeren Raum (padding) mit der angegebenen Breite vor dem grid Element | ||
| + | |||
| + | .suffix_1 | ||
| + | ... | ||
| + | .suffix_15 | ||
| + | Erzeugt leeren Raum (padding) nach dem grid Element | ||
| + | |||
| + | .alpha | ||
| + | verhindert den 10px margin am Anfang eines Grid Elements | ||
| + | |||
| + | .omega | ||
| + | verhindert den margin am Ende | ||
| + | |||
| + | .push_1 | ||
| + | ... | ||
| + | .push_15 | ||
| + | Verschiebt ein grid Element um die angegebene Rasterzahl nach Rechts. Sieht evtl. aus wie bei suffix, jedoch wird kein padding erzeugt, sondern das Element verschoben. | ||
| + | |||
| + | .pull_1 | ||
| + | ... | ||
| + | .pull_15 | ||
| + | Wie push, aber verschiebung nach links | ||
Aktuelle Version vom 10. Februar 2012, 08:34 Uhr
Beispiel
<div class="container_12"> <div class="grid_3 prefix_1 suffix_8"> 1 vorher, 3 breit, 8 nachher </div> <div class="grid_10>10 Breit </div><div class="grid_2"> 2 Breit</div> </div>
960gs Klassen[Bearbeiten]
Gesamtbreite des Layouts ist 960px. Man kann relative einfach breitere Ränder erzeugen.
.container_12 .container_16
erzeugen einen Container für den ein 12er oder 16er Spalten Raster gilt (also 960px/16 = 60px oder 960/12 = 80px Raster)
.grid_1 ... .grid16
erzeugen Inhalte verschiedener Breiten, die entweder im 12er oder 16er Raster liegen (je nachdem ob container_12 oder container_16 als Elternelement vorliegt.
.prefix_1 ... .prefix_15
Erzeugt leeren Raum (padding) mit der angegebenen Breite vor dem grid Element
.suffix_1 ... .suffix_15
Erzeugt leeren Raum (padding) nach dem grid Element
.alpha
verhindert den 10px margin am Anfang eines Grid Elements
.omega
verhindert den margin am Ende
.push_1 ... .push_15
Verschiebt ein grid Element um die angegebene Rasterzahl nach Rechts. Sieht evtl. aus wie bei suffix, jedoch wird kein padding erzeugt, sondern das Element verschoben.
.pull_1 ... .pull_15
Wie push, aber verschiebung nach links
