Typo3 zerstört Template...

F.Eppmann · 14. November 2004 21:06

Hallo liebe Typo3-Gemeinde,

ich habe vor kurzer Zeit Typo3 kennengelernt und muss erstmal sagen, dass ich total begeistert bin, was da alles hintersteckt. Von früher bin ich noch Dinge wir PHPNuke und PHPKit gewöhnt und dachte da schon, sowas wäre das Nonplusultra. Ich hab mich jetzt schon ein wenig eingearbeitet und auch schon meine ersten Templates erstellt. (Testseite zu bewundern unter http://root-clan.volldiegosse.de)
Als nächstes Projekt habe ich mir das Erstellen eines Text-Menüs mit Grafiken als Hintergrund, also kein richtiges GMENU, vorgenommen.

Bin auch schon relativ weit gekommen, also das Menü selber funktioniert.

Hier das Template selber:
http://www.volldiegosse.de/t3/fileadmin/template3/main/index.htm

Und hier, so wies hinter her nach "Bearbeitung durch Typo3 aussieht:
http://www1.volldiegosse.de/

Einige haben vielleicht schon mein Problem gesehen (gerade die Opera-User):

Im Template wird die Menüspalte von oben bis unten angezeigt und hat keinen Abstand zum Ende der Seite. Ausserdem hat der Text in der Box das richtige Padding und auch die Box selber hat den richtigen Abstand zum Rand usw. (So solls sein 🙂 )

Nachdem Typo3 sich "der Sache angenommen hat" stimmt irgendwie garnichts mehr. Die Menü-Hintergrund-Grafik wird nurnoch so weit angezeigt, wie "Inhalt" da ist und padding-top unn padding-bottom wird auch einfach ignoriert.

So, und jetzt meine Frage: Was macht Typo3 da. Auf was muss ich achten, wenn ich meine Templates mache? Warum treten diese Fehler auf?

Hier nochmal die ganzen Quellcodes:

index.htm:

<html>
<head>
<title>Test-Design</title>
<link rel="stylesheet" href="style.css">

</head>

<body>

  
<table width="80%" border="0" align="center" height="100%">
  <tr>
    <td id="menu_1">
	
	
	<table class="menu_1_level1_no_table" width="165" height="39" border="0"><tr><td class="menu_1_level1_no_text"> Menu Level 1 </td></tr></table>
	<table class="menu_1_level2_no_table" width="165" height="39" border="0"><tr><td class="menu_1_level2_no_text"> Menu Level 2 </td></tr></table>
		
    <td class="right_column">
<div class="ro">
<div class="lo">
<div class="ru">
<div class="lu">
<div class="box">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diamnonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis no</p>
</div>
<br>
</div>
</div>
</div>
</div>
</div>
	</td>
  </tr>
</table>

</body>
</html>

style.css:

body {
padding: 0px 0px 0px 0px;
margin-top: 0px;
position:relative;
height: 100%;
scrolling:auto;
}

h1 {

font-size:14px;

}

.right_column {

padding-left: 30px;
padding-top: 60px;

}

#menu_1{
padding-left:5px;
background-image:url(img/menu_bg.gif);
width: 170px;
vertical-align:top;
padding-top: 40px;
}

.content{

font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#666666;
padding: 20px 20px 20px 20px;

}

.box{
   width: 85%;
   height: 300px;
   overflow: auto;    
    scrollbar-face-color: #FFFFFF;
    scrollbar-arrow-color: #000000;
    scrollbar-track-color: #FFFFFF;
    scrollbar-shadow-color: #000000;
	scrolling:auto;
	
}





.menu_1_level1_no_table{
background-image: url(img/menu_level1_no.gif);
}

.menu_1_level1_act_table{
background-image: url(img/menu_level1_act.gif);
}

.menu_1_level1_no_text A{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
text-align:center;
font-weight:300;
color:#666666;
padding-left: 13px;

}

.menu_1_level1_no_text A:hover{
text-decoration: underline;

}


.menu_1_level2_no_table{
background-image: url(img/menu_level2_no.gif);
}

.menu_1_level2_act_table{
background-image: url(img/menu_level2_act.gif);
}

.menu_1_level2_no_text A{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
text-align:center;
font-weight:300;
color:#AAAAAA;
padding-left: 40px;

}

/*Zeugs fuer die runden Ecken: */

.ro { 
background:url("img/runde_ecken/roundedbox_ro.gif") top right no-repeat; 
margin:0;
padding:0;
} 

.lo { 
background:url("img/runde_ecken/roundedbox_lo.gif") top left no-repeat; 
margin:0;
padding:0;
} 

.ru {
background:url("img/runde_ecken/roundedbox_ru.gif") bottom right no-repeat;
margin:0;
padding:0;
}

