Die Startseite und die Mehrspaltigkeit
Geschrieben von: Angie Radtke
Text in: english
Joomla bietet uns bei der Gestaltung der Startseite die Möglichkeit, Artikel in Spalten anzuordnen.
In den alten Joomlaversionen wurde die Darstellung dieser Spalten mit einer Layouttabelle gelöst. Eine einfache und praktikable Lösung, die den heutigen Standards aber kaum mehr entspricht.
Ziel war es, diese lästigen Tabellenkonstrukte loszuwerden und ein Markup zu entwickeln, das uns eine mehrspaltige Darstellung mit flexiblen Stylemöglichkeiten bietet.
Die Darstellung der eigentlichen Inhalte wird über die Komponente Com_content gesteuert.
Nachdem wir die Dateien aus dem tmpl-Verzeichnis der Komponente in unser Templatekopiert haben, können sie dort modifiziert und überarbeitet werden. Die Darstellung auf der Startseite wird durch die Dateien im Ordner Frontpage gesteuert.
Die Darstellung der Mehrspaltigkeit war im Tabellenlayout problemlos zu realisieren, es wurden einfach entsprechend Zeilen und Spalten hinzugefügt. Jetzt bleibt uns jedoch nichts anderes übrig, als die Artikel in einen Div-Container zu packen und entsprechend zu floaten.
Damit eine saubere und flexible Darstellung möglich ist, hat jeder dieser Container mehr als eine CSS-Klasse.
Der ein oder andere wird uns sicherlich der Divititis und classizitis bezichtigen, aber wir glauben, dass das Entfernen unnötiger Divs und Klassen weitaus einfacher ist, als das Hinzufügen fehlender.
So jetzt wird es konkret:
Sehen wir uns den Code der Startseite genauer an.
<div class = "leading" >Inhalt leading</ div >
<span class = "leading_separator" > </ span >
< div class = "article_row" >
<div class = "article_column column1 cols2" > Inhalt Artikel1 </ div >
<span class = "article_separator" >& nbsp; </ span >
<div class = "article_column column2 cols2" > Inhalt Artikel2 </ div >
<span class = "article_separator" > </ span >
<span class = "row_separator2" > </ span >
</ div >
Wir beginnen mit <div class="leading">, das den Teasertext enthält. In unserem CSS haben wir diesem Bereich die rosa Hintergrundfarbe und die Beez als Hintergrundbild mitgegeben. Anschließend folgt der leading_separator, seine Aufgabe kann zum Beispiel sein, eine horizontale Linie zu ziehen oder sich in dem Leading-Container befindliche Floats zu clearen (eingefügte Bilder).
Und jetzt wird es spannend, es öffnet sich ein div mit der Klasse .article_row. Diese ersetzt die vormals genutzte Tabellenzeile. In diesen Div befinden sich wiederum unsere einzelnen Artikel, die von einem Container mit der Klasse .article_column umschlossen werden. Diese Klasse ersetzt unsere Tabellenspalten (td).
Da wir nun aber nicht nur die Darstellung in einer Spalte wünschen, benötigen wir eine Klasse, die uns Informationen über die Anzahl der gewählten Spalten gibt.
Hier geben wir der Artikelspalte eine zusätzliche Klasse mit der Klasse .cols1 - .colsx . Damit aber nicht genug. Wir möchten nun die einzelnen Spalten unterschiedlich gestalten. Zum Beispiel die erste Spalte mit gelbem und die zweite mit grünem Hintergrund. Dies gelingt uns, wenn wir die entsprechenden Eigenschaften für die Klasse column1 - columnx festlegen.
Der .row_separator2 cleart die gefloateten Inhalte, so dass es nicht zu Überlappungen mit der nächsten Zeile kommt. Hätten wir eine einspaltige Darstellung gewählt, stünde hier .row_separator1, der entsprechende Formatierungen erlaubt.
