---
title: "bilder werden nicht richtig ins template integriert"
url: "https://www.typo3.net/d/52082-bilder-werden-nicht-richtig-ins-template-integriert"
source: "typo3.net"
tags: ["Allgemein","Frage","HTML & CSS"]
created: "2006-10-22"
last_reply: "2006-11-08"
replies: 3
solved: false
page: 1
pages: 1
lang: "de"
---

# bilder werden nicht richtig ins template integriert

Allgemein · 3 Antworten · gestartet 2006-10-22

## Eröffnungsbeitrag

**cavalorn** · 2006-10-22 · [Beitrag #1](https://www.typo3.net/d/52082-bilder-werden-nicht-richtig-ins-template-integriert/1)

Hallo Leute,

hbe neulich mit TYPO3 angefangen und bin jetzt auf ein kleines Problemchen gestoßen.

Ich versuche meine Designvorlage ins Template zu integrieren, irgendwie werden die Bilder aber nicht dargestellt. Wie ihr sehen könnt, sind die Bilder ins css integriert.

wer kann helfen?

so siehts im typo-script aus:

```typoscript
page = PAGE
page.stylesheet = style.css
page.10 = TEMPLATE
page.10 {
   template = FILE
   template.file = index*.html


   workOnSubpart = DOCUMENT_BODY
   
   
   
   subparts.INHALTSBEREICH < styles.content.get
   subparts.INHALTSBEREICH.wrap = <div style="padding=10px"> | </div>

   subparts.MENU = HMENU
   subparts.MENU.1 = TMENU
   subparts.MENU.1 {
        NO.allWrap = <li> < | </li>
        
}

}
```

hier mal das css:

```html
body { 
	margin:0px 0; 
	padding:0; 
	font: 74% Arial, Sans-Serif; 
	color:#ccc;  
	background: #303B41; background-image: url(../images/bg.jpg); background-repeat:repeat-y;
	background-attachment:fixed;
	line-height: 1.4em; 
}


.content { 
	background: transparent url(..images/mainbg.jpg) repeat-y center;
	color: #ccc; 
	margin-left:170px;margin-right:auto;
	padding: 0; 
	width: 800px;
}

.img {
	padding: 0 8px 8px 0;
	float: left;
}

.img2 {
	padding: 0 0 3px 3px;
	float: right;
}



/* HEADER 
---------------------------------------------------------------------------------------------------------------------------------------------------
*/
#top {
	padding: 0;
	margin: 0;
	background: transparent url(../images/top.jpg) no-repeat top;
	height: 44px; 
}

#top .padding { 
	float: right;
	color: #808080;
	padding: 20px 25px 0 0;
	font-size: 90%;
}

#top a { color: #E0F5FF; }


#header { 
	margin: 0; 
	width: 771px; 
	background: #C7D0D5 url(../images/header.jpg) no-repeat center top;  
	height: 250px; 
	margin-left:15px;
	color: #FFF; 
}

#header .f_search { float: right; padding: 70px 50px 0 0; }
#header .title {	padding: 45px 0 0 50px; }
#header h1 {
		font-family: Arial, Verdana, Helvetica, sans-serif;
		font-size: 22px; font-weight: bold;
		margin: 0;
		padding: 0; 
}

#header h2 {
		font-family: Arial, Verdana, Helvetica, sans-serif;
		font-size: 12px; 
		background-image: none;
		color: #075181;
		margin: 0;
		padding: 0 0 0 2px;
}


/* SUBHEADER 
---------------------------------------------------------------------------------------------------------------------------------------------------*/
#subheader { 
	background: #075181 repeat-y center;
	width: 770px;
	height: 35px;
	color: #FFF;
	margin-left: 15px;
	
}
#subheader .padding { padding: 10px 15px 10px 15px; }
#subheader h2 { color: #FEAB06; }
#subheader a {color: #FECF5F; }



/* NAVIGATION
---------------------------------------------------------------------------------------------------------------------------------------------------*/
.nav { text-align: left; color: 	#7D8085; padding: 20px 0 0 0px; width: 200px; }
.nav li { 
	margin: 5px 0 5px 0px; 
	padding: 0px 0 0 0px; 
	border-bottom: 1px dotted #ccc; 
	
	list-style: none;
}
.nav li a { color: #546078; text-decoration: none;  padding: 5px 0 0 0px; display: block; margin-bottom: 2px;}
.nav li a:hover { color: #075181; text-decoration: none; background: #E5F6FF; display: block; margin-bottom: 2px;}


/* MAIN
---------------------------------------------------------------------------------------------------------------------------------------------------*/
#main { background: #FFF; width: 760px; margin: 0 20px 0 20px; color: #808080; }  
#main .right_side { float: right;
	padding:0px 0 0 10px; margin:0;
	background-color: #FFF;
	width: 210px; 
}

#main .right_side .hitems { margin: 0; 	padding: 0; }
#main .right_side .hitems ul { 
	margin: 5px 0 5px 0; 
	padding : 0; 
	color: #a90000;
	list-style-image: url(../images/arrow.gif);
}
	
#main .right_side .hitems li { 
	margin: 0 0 2px 20px;
	padding: 0 0 0 0px;
	color: #555;
	 
}

#main .left_side { float: left; width: 500px; background: #FFF; padding:15px 15px 0 20px; margin:0; }
#main h3 {  font: 85% Arial, Sans-Serif; margin: 0 0 10px 0px; padding: 0; color: #5f5f5f; background: inherit; 
			border-bottom: 1px solid #036CB4;
}

#main .box  {	background: #efefef; padding: 5px; border: 1px solid #ccc;}

#main .right_side ul { 
	margin: 5px 0 5px 0; 
	padding : 0; 
	list-style : none; 
	border-bottom: 0px solid #eee; 
	list-style-type: square;
	color: #a90000;
}
	
#main .right_side li { 
	margin: 0 0 2px 15px;
	padding: 0 0 0 0px;
	color: #555;
}

#main .right_side  .padding {
margin: 0 0 20px 15px;
	padding: 0 0 0 0px;
	color: #555;
}


/* FOOTER
---------------------------------------------------------------------------------------------------------------------------------------------------*/
#footer { 
	clear:both;
	height: 43px;
	color:#ccc;  
	background: transparent url(ii/images/footer.jpg) top no-repeat; 
	font-size:90%; 
	padding: 0; 
	text-align:center; 
}

#footer .padding { padding: 10px 0px 0px 0px; }
#footer .right { 
	float:right; 
	clear:right; 
	text-align:right; 
}

#footer a { color: #E0F5FF; }

/*  Top Menu */
#menu {
	background: #075181 url(../images/menu.jpg) no-repeat center bottom;
	width: 760px;
	height: 35px;
	margin: 0;
	padding: 0;
}

#menu ul { margin:0; list-style:none; padding: 5px 0 0 20px; }
#menu a, #nav strong, #nav span { float:left; display:block; color:#fff; padding: 5px; text-decoration:none;  }
#menu a { float:none; }
#menu li { float:left; color: #FFF; background: #075181; margin:0; padding:0 0 0 0px; }
#menu a:hover { text-decoration:underline;}  
#menu .padding { padding: 5px 0 0 10px; font-weight: bold; }




/* ---------------------------------------------------------------------------------------------------------------------------------------------------*/

input.search { width: 150px; border: 1px solid #075181; color: #666; }
input.submit { 
	background: none; 
	color: #075181;
	font: bold 1.1em Arial, Verdana, Helvetica, sans-serif; 
	border: 0;
}

input.search:hover {	background: #FFFFF4; }

ul { margin-left: 0; padding-left: 5px; list-style : square; }
li { 	margin: 0 0 2px 15px; padding: 0 0 0 0px;	color: #555; }
.sub  {margin: 0 0 2px 30px; padding: 0 0 0 0px;  color: #888; }

p { margin: 0 0 5px 0; padding: 0; color: #808080; background: inherit; }
a { color: #075181; background: inherit; text-decoration:none; }
a:hover { background: inherit; text-decoration:underline; }

h1 { 
	padding:0; 
	margin:0; 
	color: #FFF; 
	background: inherit;
	font: bold 1.8em Arial, Sans-Serif; 
	letter-spacing: -1px;
}

h1 a { color: #FFF; background: inherit; }

h2 { 
	background: url(../images/h.gif) no-repeat left;
	color:#075181;
	font-size:140%; 
	font-weight:bold; 
	margin: 5px 0 5px 0px; 
	padding:0 0 0 30px; 
}

h2 a { background: #FFF; color: #075181; }
h2 a:hover { background: #FFF; color: #68ADD5; text-decoration:none;  }

fieldset {	border: 1px solid #075181; }
textarea.text { 
	height: 150px; 
	width: 90%; 
	border: 1px solid #A90000; 
	background: #FFF; 
	color: #354D5F;
}

textarea.text:hover { 
	border: 1px solid #A70000; 
	background: #FFFFF4; 
	color: #000;
}

input.field { 
	border: 1px solid #075181; 
	background-color: #FFFFFF; 
	width: 283px; 
	color: #000;
}

input.field:hover { 
	border: 1px solid #68ADD5; 
	background: #FFFFF4; 
	color: #000;
}

input.text { 
    border: 1px solid #A70000; 
	margin: 0; 
	width: 150px;
	background: inherit;
	color: #000; 
	padding: 4px;
	
}


input.text:hover { 
	border: 0px solid #68ADD5; 
}

.date { 
	color: #808080; 
	background: #FFFFFF;
	text-align: right; 
	margin: 4px 0 5px 0; 
	padding: 0.4em 0 0 0; 
	border-top: 1px solid #eee;
}

.comments { 
	padding: 10px 10px 8px 10px; 
	margin: 0 0 7px 0; 
	background: #f8f8f8; 
	color: #000;
}

.commentsbox { 
	padding: 8px 0 10px 10px; 
	margin: 0 0 10px 0; 
	background: #f4f4f4; 
	color: #000;
}

.error {
	color: #990000;
	background-color: #FFF0F0;
	padding: 7px;
	margin-top: 5px;
	margin-bottom: 10px;
	border: 1px dashed #990000;
}
.error h2 {
	color: #990000;
	background: inherit;
}

.success {
	color: #000000;
	background: #F5FBE1;
	padding: 7px;
	margin-top: 5px;
	margin-bottom: 5px;
	border: 1px dashed #7BA813;
}
.success h2 {
	color: #7BA813;
	background: inherit;
}
```

schönen dank schon jetzt an euch für eure antworten :)

