---
title: "Hilfe beim einbindes des Contents."
url: "https://www.typo3.net/d/102333-hilfe-beim-einbindes-des-contents"
source: "typo3.net"
tags: ["TYPO3","TypoScript","Frage","Inhaltselemente"]
created: "2010-11-12"
last_reply: "2010-11-16"
replies: 19
solved: false
page: 1
pages: 1
lang: "de"
---

# Hilfe beim einbindes des Contents.

TYPO3 › TypoScript · 19 Antworten · gestartet 2010-11-12

## Eröffnungsbeitrag

**lost** · 2010-11-12 · [Beitrag #1](https://www.typo3.net/d/102333-hilfe-beim-einbindes-des-contents/1)

Liebe Typo3.net Community,

ich bin noch sehr neu im bereich Typoscript und Typo3. Mein jetziges wissen habe ich aus Video Tutorials und einen Typo3 einsteiger Buch erlangt. Nun habe ich Folgendes Problem:

-Egal wie ich es versuche, ich bekomme keinen Inhalt angezeigt. Benutze eine HTML Vorlage in der ich Marker verwende. Hier mal mein Typo3 Setup und meine HTML Vorlage:

```typoscript
page = PAGE

page.includeCSS {
    file10 = fileadmin/template/css/main_screen.css
    file10.media = screen
}

    page.10 = TEMPLATE
    page.10 {
        template = FILE
        template.file = fileadmin/template/index.html
        workOnSubpart = DOCUMENT_BODY
        subparts {
        INHALT < styles.content.get
        }

        marks.NAVIGATION = HMENU
        marks.NAVIGATION {
               wrap = <ul> | </ul>
               1 = TMENU
               1.NO.linkWrap = <li> | </li>
               1.ACT.linkWrap = <li><b> | </b></li>
        }

        
        marks.FOOTER = TEXT
        marks.FOOTER.value = Impressum   |   Drucken

}
```

```html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Urbanrechtsanwälte</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css"
          href="fileadmin/template/css/main_screen.css" media="screen">
  </head>
  <body><!-- ###DOCUMENT_BODY### -->
      <div id="wrap">
          <div id="header_1">
              <img src="fileadmin/template/img/koeln_urban_rechtsanwaelte.png" />
          </div>
          <div id="header_2">
              <img src="fileadmin/template/img/header_images_01.jpg"/>
          </div>
          <div id="navigation"><a name="navigation" id="navigation"></a>
              ###NAVIGATION###
          </div>
          <div id="content">
              ###INHALT###
          </div>
          <div id="footer">
              <div id="footer_text">
              ###FOOTER###
              </div>
          </div>
      </div>
      <!-- ###DOCUMENT_BODY### -->
  </body>
</html>
```

Was mache ich denn nun falsch? Warum wird mein Inhalt nicht angezeigt?

Vielen herzlichen Dank für eure Hilfe

MFG
Aless

## Antworten

### [#2](https://www.typo3.net/d/102333-hilfe-beim-einbindes-des-contents/2) · igorshmigor · 2010-11-12

Ich könnte mir vorstellen, dass du das statische Template für CSS styled content noch nicht eingefügt hast. Im Modul Web > Template auf deiner obersten Seite auf *"Vollständigen Template-Datensatz bearbeiten"* bzw. *"Edit whole template record"* (oder so) klicken, dann im Reiter *"Enthält"* unter *"Statische Templates einschließen (aus Erweiterungen):"* CSS Styled Content auswählen.

### [#3](https://www.typo3.net/d/102333-hilfe-beim-einbindes-des-contents/3) · lost · 2010-11-12

Oh gott, genau das war es!

Vielen Dank :)

Fals ich noch eine Frage stellen dürfte:

-Ich bekomme es auch nicht hin das meine Navigation einen Hintergrund bekommt... Und cih vermute das es an dem integrieren in Typo3 liegt, da mein Code Editor es korrekt wieder gibt in der Vorschau... Auf der Live ansicht ist jedoch nur eine Hintergrundfarbe...

