Hallo Leute,
ich hoffe ihr könnt mir helfen. Ich hab mir eine Vorlage in Typo3 erstellt,
wenn ich nun hingehe und eine neue Tabelle mit htmlarea auf dieser Vorlage erzeuge, zerstört es mir die Formatierung(Normaler Text steht dort wo er stehen soll).
Das ganze sieht dann so aus:
Bild: lh6.googleusercontent.com/…/Bildschirmfoto%20vom%202013-02-24%2012%3A25%3A18.…
Und so sieht das Layout ohne Tabelle aus:
Bild: lh5.googleusercontent.com/…/Bildschirmfoto%20vom%202013-02-24%2012%3A35%3A30.…
Die html Vorlage sieht so aus:
<html>
<head>
<title>Seitentitel</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<!-- ###DOCUMENT_BODY### START-->
<div id="Page">
<div id="TopLayer">###ROOTLINE###</div>
<Table border="0">
<td ><div id="LogoLayer">###LOGO###</div></td><td height= "100px" align = "center" width= "100%" ><div id="headline"> Intranet 2013</div></td>
<Table>
<div id="RootlineLayer"></div>
<div id="Middle">
<div id="Menu">
<!-- ###MENU### START-->
<a href="index.php">Navigationslink</a>
<!-- ###MENU### END-->
</div>
<div id="Content">
<!-- ###CONTENT### START-->
<h1>Willkommen</h1>
<h2>Hier soll der Inhalt später stehen.</h2>
<p>An dieser Stelle soll später der Inhalt von TYPO3 eingefügt werden.</p>
<!-- ###CONTENT### END-->
</div>
</div>
<div id="FooterLayer"></div>
</div>
<!-- ###DOCUMENT_BODY### END-->
</body>
</html>
Das CSS file sieht so aus:
body
{ color: black;
background-color: rgb(170, 170, 170);
font-size: 100.01%;
font-family: Helvetica,Arial,sans-serif;
margin-left: 0px;
text-align: center;
}
div#Middle {
text-align: left;
margin: 0px auto;
height: auto;
min-height:500px;
}
div#Page {
text-align: left;
margin: 0 auto;
width: 800px;
padding: 0.5em;
background-color: rgb(255, 255, 255);
}
html>body div#Page {
border-color: gray;
}
div#Menu {
font-size: 9pt;
float: left;
width: 200px;
height: 100%;
margin-bottom: 0;
padding: 0;
background-color: rgb(255, 255, 255);
}
div#Menu a
{ display: block;
padding: 2px;
font-weight: bold;
text-align: center;
width: 150px;
position: relative;
left: -20%;
}
div#Menu a:link {
color: black;
background-color: #eee;
}
div#Menu a:visited {
color: #666;
background-color: #eee; }
div#Menu a:hover {
color: black;
background-color: orange; }
div#Menu a:active {
color: white;
background-color: gray; }
.level1 {
margin-left: 50px;
margin-right: 10px;
margin-top: 10px;
}
.level2{
margin-left: 20px;
margin-right: 100px; }
div#Content {
margin-left: 200px;
padding: 0 1em;
min-height:500px;
background-color:rgb(255, 255, 255);
width:578px;
border: 5px silver;
border-left-width:5px;
border-left-style:solid;
border-color: rgb(200, 200, 200);
padding-right:1px;
text-align:justify;
}
div#Content h1 {
font-size: 1.5em;
margin: 0 0 1em; }
div#Content h2 {
font-size: 1.2em;
margin: 0 0 1em; }
div#Content p {
font-size:1em;
margin: 1em 0; }
div#TopLayer {
width: 100%;
background-color: rgb(250, 136, 0);
height: 20px; }
div#LogoLayer {
width: 100%;
background-color: rgb(255,255,255);
height: 80px;
}
div#headline {
width:100%;
background-color: rgb(255,255,255);
height: 70px;
front: Arial;
font-size:200%;
margin-top:20px;
}
div#RootlineLayer {
width: 100%;
background-color: rgb(200, 200, 200);
height: 5px; }
div#FooterLayer {
width: 100%;
background-color: rgb(250, 136, 0);
height: 20px; }
Und mein Typoscript Setup sieht so aus:
#Erzeugen eines Pageobjekt in "page"
page = PAGE
#Zuweisen des Sytlesheet Files
page.stylesheet = fileadmin/templates/styles.css
#Typ der Seite ist 0, hiermit können verschiedene
#Typen ausgewählt werden z.b. für eine Druckansicht
page.typeNum = 0
page.10 = TEMPLATE
#Template ist eine Datei
page.10.template = FILE
#Der Dateiname ist index.html
page.10.template.file = fileadmin/templates/index.html
#Den Subpart DOCUMENT BODY bearbeiten
page.10.workOnSubpart = DOCUMENT_BODY
#Innerhalb von Documtent Body weitere Subparts bearbeiten
page.10.subparts {
#Der Subpart CONTENT wird mit
#der Ausgabe von styles.content.get ersetzt
#dies entspricht der mittleren Contentspalte
CONTENT < styles.content.get
#Der Subpart MENU ist ein hierachisches Menü
MENU = HMENU
#Die 1. Ebene des Menüs ist ein Textmenü
MENU.1 = TMENU
MENU.1 {
NO = 1
#Die Einträge werden umschlossen von
#<div class="level1"> </div>
NO.allWrap = <div class="level1"> | </div>
}
#Die 2. Ebene ist ebenfalls ein Textmenü
MENU.2 = TMENU
MENU.2 {
NO = 1
#Die Einträge werden umschlossen
#von <div class="level2"> </div>
NO.allWrap = <div class="level2"> | </div>
}
}
#An dieser Stelle werden die Marker
#im Template (page.10) bearbeitet
page.10.marks{
#Der Marker LOGO ist ein Bild
LOGO = IMAGE
#Die Datei für das Bild ist die
#Datei logo.gif
LOGO.file = fileadmin/templates/logo.gif
#Der Marker Rootline ist ein hierachisches Menü
ROOTLINE = HMENU
ROOTLINE.special=rootline
ROOTLINE.special.range= 0 | -1
ROOTLINE.1=TMENU
#Die einzelnen Einträge werden durch Slashes getrennt
ROOTLINE.1.NO.allWrap= | / |*| | / |*| |
}
So und jetzt meine Frage:
Was muss ich tun das die Tabelle zentral im content Feld steht und sich nicht unterhalb dem Menü anordnet.
Über eine Lösung des Problems wäre ich sehr dankbar.