Das 960 Grid-System beherrschen

German (Deutsch) translation by Federicco Ancie (you can also view the original English article)

Die 12- und 16-spaltigen Varianten von 960.gs sind uns bereits bekannt, aber wussten Sie, dass es auch eine 24-spaltige Alternative gibt? In diesem Artikel werden Sie das 960-Grid-System beherrschen, indem Sie die Demo der 24-Spalten-Version analysieren. Wenn Sie bisher nur 960 g für Photoshop-Modelle verwendet haben, betrachten Sie dies als Ihren Glückstag. Am Ende dieses Artikels können Sie Ihre Designs im Handumdrehen in HTML und CSS konvertieren.

Einführung

Ein 960 Grid System Master – das sind Sie, wenn Sie diesen Artikel gelesen haben. Und obwohl wir die 24-Spalten-Variante von 960g verwenden werden, werden Sie vollständig verstehen, wie die beiden älteren Typen (dh 12- und 16-Spalten) auch funktionieren, indem Sie die gleichen Prinzipien anwenden, die Sie hier lernen werden . Aber werfen Sie zuerst einen guten Blick auf die 24-Spalten-Demo auf der 960gs-Site, denn sie ist alles, was wir für unseren Sprung zur Beherrschung dieses beliebten CSS-Frameworks benötigen.

Ein Blick auf die 24-Säulen-Demo

Wir müssen zuerst den HTML-Code der Demo überprüfen, also sehen Sie sich die Quelle an – wenn Sie Chrome, Firefox oder Opera verwenden, drücken Sie einfach Strg+U; Wenn Sie Internet Explorer verwenden, ändern Sie Ihren Browser! :) (benutze auf dem Mac cmd+U für Firefox und opt+cmd+U für Safari und Opera; Chrome bietet nur die Rechtsklick-Option). Belassen Sie das HTML-Quellcodefenster auf Ihrem Desktop, da wir von Zeit zu Zeit darauf verweisen werden.