```css
* {margin: 0; padding: 0;}

body {margin-top: 40px; font-family: Verdana,Arial,Helvetica,sans-serif;  font-size: 11px}

div#wrap {width: 940px; margin: auto; }

div#header_1 {float: right; padding: 20px 0px;}

div#navigation {border: 1px solid #c9cdce; margin: 10px 0px; height: 22px; overflow: hidden; }

div#navigation ul { text-align: center;  height: 22px; list-style-type: none; background: #aaa url(/../img/background_menu.png) repeat-x scroll left top;}

div#navigation li { margin: 0px; padding: 0px 40px; display: inline; height: 100%; width: 188px;}

div#navigation ul li a { display: inline;  }

div#content {padding: 10px;}

div#footer {border-top: 1px solid #c9cdce; }

div#footer_text {float: right; padding: 5px; color: #858585 }
```

Woran könnte dies noch liegen?

Noch mals vielen Dank!

MFG
Aless

### [#4](https://www.typo3.net/d/102333-hilfe-beim-einbindes-des-contents/4) · igorshmigor · 2010-11-12

Vielleicht sind die Pfade auf TYPO3 jetzt anders? Wo liegt denn die CSS-Datei und wo liegt das Bild? Am einfachsten ist es, wenn du mit absoluten Pfaden arbeitest. Sagen wir das Bild liegt in fileadmin/img, dann schreibst du im CSS */fileadmin/img/background_menu.png*.

### [#5](https://www.typo3.net/d/102333-hilfe-beim-einbindes-des-contents/5) · lost · 2010-11-12

Ich schreibe dir hier mal meine Ordner-Struktur:

Fileadmin
|
|--"_temp_"
|
|--"template"|--img (hier befindet sich die background_menu.png
|            |--css (main_screen.css
|            |--index.html
|            |--general-setup.ts (setup datei)
|
|--"user_upload"

### [#6](https://www.typo3.net/d/102333-hilfe-beim-einbindes-des-contents/6) · igorshmigor · 2010-11-12

dann schreib in deinem CSS

```css
background:url(/fileadmin/template/img/background_menu.png)
```

oder

```css
background:url(../img/background_menu.png)
```

### [#7](https://www.typo3.net/d/102333-hilfe-beim-einbindes-des-contents/7) · etux · 2010-11-12

> **lost schrieb:**
>
> -Ich bekomme es auch nicht hin das meine Navigation einen Hintergrund bekommt...
> background: #aaa url(/../img/background_menu.png) repeat-x scroll left top;

background: #aaa url(../../img/background_menu.png) repeat-x scroll left top;
Zwei Punkte vor dem ersten Slash.

### [#8](https://www.typo3.net/d/102333-hilfe-beim-einbindes-des-contents/8) · igorshmigor · 2010-11-12

Ich hatte das so verstanden, dass der Baum nur falsch formatiert da steht. img ist doch bestimmt auf der gleichen Ebene wie css. Dann ist es nicht ../../img/background_menu.png sondern ../img/background_menu.png

### [#9](https://www.typo3.net/d/102333-hilfe-beim-einbindes-des-contents/9) · lost · 2010-11-12

Danke leute :)

Fals es euch nichts ausmacht mir noch zu schreiben was ich jetzt noch alles ändern muss um einen Hover einzurichten, so das der background verschwindet und ein schwarzer hintergrund mit der schrift der nav in weiss.. :)
So das auch beim Activen zustand der background schwarz bleibt..

So wie hier: <http://urbanrechtsanwaltskanzlei.springerf3.de/>

Ihr seid echt klasse, so schnelle Antworten :)

Danke,

Aless

P.S: Das mit den links und rechts Border krieg ich auch nciht so ganz hin.. also so das sie auch wie auf der Homepage oben aussehn...

### [#10](https://www.typo3.net/d/102333-hilfe-beim-einbindes-des-contents/10) · etux · 2010-11-12

Und warum postest Du nicht einen Link zur Deinen Site?

