Typo3 Anfänger benötigt Hilfe!

skinner13 · 28.06.2010

Hallo liebe Community,

ich bin gerade dabei Typo3 zu erlernen. Dabei stoße ich schon zum Anfang auf große Probleme beim umsetzen dieses simplen Layouts.

Mein html Code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <link rel="stylesheet" type="text/css" href="main.css">
  <title>Site1</title>
  </head>
  <body>
  
  <div id="header">
    <div id="header_inner">HEADER
    </div>
  </div>
  
  <div id="menu">
    <div id="menu_inner">MENU
    </div>
  </div>
  
  <div id="content">
    <div id="content_inner">CONTENT
    </div>
  </div>
  
  </body>
</html>

Mein CSS Code:

Code:

/* CSS Document */
body {
  background-color: #D2D4D1;
  margin: 0% 0% 0% 0%;
}

#header{height: 178px;
        background-image: url(images/header.png);
        background-repeat: repeat;
}
#menu{  float: left;
        width: 17.5%;
        height: 82.8%;
        background-image: url(images/menu.png);
        background-repeat: repeat;
}
#content{float: left;
        left: 17.5%;
        width:82.5%;
        height:82.8%;
        background-image:url(images/content.png);
        background-repeat: repeat;
}

#content_inner{padding:15px;}
#menu_inner{padding:15px;}
#header_inner{padding:15px;}
#content_inner a{
font-size: 100%;
}

Mein TYPO3 Skript:

Code:

# Configuring the Auto-Parser:
plugin.tx_automaketemplate_pi1 {
  # Read the template  file:
  content = FILE
  content.file = fileadmin/templates/example/site1.html
  # Here we define which elements in the HTML that
  # should be  wrapped in subpart-comments:
  elements {
     BODY.all = 1
    BODY.all.subpartMarker = DOCUMENT_BODY
    HEAD.all = 1
    HEAD.all.subpartMarker = DOCUMENT_HEADER
    HEAD.rmTagSections = title
    DIV.all = 1
  }    
  # Prefix all relative paths with this value:
  relPathPrefix = fileadmin/templates/example/
}
# 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  ###content### subpart with some example content: 
    subparts.content < temp.content
    subparts.content < styles.content.get
    subparts.content.wrap =  <a> | </a> 
    subparts.header = TEXT
    subparts.header.value = HEADER
    subparts.menu = TEXT
    subparts.menu.value = MENU   
  }

# Default PAGE object:
  page = PAGE
  typeNum = 0
  page{
    headerData = TEXT
    headerData{
      10 = TEXT
      10.value = <link rel="stylesheet" type="text/css" href="fileadmin/templates/example/main.css" /> 
    }
    10 < temp.mainTemplate
}

und raus kommt am ende das hier.

Der Header Bereich wird richtig angezeigt. Der Menubereich ist auch an der richtigen Stelle. Im Content Bereich wird der ersetzte Text übernommen, jedoch aber nicht das float: left aus der CSS. Der neue HTML Code sieht nun so aus:

Code:

<!DOCTYPE html
	PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- 
	This website is powered by TYPO3 - inspiring people to share!
	TYPO3 is a free open source Content Management Framework initially created by Kasper Skaarhoj and licensed under GNU/GPL.
	TYPO3 is copyright 1998-2009 of Kasper Skaarhoj. Extensions are copyright of their respective owners.
	Information and contribution at http://typo3.com/ and http://typo3.org/
-->



<title>Startseite</title>
<meta name="generator" content="TYPO3 4.3 CMS" />

<link rel="stylesheet" type="text/css" href="" media="all" />



<script src="" type="text/javascript"></script>


<link rel="stylesheet" type="text/css" href="" />
</head>
<body>

  
  <div id="header">HEADER</div>
  
  <div id="menu">MENU</div>
  
  <div id="content"><a>
	<!--  CONTENT ELEMENT, uid:49/textpic [begin] -->
		<div id="c49" class="csc-default" >
		<!--  Image block: [begin] -->
			<div class="csc-textpic-text">
		<!--  Text: [begin] -->
			<p class="bodytext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et e<span style="color: rgb(0, 0, 0);">a rebum. Stet clita kasd gu<span class="detail">b<span style="color: rgb(0, 0, 0);">ergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et do</span></span><span class="detail"><span style="color: rgb(0, 0, 0);">lore magna aliquyam erat, sed diam</span> vo<span style="color: rgb(0, 0, 0);">luptua. At vero eos et<b><span class="important"></span></b> et justo duo dolores et ea</span> </span></span><span style="color: rgb(0, 0, 0);"><span class="detail"></span></span>rebum<span style="color: rgb(0, 0, 0);"><span style="color: rgb(0, 0, 0);"><span class="detail">. </span></span></span>Stet clita kasd gubergre<span style="color: rgb(0, 0, 0);"><span style="color: rgb(0, 0, 0);"><span style="color: rgb(0, 0, 0);"><span class="detail">n</span></span></span></span>, no sea taki<span style="color: rgb(0, 0, 0);">ma</span>ta sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed  diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.  Stet clita kasd gubergren, no sea takimata sanctus <span class="important" style="color: rgb(0, 0, 0);">es</span><span class="important" style="color: rgb(0, 0, 0);">t Lorem</span> ipsum dolor  sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed  diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam  erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et  ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem  ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, seddiam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.  Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor  sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed  diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam  erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et  ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem  ipsum dolor sit amet.Lorem ipsum dolor sit amet, consete olores et  ea rebum. Stet clita kasd gubergren, no sea takimata sanctus  est Lorem  ipsum dolor sit amet.Lorem ipsum dolor sit amet, consete</p>
		<!--  Text: [end] -->
			</div>
		<!--  Image block: [end] -->
			</div>
	<!--  CONTENT ELEMENT, uid:49/textpic [end] -->
		</a></div>

</body>
</html>

Kann mir einer bitte weiterhelfen?

Vielen Dank schon einmal im vorraus.

bom86 · 28.06.2010

AW: Typo3 Anfänger benötigt Hilfe!

kann dir jetzt keine hilfe anbieten in dem sinne aber probiers doch mal mit templavoila damit arbeite ich auch und es ist sehr simpel

mitstreiter · 28.06.2010

AW: Typo3 Anfänger benötigt Hilfe!

werden wohl die prozentangaben sein im css. mach doch ne feste breite und höhe auf auto? float: left nicht zu vergessen.