viele grüße aus thüringen
thomas

## Antworten

### [#2](https://www.typo3.net/d/52082-bilder-werden-nicht-richtig-ins-template-integriert/2) · toyde · 2006-10-22

Willkommen im Forum.

a) Wenn CSS das Problem ist, dann bist Du mit einer CSS-Dokumentation besser aufgehoben als in einem TYPO3-Forum  ;) .
b)

> ..(ii/images/footer.jpg)..

Wenn die Pfade nicht stimmen, kann's natürlich ned gut gehen. Wie gesagt, CSS ist das Thema - nicht TYPO3 an sich.
(nächstes Mal bitte Thread leserlich formatieren. Hab das Nötigste umgestellt)

schönen Sonntag

### [#3](https://www.typo3.net/d/52082-bilder-werden-nicht-richtig-ins-template-integriert/3) · cavalorn · 2006-10-23

erstmal vielen dank für deine antwort. ich werde natürlich versuchen, mich (z.B. in bezug auf formatierung) den foren-gepflogenheiten anzupassen...

ein paar links uf die bilder in der css-datei waren fehlerhaft. habe ich ausgebessert und nochmal als ressource hochgeladen. er zeigt mir aber die bilder immer noch nicht an.

da liegt das problem irgendwie beim typo3. in meiner templatevorlage werden die bilder einwandfrei ausgegeben, typo3 liest sie eben nur nicht ein...

vielleicht ist der punkt hier noch wichtig: ich habe folgendes ordnersystem angelegt:

index.html
\fileadmin
\fileadmin\template
\fileadmin\template\css
\fileadmin\template\images

ist vielleicht an der stelle irgendwie der fehler zu suchen?

im TS habe ich jetzt auch noch das * bei "style*.css" gesetzt, sodass er immer die aktuellste css-datei verwenden sollte

vielen dank schonmal für eine antwort und eine hoffentlich geruhsame woche
thomas

### [#4](https://www.typo3.net/d/52082-bilder-werden-nicht-richtig-ins-template-integriert/4) · karlchen · 2006-11-08

falls das Problem noch nicht gelöst sein sollte, poste doch mal den Quelltext deiner Internetseite wo das Bild auftauchen sollte

vielleicht sieht man da mehr, momentan tippe ich noch auf falsche Verlinkung, entweder durch typo oder durch die CSS

---

Quelle: „bilder werden nicht richtig ins template integriert“, typo3.net, https://www.typo3.net/d/52082-bilder-werden-nicht-richtig-ins-template-integriert
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.