Als Nächstes müssen Sie die 960.gs-Dateien herunterladen (falls noch nicht geschehen) und die unkomprimierte CSS-Datei 960_24_col.css öffnen. Wir müssen dies tun, weil das CSS der Demo komprimiert ist und schwer zu überprüfen ist. (Wenn Sie der masochistische Typ sind, können Sie stattdessen das CSS der Demo verwenden.

Das ist so ziemlich alles, was wir vorbereiten müssen, abgesehen von einem halb funktionierenden Gehirn. Jetzt werden Sie feststellen, dass die Demo-Seite den Schlüssel zum vollständigen Verständnis des Grid-Systems enthält, und wir beginnen mit der Untersuchung seiner drei Abschnitte.

Überprüfung des Frameworks: Die drei Abschnitte der Demo

Die drei Abschnitte bestehen aus:

1: Oberer Abschnitt

Zuerst haben wir einen oberen Bereich, der zwei Spalten für jede Zeile anzeigt, wobei die linke Spalte breiter wird, wenn die rechte Spalte schmaler wird, bis sie gleich groß sind.

2: Mittlerer Abschnitt

Als nächstes haben wir einen mittleren Abschnitt, der ein 30-px-Quadrat zeigt, das sich fortschreitend von links nach rechts bewegt, während Leerzeichen davor und danach die Zeile erweitern, um die gesamte Breite von 960 Pixeln einzunehmen.

3: Unterer Abschnitt

Schließlich gibt es einen unteren Abschnitt, der zwei Reihen von Rechtecken mit unterschiedlichen Größen zeigt, die die 960px-Breite in zwei Hälften teilen.

bottom section of the 24-column 960 demo

Ob Sie es glauben oder nicht, das vollständige Verständnis der zugewiesenen Klassen hinter diesen Spalten ist alles, was Sie jemals brauchen werden, um das 960-Grid-System zu verstehen. Ist das nicht toll? Lassen Sie uns jeden Abschnitt weiter untersuchen.

Oberer Abschnitt: Klassen `grid_1` bis `grid_24`

Ein Blick in den Quellcode dieses Abschnitts zeigt uns, dass zuerst, bevor eine der grid_xx-Klassen zugewiesen wurde, die Klasse container_24 dem gesamten Wrapping-Div zugewiesen wurde:

    
<div class="container_24"> 
	<h2> 
		24 Column Grid
	</h2>
	...
</div>
<!-- end .container_24 -->

Die Bedeutung dieser Klasse kann nicht genug betont werden – sie bestimmt teilweise die Breite der Spalten, denen eine grid_xx-Klasse zugewiesen wird. Und wie Sie vielleicht schon vermutet haben, "teilt" es die 960px-Breite auch in 24 Spalten.

(In ähnlicher Weise wird die Breite von container_12 oder container_16 oben „aufgeteilt“. )

Im weiteren Verlauf werden Sie feststellen, dass die oberste Zeile ein einzelnes div mit der Klasse grid_24 hat. Die restlichen Zeilen im oberen Abschnitt haben jeweils zwei Divs: die linken Divs reichen von der Klasse grid_1 bis zu grid_12 und die rechten Divs reichen von grid_23 bis hinunter zu grid_12; die Summe der beiden Klassen in jeder Zeile ist 24.

     
<div class="grid_24"> 
	<p> 
		950
	</p> 
</div> 
<!-- end .grid_24 --> 

<div class="clear"></div> 

<div class="grid_1"> 
	<p> 
		30
	</p> 
</div> 
<!-- end .grid_1 --> 

<div class="grid_23"> 
	<p> 
		910
	</p> 
</div> 
<!-- end .grid_23 --> 

<div class="clear"></div> 

<div class="grid_2"> 
	<p> 
		70
	</p> 
</div> 
<!-- end .grid_2 -->

<!-- ... -->

<div class="grid_11"> 
	<p> 
		430
	</p> 
</div> 
<!-- end .grid_11 --> 

<div class="grid_13"> 
	<p> 
		510
	</p> 
</div> 
<!-- end .grid_13 --> 

<div class="clear"></div> 

<div class="grid_12"> 
	<p> 
		470
	</p> 
</div> 
<!-- end .grid_12 --> 

<div class="grid_12"> 
	<p> 
		470
	</p> 
</div> 
<!-- end .grid_12 --> 

<div class="clear"></div>

So würden die zugewiesenen grid_xx-Klassen aussehen, wenn wir versuchen würden, den Klassennamen jedes Divs zu visualisieren:

top section of the 24-column 960 demo with grid classes labeled

Sie haben vielleicht im Code bemerkt, dass wir nach dem letzten div in Folge ein leeres div mit der Klasse clear haben. Ignorieren Sie es vorerst, wir kümmern uns später darum.

Schauen wir uns als nächstes an, was hinter den Kulissen, also im CSS, passiert, wenn wir die Klasse container_24 zuweisen:

        .container_24 {
            margin-left: auto;
            margin-right: auto;
            width: 960px;
        }

Wie Sie sehen können, zentriert diese Klasse, die dem gesamten Wrapping-Div des Dokuments zugewiesen wurde, unseren Arbeitsbereich und gibt ihm eine Breite von 960px. Leicht genug.

Als nächstes sind hier die grid_xx-Klassen, die auf den Hauptdivs des oberen Abschnitts platziert wurden:

        
        .grid_1,
        .grid_2,
        .grid_3,
        ...
        .grid_23,
        .grid_24 {
            display: inline;
            float: left;
            margin-left: 5px;
            margin-right: 5px;
        }

Wir sehen, dass die grid_xx-Klassen den Spalten einen linken und rechten Rand von jeweils 5px geben, was einen 10px-Rinnstein bildet, wenn Sie die Spalten nebeneinander platzieren. Dies wiederum wird erreicht, indem sie alle nach links schweben.

Außerdem erhalten sie eine Inline-Anzeige, um zu verhindern, dass der Double Margin Float Bug in unserem geliebten Browser ausgelöst wird. (Anscheinend wird es ausgelöst, wenn Sie ein Element schweben lassen, dem Ränder zugewiesen sind.)

Schließlich haben wir die Nachkommenselektoren, die durch eine Kombination der Klassen container_24 und grid_xx gebildet werden:

  
        .container_24 .grid_1 {
            width: 30px;
        }
        .container_24 .grid_2 {
            width: 70px;
        }
        ...
        ...
        .container_24 .grid_23 {
            width: 910px;
        }
        .container_24 .grid_24 {
            width: 950px;
        }

Wie Sie sehen können, sind diese CSS-Deklarationen diejenigen, die tatsächlich die Breite der Spalten bestimmen, denen eine grid_xx-Klasse zugewiesen ist. So „teilt“ die Zuweisung von container_24 oben die Breite in 24 Spalten – die voreingestellten Breitengrößen werden entsprechend der container_xx-Klasse zugewiesen, mit der eine grid_xx-Klasse kombiniert wird.

the container and grid classes in 24-col combined sets the width of the columns

Zu Vergleichszwecken sehen die entsprechenden CSS-Deklarationen in der 16-spaltigen Variante folgendermaßen aus:

         
        .container_16 .grid_1 {
            width: 40px;
        }
        
        .container_16 .grid_2 {
            width: 100px;
        }
        
        .container_16 .grid_3 {
            width: 160px;
        }

the container and grid classes in 16-col combined sets the width of the columns

Wenn Sie den HTML-Quellcode der Demo für die 12- und 16-Spalten-Demo mit der 24-Spalten-Demo vergleichen, werden Sie feststellen, dass es keinen Unterschied in der Zuweisung der grid_xx-Klassen gibt. Und jetzt wissen Sie, warum das so ist – es ist nicht die Klasse grid_xx, die die Breite der Spalten bestimmt, sondern ihre Kombination mit einer Klasse container_xx, wie im CSS oben gezeigt.

Eine weitere erwähnenswerte Sache ist die tatsächliche Größe jedes Containers, wenn Sie eine grid_xx-Klasse zuweisen. Obwohl es in der Demo mit 30, 70, 110 usw. beschriftet ist, sind es aufgrund der linken und rechten Ränder auf beiden Seiten des Containers tatsächlich 10 Pixel mehr.

actual size of the containers is 10px more than its label

Wie du siehst,

grid_1 hat eine Breite von 30px + 10px horizontale Ränder (Gesamtbreite: 40px)
grid_2 hat eine Breite von grid_1 (40px) + 30px Breite + 10px Ränder (Gesamtbreite: 80px)
grid_24 hat eine Breite von grid_23 (920px) + 30px Breite + 10px Ränder (Gesamtbreite: 960px)

Auf diese Weise zu sehen, erfüllt die Mathematik, die wir für die Breite haben: dass 24 40px breite Spalten gleich 960px sind (d. h. 40px * 24 = 960px).

Diese Ansicht zeigt genauer, was das CSS tatsächlich mit dem Markup macht. Obwohl die Größe des Containers wirklich nur 30px, 70px, 110px usw. beträgt (wie in der Demo angegeben), ist es hilfreich zu wissen, dass die horizontalen Ränder der Grund dafür sind, dass die Summe der Breiten für jede Zeile nicht gleich ist 960px. (Es beträgt nur 940px, mit Ausnahme der ersten Zeile, der ein grid_24 zugewiesen ist, das sich über 950px erstreckt. Die "verlorenen" 20px für alle anderen Divs werden durch die ganz linken und rechten 5px-Ränder und den 10px-Rand zwischen den 2 Spalten erklärt Für jede Reihe.)

Aber hier ist die praktischere Sache, die Sie sich merken sollten: Solange Sie beim Erstellen Ihrer Designs die 24-Spalten-PSD-Vorlage verwenden (oder die 12- oder 16-Spalten-PSD-Vorlagen), können Sie einfach die Anzahl der Spalten zählen Sie für ein bestimmtes Designelement möchten, verwenden Sie diese Nummer für Ihre grid_xx-Klasse, und die Spalte ist festgelegt. Wenn Ihr Logo beispielsweise vier Spalten umfasst, geben Sie seinem enthaltenden div eine grid_4-Klasse.

Hier ist ein Beispiel für die Verwendung:

Obwohl die 960.gs-Site (oben gezeigt) tatsächlich die 12-Spalten-Variante verwendet, könnten wir genauso gut das 24-Spalten-Muster darauf legen und es passt immer noch perfekt zum Layout (da die 24-Spalten-Version natürlich ist , nur die 12-spaltige Version mit durch zwei geteilten Spalten).

Wie Sie sehen können, erleichtert das Wissen, dass wir eine Breite von 960px haben, die in 24 Spalten unterteilt ist, das Leben, da wir unsere Designelemente nur entlang der Kanten der Spalten ausrichten müssen, die Anzahl der Spalten zählen, die sie belegen, und dies als unser grid_xx festlegen Klassennummer, und wir sind fertig.

Aber was ist, wenn Sie viele leere Räume in Ihrem Design haben möchten? Oder was ist, wenn Sie ein kleines Designelement zentrieren und nur weiße Flächen darum herum haben möchten?

Geben Sie die Klassen prefix_xx und suffix_xx ein.

Mittlerer Abschnitt: Klassen `prefix_xx` und `suffix_xx`

Wenn Sie das Markup für den mittleren Abschnitt überprüfen, sehen Sie Variationen dieses Codes:

<div class="grid_1 prefix_xx suffix_xx"> 
    <p>
        30
    </p> 
</div>

...wobei prefix_xx + suffix_xx = 23. (Das heißt 0 + 23, 1 + 22, 2 + 21, 3 + 20 usw.)

Was passiert hier?

Zunächst werden Sie feststellen, dass jede Zeilenklassenzuweisung 24 Spalten umfasst (grid_1 + kombinierte Werte der Klassen prefix_xx und suffix_xx, also 23).

Als nächstes sehen Sie, dass die Klassen prefix_xx in aufsteigender Reihenfolge (von 1 bis 23) sind, während die Klassen suffix_xx absteigend (von 23 bis 1) sind. Auch wenn prefix_xx oder suffix_xx den Wert 23 hat, hat es kein Gegenstück suffix_xx oder prefix_xx Klasse, da es nicht mehr benötigt wird (der Wert ist bereits 23).

Schließlich ist jede dieser Einheiten 30px breit, und wie wir in den grid_xx-Klassen oben gesehen haben, haben sie auch 10px horizontale Ränder.

Wir wissen bereits, dass die Zuweisung einer grid_1-Klasse einem Element eine Breite von 30 Pixeln und eine Auffüllung von 5 Pixeln auf beiden Seiten verleiht. Aber was machen die Klassen prefix_xx und suffix_xx?

Wie Sie vielleicht schon erraten haben, geben sie zusätzliche linke (prefix_xx) und rechte (suffix_xx) Padding, wodurch die Größe einer grid_xx-Klasseneinheit erhöht wird. Daher geben prefix_1, prefix_2 und prefix_3 Ihrem Element linke Abstände von 40px, 80px bzw. 120px; während die suffix_xx-Gegenstücke die gleiche Anzahl von Auffüllungen erhalten, jedoch auf der gegenüberliegenden Seite.

     
.container_24 .prefix_1 {
    padding-left: 40px;
}        
.container_24 .prefix_2 {
    padding-left: 80px;
}

...

.container_24 .suffix_1 {
    padding-right: 40px;
}

.container_24 .suffix_2 {
    padding-right: 80px;
}

Fügen Sie für Leerzeichen in Ihren Designs einfach die Klassen prefix_xx und suffix_xx hinzu. Sie sperren Ihren Inhalt auf eine bestimmte Breite (bestimmt durch die von Ihnen zugewiesene grid_xx-Klasse), während der Raum auf beiden Seiten mit Padding gefüllt wird.

additional horizontal paddings in grid_xx units

Lassen Sie uns für ein einfaches Beispiel noch einmal so tun, als würde die 960.gs-Homepage die 24-Spalten-Variante verwenden und dass die Twitter-Vogel-Grafik das Logo der Site ist.

Wir sehen, dass es drei Spalten belegt, also geben wir ihm die Klasse grid_3. Nehmen wir auch an, dass es keine anderen Elemente entlang seiner Reihe gibt. Wir würden ihm daher auch eine Klasse suffix_21 (3 + 21 = 24) geben, da die zusätzliche Polsterung die gesamte Breite überspannen muss.

Wenn sich in dieser Zeile andere Elemente befinden, müssen wir natürlich die Klasse suffix_xx anpassen, um Platz für ein anderes Element zu schaffen, das einige grid_xx-Klassen umfasst (z. B. ein Suchformular). Je nachdem, wo sich Ihre Designelemente relativ zum linken Rand der Zeile befinden, müssen Sie möglicherweise auch eine Klasse prefix_xx hinzufügen.

Denken Sie immer daran: Die in den Klassen für jede Zeile verwendeten Zahlen (ob grid, prefix, oder suffix) sollten gleich 24 sein.

Als Nächstes führen wir ein wenig „Magie“ durch, da die nächsten Klassen es ermöglichen, dass Ihre Inhalte anders erscheinen, als das Markup es vorhersagt.

Unterer Abschnitt: `pull_xx` und push_xx Klassen

Wenn Sie Firefox in diesem Abschnitt derzeit nicht verwenden, möchte ich Sie bitten, vorübergehend zu wechseln, da Sie die nächsten Konzepte mit der Web Developer Toolbar (WDT)-Erweiterung von Chris Pederick für Firefox besser verstehen. (Wenn Sie es noch nicht installiert haben, ist es jetzt an der Zeit, es herunterzuladen und zu installieren. Ich verstehe, dass es bereits eine Google Chrome-Version des WDT gibt, aber meiner Meinung nach ist es nicht annähernd das Firefox-Pendant.)

Wenn Sie Firefox mit bereits installiertem WDT ausführen, gehen Sie zurück zur 24-Spalten-Demoseite und scrollen Sie ganz nach unten. Sie werden die zwei Gruppen von Boxen sehen, die ich Ihnen vor einiger Zeit gezeigt habe – unterschiedlich groß, aber dennoch zusammenpassend, um diesen letzten Abschnitt der Demo zu bilden.

Sehen Sie sich nun den HTML-Code für diesen Abschnitt an:

<div class="grid_12 push_12"> 
    <div class="grid_6 alpha"> 
        <p> 
            230
        </p> 
    </div> 
    <!-- end .grid_6 .alpha --> 

    <div class="grid_6 omega"> 
        <p> 
            230
        </p> 
    </div> 
    <!-- end .grid_6 .omega --> 

    <div class="clear"></div> 

    <div class="grid_1 alpha"> 
        <p> 
            30
        </p> 
    </div> 
    <!-- end .grid_1 .alpha --> 

    <div class="grid_11 omega"> 
        <p> 
            430
        </p> 
    </div> 
    <!-- end .grid_11 .omega --> 

    <div class="clear"></div> 

</div> 
<!-- end .grid_12 .push_12 --> 

<div class="grid_12 pull_12"> 
    <div class="grid_1 alpha"> 
        <p> 
            30
        </p> 
    </div> 
    <!-- end .grid_1 .alpha --> 

    <div class="grid_11 omega"> 
        <p> 
            430
        </p> 
    </div> 
    <!-- end .grid_11 .omega --> 

    <div class="clear"></div> 

    <div class="grid_6 alpha"> 
        <p> 
            230
        </p> 
    </div> 
    <!-- end .grid_6 .alpha --> 

    <div class="grid_6 omega"> 
        <p> 
            230
        </p> 
    </div> 
    <!-- end .grid_6 .omega --> 

    <div class="clear"></div> 

</div> 
<!-- end .grid_12 .pull_12 --> 

<div class="clear"></div>

Vergleichen Sie es erneut mit dem, was Sie auf der Demoseite sehen.

Was passiert hier? Sollte nicht die erste Gruppe von Boxen (230-230-30-430) vor der letzten Gruppe (30-430-230-230) angezeigt werden, wie im Markup?

Nun, das ist die Stärke der Klassen push_xx und pull_xx. Aber bevor wir darauf eingehen, gehen Sie zum WDT, klicken Sie auf die Schaltfläche Informationen und wählen Sie Div-Reihenfolge anzeigen, um sicherzustellen, dass Sie richtig sehen, wie sich das CSS auf das Markup auswirkt.

web developer toolbar's display div order command chosen

Hier ist ein Screenshot von dem, was Sie sehen sollten:

bottom section with display div order command activated

Ich musste dies zeigen, um zu zeigen, dass die beiden Gruppen in eine linke und rechte Seite unterteilt sind und nicht in eine obere und eine untere. Dieser Wahrnehmungsfehler ist leicht zu machen (wie ich), weil: (1) wir es gewohnt sind, Div-Gruppen zu sehen, die sich über die gesamte Breite von 960 Pixel erstrecken; und (2) die beiden Gruppen haben ähnlich große Kästchen, die leicht miteinander verwechselt werden können.

(Nathan Smith, der 960gs-Schöpfer, hätte wahrscheinlich Boxen mit verschiedenen Größen verwenden können - z. B. 70-390-190-270 und 230-230-30-430 -, um den gleichen Effekt zu erzielen und hätte die potenzielle Verwirrung vermieden, aber er tat es nicht....)

Aber jetzt, da Sie gesehen haben, wie die erste Gruppe (wie sie im Markup erscheint) „gepusht“ wurde und wie die zweite Gruppe von diesen Klassen „gezogen“ wurde, sehen Sie sich das CSS an, um zu sehen, wie sie es machen:

    
.push_1, .pull_1,
.push_2, .pull_2,
...
.push_22, .pull_22,
.push_23, .pull_23 {
    position: relative;
}

...

.container_24 .push_1 {
    left: 40px;
}

.container_24 .push_2 {
    left: 80px;
}

...

.container_24 .push_22 {
    left: 880px;
}

.container_24 .push_23 {
    left: 920px;
}

...

.container_24 .pull_1 {
    left: -40px;
}

.container_24 .pull_2 {
    left: -80px;
}

...

.container_24 .pull_22 {
    left: -880px;
}

.container_24 .pull_23 {
    left: -920px;
}

Erstens werden diese beiden Klassen HTML-Elementen zugewiesen, um diese Elemente relativ zu positionieren, sodass wir die divs relativ zu ihrer normalen Position im Dokument nach links, rechts, oben oder unten verschieben können. (Mehr zur CSS-Positionierung hier.)

Als nächstes geben die pull_xx-Klassen in Kombination mit der container_24-Klasse dem div einen negativen linken Padding, der es ermöglicht, den Inhalt des div nach links zu „ziehen“. Auf der anderen Seite tun die Klassen push_xx erwartungsgemäß das Gegenteil und geben dem div einen (positiven) linken Padding, um seinen Inhalt nach rechts zu „schieben“ (indem er dem linken Padding nachgibt).

"Aber warum der Ärger?" Sie könnten fragen. „Warum bringen Sie sie nicht gleich im Markup in die richtige Reihenfolge, damit Sie diese unnötigen Klassen nicht verwenden müssen?“

Gute Fragen. Die Antwort liegt im Streben nach semantischem und zugänglichem Markup – unsere Designs sollten das Markup nicht zu einer Struktur zwingen, die keinen Sinn ergibt oder nicht den Standards entspricht, wenn die Stile deaktiviert sind. Und CSS bewältigt nachweislich solche Situationen elegant – es ermöglicht uns, das Aussehen unserer Designs zu erreichen, unabhängig davon, wie das Markup geschrieben wurde (naja, weitgehend).

Auf der 960gs-Site zeigt Nathan Smith den Header als gutes Beispiel dafür, wie er diese Klassen verwendet hat:

Oberflächlich betrachtet könnten wir denken, dass das Markup zuerst das Twitter-Logo, dann den Download-Link und schließlich das 960-Logo zeigt. Aber das wäre nicht semantisch – der Titel der Site (d. h. das 960-Logo) sollte an erster Stelle stehen. Und wie Sie wahrscheinlich wissen, hat dieses Arrangement auch SEO-Vorteile. Das Markup für den Header sieht also ungefähr so aus:

<body> 
<div class="container_12"> 
    <h1 class="grid_4 push_4"> 
        960 Grid System
    </h1> 
    <!-- end .grid_4.push_4 --> 
    <p id="description" class="grid_4 pull_4"> 
        <a href="#">Download</a> - Templates: Acorn Fireworks, Flash, ...
    </p> 
    <!-- end #description.grid_4.pull_4 -->

Wie Sie sehen, kommt zuerst das Logo und danach der Download-Link. (Das Markup für das Twitter-Logo befindet sich nach der Fußzeile, hat eine Twitter-ID und ist absolut positioniert. Es wurde keine 960.gs-Klasse zugewiesen, daher werden wir uns nicht darum kümmern.)

Sie haben auch im Markup (wie vorhergesagt) gesehen, dass das Logo gepusht und der Download-Link-Bereich gezogen wurde. Um es klarer zu visualisieren:

Und so verwenden Sie die Push- oder Pull-Klassen – wissen Sie, dass sie Ihren Divs entweder einen negativen oder positiven linken Padding geben und dann Ihren Inhalt entsprechend der Anzahl der Spalten „ziehen“ oder „schieben“, die Ihr Inhalt ziehen oder verschieben soll .

Es gibt noch eine letzte Gruppe von Klassen, die integraler Bestandteil von 960.gs sind – und mit ihnen können Sie komplexe Layouts erstellen. Eine Spalte, die sich beispielsweise über mehrere Zeilen erstreckt. Lassen Sie uns sie als nächstes angehen.

`alpha`- und `omega`-Klassen

Wenn Sie bereits Tutorials oder Artikel zu 960.gs gelesen haben, wissen Sie wahrscheinlich bereits, dass die Alpha- und Omega-Klassen die von grid_xx-Klassen festgelegten horizontalen Paddings aufheben. Und höchstwahrscheinlich wissen Sie auch, dass ihre primäre Verwendung darin besteht, grid_xx-Klassen in verschachtelten Divs zu verwenden.

Für diejenigen, die es noch nicht wissen, gehen wir zu unserem CSS und sehen, was diese Klassen mit den Elementen machen, denen sie zugewiesen sind:

.alpha {
	margin-left: 0;
}

.omega {
	margin-right: 0;
}

Ziemlich einfach – sie setzen einfach den linken (Alpha) und rechten (Omega) Rand auf Null. Und wie wir vor einiger Zeit gesehen haben, weisen wir einem Element, wenn wir eine grid_xx-Klasse zuweisen, automatisch horizontale Ränder von 5px auf beiden Seiten zu. Bei verschachtelten Divs möchten wir diese Margen nicht verdoppeln, daher geben wir entsprechend eine Alpha- oder eine Omega-Klasse oder beides an.

bottom section div group showing alpha and omega classes

Ein verschachteltes Div, das den linken Rand seines übergeordneten Divs berührt, würde die Alpha-Klasse erhalten. Auf ähnliche Weise wird die Omega-Klasse dem verschachtelten div zugewiesen, das sich am rechten Rand des übergeordneten divs befindet. Aber was ist, wenn wir ein verschachteltes Div haben, das beide Kanten seines Eltern-Divs berührt? Richtig, wir weisen ihm beide Klassen zu.

Kommen wir zu einem Beispiel, damit Sie sehen können, wie es gemacht wird.

Obwohl in der 960.gs-Demo nicht gezeigt, ist hier ein Beispiel dafür, wie mit Hilfe der Alpha- und Omega-Klassen (und verschachtelter Divs mit grid_xx-Klassen) ein komplexes Layout erreicht wird:

blocks of content to demonstrate alpha & omega and nested divs

Hier haben wir Spalten, die sich auf beiden Seiten über mehrere Zeilen erstrecken, mit Zeilen und Kästchen in der Mitte. Sie können es sich auch als typisches 3-Spalten-Layout vorstellen; aber für unser Beispiel verwenden wir nur 15 Spalten. Natürlich können Sie es problemlos auf 24 Spalten erweitern.

Der Schlüssel zum Erstellen von Layouts wie diesen in 960.gs ist:

Denken Sie daran, dass 960.gs das Layout durch schwebende Divs nach links ermöglicht.
Erstellen Sie Ihre verschachtelten Divs aus diesen anfänglichen Floating-Divs. Dies bedeutet, dass Sie schwebende Divs innerhalb von schwebenden Divs haben.

Hier ist eine Möglichkeit, unser Layout anzugehen: Gruppieren Sie sie zuerst in drei Spalten und weisen Sie ihnen die entsprechenden grid_xx-Klassen zu:

Weisen Sie als Nächstes die zusätzlichen grid_xx-Klassen für die verschachtelten Divs zu (beachten Sie, dass wir keine verschachtelten Divs für die rechte Spalte haben):

Da wir in verschachtelten divs mindestens zwei Ebenen von grid_xx-Klassen haben, müssen wir auch die Alpha- und Omega-Klassen entsprechend hinzufügen:

Die verschachtelten divs in der linken Spalte berühren beide Kanten ihres übergeordneten divs, daher müssen wir sowohl Alpha als auch Omega hinzufügen. Das gleiche gilt für die Divs mit grid_8-Klassen im mittleren Abschnitt. Aber jedes grid_4 div oben muss nur Alpha oder Omega haben, da es nur entweder den linken oder den rechten Rand seines Eltern-Divs berührt.

Wie Sie vielleicht aus diesem einfachen Beispiel geschlossen haben, können Sie divs mit grid_xx-Klassen beliebig tief verschachteln (wenn Ihr Design es erfordert), solange Sie sie richtig markieren und ihnen die richtigen 960.gs-Klassen zuweisen, damit sie werden korrekt geflogen und alle überschüssigen Margen werden annulliert.

Apropos Floats: Die letzte Gruppe von 960.gs-Klassen, obwohl sie nicht nur für 960.gs bestimmt ist, macht es möglich – sie löschen die Floats, die automatisch erstellt werden, wenn Sie eine grid_xx-Klasse zuweisen.

Das Feld nivellieren: Die `clear` Klassen

Früher haben wir dies im Markup bemerkt – auf jedes Div, dem eine grid_xx-Klasse gegeben wurde, die auch das letzte Div für seine Zeile war, folgte ein leeres Div mit der Klasse clear.

    
<div class="grid_5"> 
    <p> 
        190
    </p> 
</div> 
<!-- end .grid_5 --> 

<div class="grid_19"> 
    <p> 
        750
    </p> 
</div> 
<!-- end .grid_19 --> 

<div class="clear"></div> 

<div class="grid_6"> 
    <p> 
        230
    </p> 
</div> 
<!-- end .grid_6 --> 

<div class="grid_18"> 
    <p> 
        710
    </p> 
</div> 
<!-- end .grid_18 --> 

<div class="clear"></div>

Der Grund dafür ist, dass wir schwebende Divs löschen müssen, denn sobald wir sie schweben, nehmen sie keinen Platz mehr ein, wodurch die Elemente darunter „hochgezogen“ werden, was letztendlich zu einem kaputten Layout führt.

Wie wir in der Demo gesehen haben, besteht eine Lösung für dieses potenzielle Problem darin, ein zusätzliches nicht-semantisches div mit einer Klasse von clear zu platzieren, was Folgendes bewirkt:

.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}

