Hallo NG,
ich mache gerade meine ersten Gehversuche mit css.
Habe auch meine HTML Datei umgestellt von Tabellenform auf CSS, siehe unten
ohne Typo3 klappts prima, nur wenn ich die Datei uebernehme, dann stehen auf einmal alle Elemente untereinander...
Ich habe die Kurve zu Typo3 noch nicht.
Wahrscheinlich muss ich mein Template auch umbauen?
<html>
<head>
<!--###HEADER_CODE###-->
</head>
<style type="text/css">
<!--
body { }
#boxblue { position:absolute; top:0px; left:000px; width:194px; height:612px; z-index:1; }
#boxlogo { position:absolute; top:0px; left:0px; width:194px; height:60px; z-index:2; }
#boxmenu { position:absolute; top:65px; left:0px; width:194px; height:500px; z-index:2; }
#boxbild { position:absolute; top:0px; left:194px; width:810px; height:306px; z-index:3; }
#boxinhalt { position:absolute; top:326px; left:214px; width:770px; height:274px; z-index:4; }
-->
</style>
<body bgcolor="#FFFFFF" text="#000000">
<!--###DOKUMENT###-->
<div id="boxblue" style="background:#ADE3FF; border:solid 2px orange;"></div>
<div id="boxlogo" style="border:solid 2px orange;">###LOGO###</div>
<div id="boxmenu" style="border:solid 2px orange;">###MENU###<br>###SPRACHE###</div>
<div id="boxbild" style="border:solid 2px orange;">###BILD###</div>
<div id="boxinhalt" style="border:solid 2px orange;">###INHALT###</div>
</div>
<!--###DOKUMENT###-->
</body>
</html>
Hi!
Vermutlich liegt das Problem darin begründet, dass Du den Kopfbereich der Seite in Deinem Template angibst, stell Dein Template mal folgendermassen um:
<!--###DOKUMENT###-->
<div id="boxblue" style="background:#ADE3FF; border:solid 2px orange;"></div>
<div id="boxlogo">###LOGO###</div>
<div id="boxmenu">###MENU###<br>###SPRACHE###</div>
<div id="boxbild">###BILD###</div>
<div id="boxinhalt">###INHALT###</div>
</div>
<!--###DOKUMENT###-->
Das CSS lagerst Du in eine externe Datei aus, z.B. /fileadmin/styles.css, hab gleich mal den Code aus den Styles-bereich mit hinein gezogen 😉
body { }
#boxblue { border:solid 2px orange;position:absolute; top:0px; left:000px; width:194px; height:612px; z-index:1; }
#boxlogo { border:solid 2px orange;position:absolute; top:0px; left:0px; width:194px; height:60px; z-index:2; }
#boxmenu { border:solid 2px orange;position:absolute; top:65px; left:0px; width:194px; height:500px; z-index:2; }
#boxbild { border:solid 2px orange;position:absolute; top:0px; left:194px; width:810px; height:306px; z-index:3; }
#boxinhalt { border:solid 2px orange;position:absolute; top:326px; left:214px; width:770px; height:274px; z-index:4; }
Diese CSS-Datei bindest Du folgendermassen in Dein TS-Template ein:
page = PAGE
page.stylesheet = fileadmin/styles.css
Um den bisherigen Marker ###HEADER_CODE### zu ersetzen folgende Konstruktion im TS-Template:
page.headerData.5 = TEXT
page.headerData.5.value ( WAS AUCH IMMER HIER HIN SOLL
}
CU
maxhb