Wenn bei der ersten Ebene die schwarze Hintergrundfarbe erscheinen soll, auch wenn Du mit der Maus schon über die zweite Ebene bist, muss Du sie den Li-Elementen der ersten Ebene zu ordnen. So in etwa:
li:hover { background: #000; }

Bei der aktuellen Seite kannst Du sie dem b-Element zu ordnen. Du hast ja nur bei ACT ein b-Element um den Link. b muss aber als  block-Element ohne Margins formatiert werden, um das gesamte LI zu füllen.
Oder Du gibst dem LI der aktuellen Seite eine Klasse und formatierst sie entsprechend.

### [#11](https://www.typo3.net/d/102333-hilfe-beim-einbindes-des-contents/11) · lost · 2010-11-12

Naja, mein Chef (ich bin seid 2 Wochen bei ihm Praktikant) hat mich beauftragt diese Homepage nach zu bauen.. Und von daher ist das ganze nur auf meinem Rechner hier und so kann ich sie euch nicht live zeigen, aber ich mache jetzt mal ein paar fotos.

[Bild: picfront.org/…/bild_01.JPG](http://picfront.de/d/7Vmv)

[Bild: picfront.org/…/bild_02.JPG](http://picfront.de/d/7Vmw)

[Bild: picfront.org/…/bild_03.JPG](http://picfront.de/d/7Vmx)

Würdet ihr mir dabei noch helfen? Hoffe das erklärt das ganze besser...

Tausend Dank!

Aless

### [#12](https://www.typo3.net/d/102333-hilfe-beim-einbindes-des-contents/12) · etux · 2010-11-12

> **lost schrieb:**
>
> Und von daher ist das ganze nur auf meinem Rechner hier und so kann ich sie euch nicht live zeigen, aber ich mache jetzt mal ein paar fotos.

Ein Test-Case könntest Du aber schon schnell zusammen bauen und hoch laden.
Oder zumindest im Browser ausgegebenen Quellcode plus die CSS-Datei posten, was ja schon fast ein Test-Case wäre.

Aus der CSS-Datei von oben kommt der rechte Border nicht.

Die Hintergrund- und Schriftfarben muss Du über li:hover der ersten Ebene definieren. Das Element was die Hintergrundfarbe trägt, muss ein Block-Element sein und keine Margins haben. Bzw. sein Eltern-Element keine Paddings.
Steht aber alles schon in meinem Vorpost.

### [#13](https://www.typo3.net/d/102333-hilfe-beim-einbindes-des-contents/13) · lost · 2010-11-15

Tut mir echt leid nur ich weiss noch nicht einmal was ein Test Case ist, bzw. was genau ich hochladen sollte..

Der im Browser ausgegebene Quellcode lautet wie folgt:

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

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- 
	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-2010 of Kasper Skaarhoj. Extensions are copyright of their respective owners.
	Information and contribution at http://typo3.com/ and http://typo3.org/
-->



<title>Home</title>
<meta name="generator" content="TYPO3 4.4 CMS">

<link rel="stylesheet" type="text/css" href="typo3temp/stylesheet_670d0f71b2.css?1289557450" media="all">
<link rel="stylesheet" type="text/css" href="fileadmin/template/css/main_screen.css?1289809326" media="screen">


<script src="typo3temp/javascript_93077bb238.js?1289480786" type="text/javascript"></script>



</head>
<body>

      <div id="wrap">
          <div id="header_1">
              <img src="fileadmin/template/img/koeln_urban_rechtsanwaelte.png" />
          </div>

          <div id="header_2">
              <img src="fileadmin/template/img/header_images_01.jpg"/>
          </div>
          <div id="navigation"><a name="navigation" id="navigation"></a>
              <ul><li> <a href="index.php?id=2" onfocus="blurLink(this);"  >Kanzlei</a> </li><li> <a href="index.php?id=3" onfocus="blurLink(this);"  >Tätigkeitsbereiche</a> </li><li> <a href="index.php?id=4" onfocus="blurLink(this);"  >Rechtsanwältin</a> </li><li> <a href="index.php?id=5" onfocus="blurLink(this);"  >Veröffentlichungen</a> </li><li> <a href="index.php?id=6" onfocus="blurLink(this);"  >Kontakt</a> </li></ul>

          </div>
          <div id="content">
              
	<!--  CONTENT ELEMENT, uid:2/text [begin] -->
		<div id="c2" class="csc-frame csc-frame-frame1" >
		<!--  Header: [begin] -->
			<div class="csc-header csc-header-n1"><h4 class="csc-firstHeader">Willkommen, lorem ipsum dolor sit amet, consectetuer adipiscing elit. </h4></div>
		<!--  Header: [end] -->
			
		<!--  Text: [begin] -->

			<p class="bodytext">&nbsp;</p>
<p class="bodytext">Aenean massa. Cum sociis natoque penatibus et magnis dis parturient  montes, nascetur ridiculus mus. 
</p>
<p class="bodytext">&nbsp;</p>
<p class="bodytext">Donec quam felis, ultricies nec,  pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.  
</p>
<p class="bodytext">&nbsp;</p>
<p class="bodytext">Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.  Venenatis vitae, justo. Donec pede justo, fringilla vel, aliquet nec,  vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis  vitae, justo ultricies nec, pellentesque eu, pretium quis, sem.</p>
		<!--  Text: [end] -->
			</div>
	<!--  CONTENT ELEMENT, uid:2/text [end] -->
		
          </div>

          <div id="footer">
              <div id="footer_text">
              Impressum &nbsp&nbsp|&nbsp&nbsp Drucken
              </div>
          </div>
      </div>



</body>
</html>
```

```css
* {margin: 0; padding: 0;}

body {margin-top: 40px; font-family: Verdana,Arial,Helvetica,sans-serif;  font-size: 11px}

div#wrap {width: 940px; margin: auto; }

div#header_1 {float: right; padding: 20px 0px;}

div#navigation {border: 1px solid #c9cdce; margin: 10px 0px; height: 22px; overflow: hidden; }

div#navigation ul { text-align: center;  height: 22px; list-style-type: none; background:url(../img/background_menu.png) repeat-x scroll left top; padding-top: 5px;}

div#navigation li {  margin: 0px; padding: 0px 53px; display: inline; height: 100%; width: 188px; border-right: 1px solid;}

div#navigation li:hover { background: #000; color: #fff ; }

div#navigation li a:hover {background: #000; color: #fff;}

div#navigation li b {display: block; margin: 0px;}

div#navigation ul li a { display: inline; text-decoration: none; color: #000000 }

div#content {padding: 40px;}

div#footer {border-top: 1px solid #c9cdce; }

div#footer_text {float: right; padding: 5px; color: #858585 }

label {display: block; padding-right: 5px; width: 200px; float: left; text-align: right; font-weight: bold;}
```

Solltet ich mich nicht verständlich genug ausdrücken, dann entschuldige ich mich.. Bin nunmal noch ganz am anfang mit Typo3, HTML und CSS.. Allerdings hängt meine Zukunft davon ab das was ich hier mache, also muss ich wohl mein bestes geben..

Wenn ihr nicht wisst wie ihr mir dabei helfen könnt, hätte ich noch 2 andare sachen die ich bis heute abend versuchen muss hinzukriegen:

1. Dynamischer Header, so das ich auf jeder Unterseite einen andaren Header angezeigt bekomme.
2. Im Footer, der Text "Impressum | Drucken" sollte eigentlich kein Text sein sondern ein Menü..

Vielen, vielen Dank für eure Hilfe!

MFG

Aless

### [#14](https://www.typo3.net/d/102333-hilfe-beim-einbindes-des-contents/14) · etux · 2010-11-15

Sorge erst mal für einen validen Quellcode und vernünftigen DOCTYPE.
Die LI-Elementen mit „display: inline“ zu formatieren, geht auch. Leichter wäre es, wenn Du Float nimmst. Floaten kennst Du Alles, bis auf die Links. Sie bekommen ein „display: block;“ und sorgen für die Abstände (Paddings).
Außer (beispielsweise) bei den Links, sind keine weitere  Breiten-Angaben nötig. Höhen-Angaben – noch weniger. Sie beschränken auch die Flexibilität Deines Layouts. Die Schriftgrößen-Angabe in Pixel genau so (Internet Explorer).
Wofür Du das b-Element in den Links brauchst, weiß ich nicht. Um den aktuellen Link zu bezeichnen wäre es besser, wenn Du ihn mit einem strong-Element ersetzest.

marks.NAVIGATION = HMENU
marks.NAVIGATION {
	wrap = <ul> | </ul>
	1 = TMENU
	1.NO.allWrap = <li>|</li>
	1.CUR.allWrap = <li>|</li>
	1.CUR.doNotLinkIt = 1
	1.CUR.linkWrap = <strong>|</strong>
}

Border:
Du kannst dem UL einen Border für „top“, „right“ und „bottom“ zuordnen und den LI-Elementen einen für „left“.

Wenn die Bilder in den Header nur der Dekoration dienen (Logos ausgeschlossen), definiere sie lieber als Hintergrund-Bilder. Dabei solltest Du auf leeren Elementen verzichten.

Verzichte auf „overflow: hidden“ um die Floats einzuschließen. Du hast dafür geeignete Elementen, die ein „clear“ bekommen können.

### [#15](https://www.typo3.net/d/102333-hilfe-beim-einbindes-des-contents/15) · etux · 2010-11-15

Hier auf die Schnelle ein „Test-Case“: #giggle#

Die Paddings muss Du Dir noch anpassen.
Aber betrachte das Ganze eher als ein Vorschlag. Denn ich kenne Deine Bilder nicht und nicht wirklich weiß, was Du erreichen willst.
Die IEs habe ich bei der CSS-Formatierung erst mal nicht berücksichtigt.

```html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="de" xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Case - lost (typo3.net)</title>
<style type="text/css">
* {margin: 0; padding: 0;}
body { margin-top: 40px; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: small; }
div#wrap { width: 940px; margin: auto; font-size: .9em; }
div#header_1 { float: right; padding: 20px 0px; }
/* div#header_2 {  } warum keine Formatierung */
div#navigation { clear: right; float: left; padding-top: 5px; background:url(../img/background_menu.png) repeat-x scroll left top; }
div#navigation ul { float: left; text-align: center; list-style-type: none; border: 1px solid #c9cdce; border-left: none;  }
div#navigation li { float: left; border-left: 1px solid #c9cdce; }
/* div#navigation li:hover { } unnötig bei nur einer Menü-Ebene */
div#navigation a { display: block; width: 186px; padding: 5px 0; overflow: hidden; text-decoration: none; color: #000000 }
div#navigation a:hover { color: #fff; background: #000; }
div#navigation strong { display: block; width: 186px; padding: 5px 0; overflow: hidden; color: #fff; background: #000; }
div#content { clear:left; padding: 40px;}
div#footer {border-top: 1px solid #c9cdce; }
div#footer_text {float: right; padding: 5px; color: #858585 }
label {display: block; padding-right: 5px; width: 200px; float: left; text-align: right; font-weight: bold;}
</style>
<!--[if lte IE 7]><style type="text/css">
	/* Extra CSS-Regel für die IEs kleiner IE 8 */
</style><![endif]-->
</head>
<body>
<div id="wrap">
	<div id="header_1">
		<img src="fileadmin/template/img/koeln_urban_rechtsanwaelte.png" alt="" />
	</div>
	<div id="header_2">
		<img src="fileadmin/template/img/header_images_01.jpg" alt="" />
	</div>
	<div id="navigation">
		<ul>
			<li><a href="index.php?id=2" onfocus="blurLink(this);"  >Kanzlei</a></li>
			<li><strong >Tätigkeitsbereiche</strong></li>
			<li><a href="index.php?id=4" onfocus="blurLink(this);"  >Rechtsanwältin</a></li>
			<li><a href="index.php?id=5" onfocus="blurLink(this);"  >Veröffentlichungen</a></li>
			<li><a href="index.php?id=6" onfocus="blurLink(this);"  >Kontakt</a></li>
		</ul>
	</div>
	<div id="content">
		<div id="c2" class="csc-frame csc-frame-frame1" >
			<div class="csc-header csc-header-n1">
				<h4 class="csc-firstHeader">Willkommen, lorem ipsum dolor sit amet, consectetuer adipiscing elit. </h4>
			</div>
			<p class="bodytext">&nbsp;</p>
			<p class="bodytext">Aenean massa. Cum sociis natoque penatibus et magnis dis parturient  montes, nascetur ridiculus mus.</p>
			<p class="bodytext">&nbsp;</p>
			<p class="bodytext">Donec quam felis, ultricies nec,  pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
			<p class="bodytext">&nbsp;</p>
			<p class="bodytext">Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.  Venenatis vitae, justo. Donec pede justo, fringilla vel, aliquet nec,  vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis  vitae, justo ultricies nec, pellentesque eu, pretium quis, sem.</p>
		</div>
	</div>
	<div id="footer">
		<div id="footer_text">Impressum &nbsp&nbsp|&nbsp&nbsp Drucken</div>
	</div>
</div>
</body>
</html>
```

### [#16](https://www.typo3.net/d/102333-hilfe-beim-einbindes-des-contents/16) · lost · 2010-11-15

Deine CSS änderungen haben mir sehr geholfen, allerdings weiß ich nicht was ich mit dem HTML Code anfangen soll, da Typo3 denn HTML Code mittels TypoScript ja generiert..

Aber ich denke ich kann das jetzt erstmal so stehen lassen, und mein Chef erklärt mir das Restliche später.

Ich danke euch allen für eure Hilfe :)

Liebe Grüße,

Aless

### [#17](https://www.typo3.net/d/102333-hilfe-beim-einbindes-des-contents/17) · etux · 2010-11-15

Hast Du denn keinen Zugriff auf die TypoScript-Setup Datei?

### [#18](https://www.typo3.net/d/102333-hilfe-beim-einbindes-des-contents/18) · lost · 2010-11-15

Ja schon, nur du hast mir eine HTML Vorlage geschrieben. Nun müsste ich ja wissen wie man diese Haar genau in Typoscript umsetzt, da ich keine reine HTML Vorlage verwenden darf, sondern die Aufgabe darin liegt so gut wie alles was möglich ist in Typoscript zu schreiben...

Aber ist nicht weiter tragisch, bin ja noch kein Profi udn mein Chef weiß das ;P

Aber trozdem danke für deine große Mühe mir zur helfen, echt klasse von dir und auch von denn andaren!!!

Liebe Grüße

### [#19](https://www.typo3.net/d/102333-hilfe-beim-einbindes-des-contents/19) · etux · 2010-11-15

> **lost schrieb:**
>
> du hast mir eine HTML Vorlage geschrieben.

Diese sogenannte Vorlage besteht einzig und alleine aus Deinem Quellcode (HTML und CSS aus Deinem Beitrag oben). Ein Test-Case mit dem im Browser ausgegebenen Quellcode eben. Natürlich mit etwas geänderten CSS. ;)

### [#20](https://www.typo3.net/d/102333-hilfe-beim-einbindes-des-contents/20) · lost · 2010-11-16

Achso, sorry.. Falsch verstanden :D

Ich danke dir nochmals für deine Hilfe!

Vllt. kennst du ja noch eine Lösung für mein andares Problem:
[/d/102398-ext-fl-header-slide-probleme](https://www.typo3.net/d/102398-ext-fl-header-slide-probleme)

Liebe Grüße :)

Aless

---

Quelle: „Hilfe beim einbindes des Contents.“, typo3.net, https://www.typo3.net/d/102333-hilfe-beim-einbindes-des-contents
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.