Der obige Code ist im Grunde Nathan Smiths eigene Lösung des Problems, wie in seinem Blog beschrieben. Viele Webdesigner haben damit keine Probleme, außer wahrscheinlich Standardisten, die bei dem Gedanken erschrecken, zusätzliche nicht-semantische Divs im Markup für ein Styling-Problem zu verwenden.

Zum Glück hat Nathan Smith auch die clearfix-Lösung in das CSS 960.gs aufgenommen, das zuerst auf PositionIsEverything.net diskutiert wurde. Es macht das zusätzliche div überflüssig, da Sie es neben den grid_xx-Klassen platzieren und den gleichen Effekt erzielen können:

<div class="grid_5"> 
    <p> 
        190
    </p> 
</div> 
<!-- end .grid_5 --> 

<div class="grid_19 clearfix"> 
    <p> 
        750
    </p> 
</div> 
<!-- end .grid_19 --> 

<div class="grid_6"> 
    <p> 
        230
    </p> 
</div> 
<!-- end .grid_6 --> 

<div class="grid_18 clearfix"> 
    <p> 
        710
    </p> 
</div> 
<!-- end .grid_18 -->

Das ist das gleiche Beispiel-Markup oben, wobei die zusätzlichen divs entfernt und die clearfix-Klasse hinzugefügt wurde. Es wird das gleiche tun, also können Sie diese Methode des Löschens wählen, wenn Sie es nach Ihrem Geschmack finden. Hier ist das CSS dafür:

.clearfix:after {
    clear: both;
    content: '';
    display: block;
    font-size: 0;
    line-height: 0;
    visibility: hidden;
    width: 0;
    height: 0;
}
/*
The following zoom:1 rule is specifically for IE6 + IE7.
Move to separate stylesheet if invalid CSS is a problem.
*/

* html .clearfix,
*:first-child+html .clearfix {
    zoom: 1;
}

Der Code kann ein wenig anders sein, als Sie es gewohnt sind. Dies liegt daran, dass Nathan Smith es auf einem Blog-Eintrag von Jeff Star basiert, der angeblich den ursprünglichen Clearfix-Hack aktualisiert, um Code zu beseitigen, der für einen ausgestorbenen Browser gedacht ist (dh IE für Macs) und ihn für neuere optimiert (dh IE6 und IE7).

Abschluss

Mit nur der 24-Spalten-Demo von 960.gs (und in einigen Fällen der 960.gs-Site selbst) habe ich Ihnen gezeigt, wie jede ihrer Klassen funktioniert und wie Sie sie verwenden können, um Ihre 960-basierten Designs in . zu konvertieren HTML und CSS.

Jeder Abschnitt in der Demo vermittelt Lektionen, die es zu lernen gilt, und wenn Sie sehen, was die Klassen mit Ihrem Markup machen, indem Sie das CSS untersuchen, verschwindet das Geheimnis von 960.gs und Sie erhalten ein besseres Verständnis dafür, was hinter den Kulissen passiert. Vielleicht finden Sie sogar neue Möglichkeiten, die Klassen zu verwenden, da Sie jetzt wissen, was sie tun.

Das Anwenden Ihres neu gewonnenen Wissens wird einfach, denn sobald Sie Ihre Spalten mit 960.gs festgelegt haben, müssen Sie den Divs nur noch IDs (je nach Situation) als Hooks zuweisen, um die Polsterung der Divs oder die Größe von weiter anzupassen seinen Text im Inneren.