Suche
Teilen
startseite » forum

Template Formatierungsproblem

  • bullet_one bullet_on...
    Jar Jar Binks
    0 x
    1 Beiträge
    0 Hilfreiche Beiträge
    24. 02. 2013, 13:51

    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:

    [img]https://lh6.googleusercontent.com/-w_vGzf2Zd70/USoSSrxdBcI/AAAAAAAAAXc/2gbIWkVk7ck/s400/Bildschirmfoto%2520vom%25202013-02-24%252012%253A25%253A18.png[/img]

    Und so sieht das Layout ohne Tabelle aus:

    [img]https://lh5.googleusercontent.com/-i_LhvzB2zJY/USoSSuh4CiI/AAAAAAAAAXg/-Y8Bh7tKbjM/s640/Bildschirmfoto%2520vom%25202013-02-24%252012%253A35%253A30.png[/img]

    Die html Vorlage sieht so aus:

    3. <title>Seitentitel</title>
    4. <link rel="stylesheet" type="text/css" href="style.css" />
    5. </head>
    7. <!-- ###DOCUMENT_BODY### START-->
    8.   <div id="Page">
    9.   <div id="TopLayer">###ROOTLINE###</div>
    10.   <Table border="0">  
    11.   <td ><div id="LogoLayer">###LOGO###</div></td><td height= "100px" align = "center" width= "100%" ><div id="headline"> Intranet 2013</div></td>    
    13. <div id="RootlineLayer"></div>
    14.   <div id="Middle">
    15.     <div id="Menu">
    16.       <!-- ###MENU### START-->  
    17.       <a href="index.php">Navigationslink</a>
    18.  
    19.       <!-- ###MENU### END-->
    20.     </div>
    21.       <div id="Content">
    22.       <!-- ###CONTENT### START-->
    23.           <h1>Willkommen</h1>
    24.           <h2>Hier soll der Inhalt später stehen.</h2>
    25.       <p>An dieser Stelle soll später der Inhalt von TYPO3 eingefügt werden.</p>
    26.       <!-- ###CONTENT### END-->
    27.       </div>
    28.   </div>
    29.   <div id="FooterLayer"></div>
    30. </div>
    31. <!-- ###DOCUMENT_BODY### END-->
    32. </body>
    33. </html>

    Das CSS file sieht so aus:

    1. body
    2. { color: black;      
    3.   background-color: rgb(170, 170, 170);     
    4.   font-size: 100.01%;     
    5.   font-family: Helvetica,Arial,sans-serif;     
    6.   margin-left: 0px;    
    7.   text-align: center;     
    8. }    
    9.  
    10.  
    11.  
    12. div#Middle {     
    13.   text-align: left;         
    14.   margin: 0px auto;         
    15.   height: auto;       
    16.   min-height:500px;
    17.  
    18.  
    19. }    
    20.  
    21.  
    22.   div#Page {
    23.     text-align: left;    
    24.     margin: 0 auto;      
    25.     width: 800px;
    26.     padding: 0.5em;
    27.     background-color: rgb(255, 255, 255);
    28.   }
    29.  
    30. html>body div#Page {     
    31.   border-color: gray;        
    32.  
    33. }
    34. div#Menu {     
    35.   font-size: 9pt;     
    36.   float: left;      
    37.   width: 200px;     
    38.   height: 100%;    
    39.   margin-bottom: 0;
    40.   padding: 0;     
    41.   background-color: rgb(255, 255, 255);  
    42.  
    43.  
    44. }    
    45.  
    46.  
    47. div#Menu a
    48. {     display: block;    
    49.  
    50.       padding: 2px;       
    51.       font-weight: bold;
    52.       text-align: center;
    53.       width: 150px;
    54.       position: relative;
    55.       left: -20%;
    56.  
    57. }   
    58.  
    59.  
    60. div#Menu a:link {     
    61.   color: black;
    62.   background-color: #eee;     
    63. }
    64.  
    65. div#Menu a:visited {     
    66.  
    67.   color: #666;
    68.   background-color: #eee;   }   
    69.  
    70. div#Menu a:hover {     
    71.  
    72.   color: black;
    73.   background-color: orange;   }   
    74.  
    75. div#Menu a:active {     
    76.   color: white;
    77.   background-color: gray;   }     
    78.  
    79. .level1 {   
    80.  
    81.   margin-left: 50px;   
    82.   margin-right: 10px;   
    83.   margin-top: 10px;    
    84.    }
    85.  
    86. .level2{   
    87.   margin-left: 20px;   
    88.   margin-right: 100px;   }      
    89.  
    90. div#Content {     
    91.   margin-left: 200px;     
    92.   padding: 0 1em;     
    93.   min-height:500px;
    94.   background-color:rgb(255, 255, 255);
    95.   width:578px;
    96.   border: 5px silver;
    97.   border-left-width:5px;
    98.   border-left-style:solid;
    99.   border-color: rgb(200, 200, 200);
    100.   padding-right:1px;
    101.   text-align:justify;
    102.  
    103. }   
    104.  
    105. div#Content h1 {     
    106.  
    107.   font-size: 1.5em;    
    108.   margin: 0 0 1em;   }   
    109.  
    110.  
    111. div#Content h2 {     
    112.  
    113.   font-size: 1.2em;    
    114.   margin: 0 0 1em;   }   
    115.  
    116. div#Content p {     
    117.  
    118.   font-size:1em;    
    119.   margin: 1em 0;   }    
    120.  
    121. div#TopLayer {     
    122.  
    123.   width: 100%;     
    124.   background-color: rgb(250, 136, 0);        
    125.   height: 20px;   }    
    126.  
    127. div#LogoLayer {     
    128.  
    129.   width: 100%;     
    130.   background-color: rgb(255,255,255);     
    131.   height: 80px;
    132.  
    133. }   
    134.  
    135. div#headline {
    136.  
    137.   width:100%;
    138.   background-color: rgb(255,255,255);
    139.   height: 70px;
    140.   front: Arial;
    141.   font-size:200%;
    142.   margin-top:20px;
    143.  
    144. }
    145.  
    146. div#RootlineLayer {     
    147.  
    148.   width: 100%;     
    149.   background-color: rgb(200, 200, 200);     
    150.   height: 5px;   }    
    151.  
    152. div#FooterLayer {    
    153.  
    154.   width: 100%;    
    155.   background-color: rgb(250, 136, 0);     
    156.   height: 20px;   }

    Und mein Typoscript Setup sieht so aus:

    1. #Erzeugen eines Pageobjekt in "page"
    2. page = PAGE
    3.  
    4. #Zuweisen des Sytlesheet Files 
    5. page.stylesheet = fileadmin/templates/styles.css
    6.  
    7. #Typ der Seite ist 0, hiermit können verschiedene 
    8. #Typen ausgewählt werden z.b. für eine Druckansicht
    9. page.typeNum = 0
    10.  
    11. page.10 = TEMPLATE
    12.  
    13. #Template ist eine Datei 
    14. page.10.template = FILE
    15.  
    16. #Der Dateiname ist index.html
    17. page.10.template.file = fileadmin/templates/index.html
    18.  
    19. #Den Subpart DOCUMENT BODY bearbeiten
    20. page.10.workOnSubpart = DOCUMENT_BODY
    21.  
    22. #Innerhalb von Documtent Body weitere Subparts bearbeiten
    23. page.10.subparts {
    24.     #Der Subpart CONTENT wird mit 
    25.         #der Ausgabe von styles.content.get ersetzt
    26.     #dies entspricht der mittleren Contentspalte 
    27.     CONTENT < styles.content.get
    28.  
    29.     #Der Subpart MENU ist ein hierachisches Menü 
    30.     MENU = HMENU 
    31.  
    32.     #Die 1. Ebene des Menüs ist ein Textmenü
    33.        MENU.1 = TMENU
    34.        MENU.1 {
    35.         NO = 1
    36.         #Die Einträge werden umschlossen von 
    37.                 #<div class="level1"> </div> 
    38.            NO.allWrap = <div class="level1"> | </div> 
    39.        } 
    40.  
    41.     #Die 2. Ebene ist ebenfalls ein Textmenü
    42.        MENU.2 = TMENU
    43.        MENU.2 {
    44.         NO = 1
    45.         #Die Einträge werden umschlossen 
    46.                 #von <div class="level2"> </div> 
    47.            NO.allWrap = <div class="level2"> | </div> 
    48.        } 
    49. }
    50.  
    51. #An dieser Stelle werden die Marker 
    52. #im Template (page.10) bearbeitet
    53.  
    54. page.10.marks{
    55.     #Der Marker LOGO ist ein Bild
    56.     LOGO = IMAGE
    57.  
    58.     #Die Datei für das Bild ist die 
    59.         #Datei logo.gif
    60.     LOGO.file = fileadmin/templates/logo.gif    
    61.  
    62.  
    63.     #Der Marker Rootline ist ein hierachisches Menü
    64.     ROOTLINE = HMENU
    65.     ROOTLINE.special=rootline
    66.     ROOTLINE.special.range= 0 | -1
    67.     ROOTLINE.1=TMENU
    68.  
    69.     #Die einzelnen Einträge werden durch Slashes getrennt
    70.     ROOTLINE.1.NO.allWrap= |   /   |*| |   /   |*| |
    71. }

    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.

  • 1
  • calien calien
    T3PO
    0 x
    9 Beiträge
    0 Hilfreiche Beiträge
    25. 02. 2013, 09:33

    Erstmal fehlt in deinem Template das schließende </table>, bzw. fehlt einfach nur der /.

    Da nun deine Tabelle für den Content laut HTML-Code noch offen ist, zählt somit die Formatierung der ersten Tabelle und die Positionierung erfolgt links am Rand und nicht 200px margin-left, wie dein Content eigentlich sein sollte.

    Zweitens mal ist die Tabelle im Template komplett sinnlos, das kannst du alles besser über CSS steuern, auch die Position der Überschrift. Zumal du ja einen div-Container in eine Tabelle packst.

    Am TS kann ich jetzt erstmal keinen Fehler finden (Bin aber auch noch Anfänger)

  • 1
Präsentiert von