.lu {
background:url("img/runde_ecken/roundedbox_lu.gif") bottom left no-repeat;
margin:0;
padding:0; 
}

Typo-Script:

# Template Auto-Parser konfigurieren
plugin.tx_automaketemplate_pi1 {
  # Template einlesen
  content = FILE
  content.file = fileadmin/template3/main/index.htm
  relPathPrefix = fileadmin/template3/main/

  # Die Elemente markieren
  elements {
    BODY.all = 1
    BODY.all.subpartMarker = DOCUMENT_BODY

    HEAD.all = 1
    HEAD.all.subpartMarker = DOCUMENT_HEADER
    HEAD.rmTagSections = title,script
    HEAD.rmSingleTags = meta


   TD.id.menu_1 = 1
   DIV.class.content = 1

  }
}

# Menu 1 cObject
temp.menu_1 = HMENU

# First level menu-object, textual
temp.menu_1.1 = TMENU
temp.menu_1.1 {
  # Normal state properties
  NO.allWrap = <table class="menu_1_level1_no_table" width="165" height="39" border="0"><tr><td class="menu_1_level1_no_text"> | </td></tr></table>
  NO.stdWrap.htmlSpecialChars = 1
  # Enable active state and set properties:
  ACT = 1
  ACT.allWrap = <table class="menu_1_level1_act_table" width="165" height="39" border="0"><tr><td class="menu_1_level1_no_text"> | </td></tr></table>
  ACT.stdWrap.htmlSpecialChars = 1
}

# Second level menu-object, textual
temp.menu_1.2 = TMENU
temp.menu_1.2 {
  # Normal state properties
  NO.allWrap = <table class="menu_1_level2_no_table" width="165" height="39" border="0"><tr><td class="menu_1_level2_no_text"> | </td></tr></table>
  NO.stdWrap.htmlSpecialChars = 1
  # Enable active state and set properties:
  ACT = 1
  ACT.allWrap = <table class="menu_1_level2_act_table" width="165" height="39" border="0"><tr><td class="menu_1_level2_no_text"> | </td></tr></table>
  ACT.stdWrap.htmlSpecialChars = 1
}

# Main TEMPLATE cObject for the BODY
temp.mainTemplate = TEMPLATE
temp.mainTemplate {
  # Feeding the content from the Auto-parser to the TEMPLATE cObject:
  template =< plugin.tx_automaketemplate_pi1

  # Select only the content between the <body>-tags
  workOnSubpart = DOCUMENT_BODY

  # Substitute the ###menu_1### subpart the dynamic content
  subparts.menu_1 < temp.menu_1

  # Substitute the ###content### subpart
  subparts.content < styles.content.get

  # Substitute the ###contentRight### subpart
  subparts.contentRight < styles.content.getRight
}

# Main TEMPLATE cObject for the HEAD
temp.headTemplate = TEMPLATE
temp.headTemplate {
  # Feeding the content from the Auto-parser to the TEMPLATE cObject:
  template =< plugin.tx_automaketemplate_pi1

  # Select only the content between the <head>-tags
  workOnSubpart = DOCUMENT_HEADER
}

# Default PAGE object:
page = PAGE
page.typeNum = 0
page.config.doctype = <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
page.bodyTagCObject =< plugin.tx_automaketemplate_pi1
page.bodyTagCObject.getBodyTag = 1
#page.config.disableAllHeaderCode = 1

page.10 < temp.mainTemplate
page.headerData.10 < temp.headTemplate

Dass das jetzt alles noch ein bisschen komisch und unsauber aussieht, kommt daher, weil ich unheimlich viel rumprobiert habe, um das Problem zu lösen - ohne Erfolg.

So, schonmal vielen Dank, dass ihr euch das alles bis hier durchgelesen habt. 🙂 Ich hoffe, dass mir jemand helfen kann und bedanke mich schonmal im Voraus.

Ich bin für jeden Tip dankbar.

MfG Felix

johanness · 14. November 2004 21:16

Ich hab mir jetzt nur die zwei inks angesehen. aber bei mir sieht das alles korrekt aus 8-)

jenses · 14. November 2004 21:39

page.config.doctype = <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Wenn du den Doctype in deine HTML-Vorlage einfügst,
wird auch dort die Menüspalte beschnitten.
Nicht immer die Schuld auf Typo3 schieben. 😉

jenses

F.Eppmann · 14. November 2004 22:34

Uuuuuaaaaaaarrghhhh....

entschuldigt bitte, dass ich so lautstark meinen Frust rauslasse, aber ihr kennt das sicherlich, wenn ihr schon halb am verzweifeln seid und dann rausfindet, dass es an einer winzigen Zeile lag, die ihr zuvor garnicht beachtet habt. Da kann man echt ausrasten. #paralyzed#

Vielen Vielen Dank. Jetzt geht alles so wie ich will.

MfG Felix.