nicht angemeldet
Danke für deinen Tipp, ich selbst habe es breits mehrmals versucht mit CSS und DIVs umzusetzen, jedoch scheitere ich daran die 3 Zeilen unter dem Header gleichlang zu bekommen.
Du scheiterst ansich daran, zu Design und Inhalt voneinander zu trennen und denkst in Tabellen.
Versuch dich bitte an diesem HTML - damit müsstest du alles an Elementen haben, die du zur Formatierung benötigst.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Template</title>
<link type="text/css" rel="stylesheet" href="css/screen.css" media="screen, projection" />
</head>
<body>
<div id="container">
<div id="header">
<h1><a href="/">Nightfall Events</a></h1>
</div>
<div id="content">
<h2>Überschrift</h2>
<div id="col0">
<p>foo bar baz qux</p>
</div>
<div id="media"><img src="foo.png" alt="foo" /></div>
</div>
<div id="menu">
<h2>Navigation</h2>
<ul>
<li>Menüpunkt</li>
<li>Menüpunkt</li>
<li>Menüpunkt</li>
</ul>
</div>
<div id="footer">
footer :)
</div>
</div>
</body>
</html>
html und body bekommen die Hintergrundbilder die bei Bedarf links und rechts im Nirvana verschwinden, wenn der Viewport kleiner wird
#container stellt deinen eigentliche Seite dar und ist etwa 850 Pixel breit (vergiss das 1440 vorerst). Per automatischem Margin zentriert und mit position: relative ausgestattet
#header ist der Seitenkopf - ansich nur der verzierende Teil. Er ist absolut positioniert und ist etwa 480x200 pixel groß (so groß wie der schriftzug) - eigentlich könnte man auf das element verzichten und direkt dem h1-Element die ID verpassen, aber so ist man flexibler, wenn das Layout mal etwas komplizierter wird. Alternativ: den oberen Teil des Pergaments reinpacken.
#h1 mit seinem Link ist der eigentliche Schriftzug (und ggf. einem link auf die Startseite)
#menu sollte klar sein - dein Menü. Natürlich fehlen noch entsprechende IDs für die Menüpunkte, aber das kannst du vorerst ignorieren, das ist nur eine Kleinigkeit im Menücode von TYPO3 das hineinzugenerieren. absolut hinpositionieren und als rechteck zum testen belassen. Die Einzelnen Menüpunkte folgen später.
#media wird dein Bild im Seitenkopf beinhalten und entspricht dem media-Feld der pages-Tabelle - ebenalls absolut positioniert, muss aber hinter das Menü.
#content ist der Container für den Inhaltsbereich - er bekommt den sich wiederholenden Hintergrund (das Pergament) - als normales Block-Element im Textfluss
#col0 entspricht der Inhaltsspalte 0 (normal) aus tt_content (styles.content.get bzw. colpos=0) ebenso
#footer wird dein seitenende sein (der untere Abschluss des Pergaments) und nochmal normal im fluss.
Arbeite von außen nach innen und gib' den Elementen bunte Farben (nicht die Tatsächlichen) aber die richtigen Abmessungen damit du das Verhalten des Layouts in verschiedenen Browsern testen kannst. Marker für TYPO solltest du ebenfalls außen vorlassen - aktuell ist das Template wichtig, ignoriere dass du TYPO3 verwendest (lediglich bei der Benennung der Elemente solltest du dir meinen Vorschlag zu gemüte führen, es erleichtert die arbeit später, da die Elemente etwa so heißen wie die später verwendeten TYPO3-"Dinge".