HTML und CSS
Wie bereits in Teil 1 werden auch in diesem Workshop ganz einfache und kurzgehaltene Vorlagen verwendet. Prinzipiell können die verschiedenen Bereiche und Content-Elemente beliebig erweitert und mit CSS gestaltet werden. Sämtliche Dateien und Listings in diesem Workshop finden Sie über den am Ende des Artikels abgedruckten Softlink auf der T3N-Website.
Als erstes Content-Element erstellen Sie einen zweispaltigen Container, der es ermöglicht, Standard-Content-Elemente in zwei Spalten zu platzieren. Das HTML-Template besteht aus einem umschließenden Container, der wiederum zwei Div-Container enthält. Diese innen liegenden Container werden dann über CSS so formatiert, dass sie nebeneinander stehen.
<html> <head> <title>Zwei Spalten</title> <link href="mainstyle.css" rel="stylesheet" type="text/css"> </head> <body> <div class="zweispaltencontainer"> <div class=“linke-spalte“> </div> <div class=“rechte-spalte“></div> <div class=“clearer“></div> </div> </body> </html>
Listing 1
.zweispaltencontainer .linke-spalte{
float:left;
width:50%;
}
.zweispaltencontainer .rechte-spalte{
float:left;
width:50%;
}
.clearer{
float:none;
clear:both;
}
Listing 2
Die HTML-Datei muss, wie auch das Page-Template, im Fileadmin-Ordner auf dem Server Ihrer TYPO3-Installation in einem Unterverzeichnis mit dem Namen „templates“ bereitgestellt werden. Die CSS-Definitionen werden einfach dem vorhandenen Stylesheet hinzugefügt. Sind die Daten bereitgestellt, können Sie diese im nächsten Schritt mit Hilfe von TYPO3 und TemplaVoilà ansprechen.
Content-Element für „2 Spalten“ erstellen
Wechseln Sie im Backend zunächst in das Modul „Filelist“. Dort navigieren Sie zu Ihrem Template-Verzeichnis und klicken mit der Maus auf das Icon links neben dem HTML-Template „zweispalten-50-50.html“. In dem kleinen Aufklappmenü wählen Sie den untersten Punkt „TemplaVoilà“.
5 Antworten
von Uwe Urbann 05.03.2009 (15:17Uhr) 1.
Super Artikel, sehr verständlich erklärt, vielen Dank! War genau das was ich gesucht hatte. Die flexiblen Content Elemente sind ja wirklich eine feine Sache!
Nur ein Hinweis: ich hatte den HTML-Code direkt aus dem Artikel übernommen (konnte den Softlink nicht finden). Und da sind die Anführungszeichen bei den inneren div-Containern nicht die "richtigen", sondern werden (zumindest auf dem Mac) als typographische Anführungszeichen übernommen. Dadurch funktioniert das Mapping nicht und es kommt zu einer Fehlermeldung!
von 11.08.2009 (14:02Uhr) 2.
[...] [...]
von TemplaVoila « Jim Superfly 09.10.2009 (17:13Uhr) 3.
[...] TV-Workshop_Teil2 [...]
von jo.tischer 12.03.2010 (19:37Uhr) 4.
Der artikel ist fein, aber doch schon alt?
Das ist meine DS XML "Bildüberschrift":
1
ROOT
Select the HTML element on the page which you want to be the overall container element for the template.
array
Bilderheadline
input_g
Bilderheadline
input
48
trim
Alt-Tag der Headline
input
1
Alt-Tag der Headline
input
48
trim
Da ist von "Typoscript" oder GIF nichts zu sehen. Weiß jemand warum?
von jo.tischer 12.03.2010 (19:41Uhr) 5.
1
ROOT
Select the HTML element on the page which you want to be the overall container element for the template.
array
Bilderheadline
input_g
Bilderheadline
input
48
trim
Alt-Tag der Headline
input
1
Alt-Tag der Headline
input
48
trim