CSS Problem beim Integrieren von Desgin-Vorlage

Hallo Leute!
Ich hab ein Problem.
Ich erstelle gerade eine Website und benutz hier für eine Designvorlage.
Die Vorlage funktioniert ausserhalb von Typo3 wunderbar ... sobald ich Anfange es in Typo3 aufrufe,funktioniert die CSS-Formatierung gar nicht mehr oder sieht komisch aus.

Ich hab schon Folgendes versucht....
- CSS-Pfadangabe angepasst (dann geht alles, bis ich in das Template "workOnSubpart" schreibe - dann CSS alles weg 😢 )
- CSS in Typo3Script inkludiert (geht, sieht nur komisch aus)

Habt ihr eine Idee was das sein könnte?

page = PAGE
page.10 = TEMPLATE
page.includeCSS {
file10 = uploads/tf/andreas01.css
file10.media = screen
}
page.10 {
 	template = FILE
 	template.file = uploads/tf/template.html
 	workOnSubpart = DOCUMENT_BODY
 	
 	
 	#Navigation
 	subparts.NAVI_L = HMENU
 	subparts.NAVI_L{
  	special = directory
 	special.value = 3
    	entryLevel = 1
  	wrap = <div id="avmenu"> | </div>
  	1 = TMENU
  	1 {
    		wrap = <ul><li> | </li></ul>
    		NO = 1
    		#NO.wrapItemmAndSub = <li> | </li>
    		#ACT = 1
    		#ACT < .NO
    		#ACT.ATagParams = id=current
  		}
  	}
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="_your description goes here_" />
<meta name="keywords" content="_your,keywords,goes,here_" />
<meta name="author" content="_your name goes here_  / Original design: Andreas Viklund - http://andreasviklund.com/" />
<!-- <link rel="stylesheet" type="text/css" href="uploads/tf/andreas01.css" media="screen" title="andreas01 (screen)" />  **CSS-Geschichte**-->
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
<title>andreas01</title>
</head>

<body><div id="wrap">
<!-- ###DOCUMENT_BODY### start-->
<div id="header">
<h1>andreas01</h1>

<p><strong>"I can see you fly. You are an angel with wings, high above the ground!"</strong><br />(traditional haiku poem)</p>
</div>

<img id="frontphoto" src="front.jpg" width="760" height="175" alt="" />
<!-- ###NAVI_L### start-->
<div id="avmenu">
<h2 class="hide">Menu:</h2>
<ul>
<li><a href="#">Welcome!</a></li>
<li><a href="#">Current events</a></li>
<li><a href="#">Downloads</a></li>

<li><a href="#">Art gallery</a></li>
<li><a href="#">Collections</a></li>
<li><a href="#">Litterature</a></li>
<li><a href="#">Newsletter</a></li>
</ul>
<!-- ###NAVI_L### stop-->

<div class="announce">
<h3>Latest news:</h3>
<p><strong>June 25, 2005:</strong><br />
New design and layout finished and uploaded to OSWD. Since it is my first contribution to this site, it has been given the title "andreas01".</p>

<p class="textright"><a href="index.html">Read more...</a></p>
</div>

</div>

<div id="extras">
<h3>More info:</h3>
<p>This is the third column, which can be used in many different ways. For example, it can be used for comments, site news, external links, ads or for more navigation links. It is all up to you!</p>

<h3>Links:</h3>
<p>- <a href="http://andreasviklund.com/">My website</a><br />

- <a href="http://oswd.org/">OSWD.org</a><br />
- <a href="http://validator.w3.org/check/referer">Valid XHTML</a><br />
- <a href="http://jigsaw.w3.org/css-validator/check/referer">Valid CSS</a></p>

<p class="small">Version: 1.0<br />(July 25, 2005)</p>
</div>

<div id="content">
<h2>Welcome to andreas01!</h2>

<p>This is a very simple (but also very useful) standard web layout: a fixed-width 3-column page with header and footer. There are thousands of variations of this layout, and this is no perfect solution. But it should be a great starting layout that you can customize in many ways and easily give a unique touch to. The layout is made of valid XHTML 1.0 Strict and CSS only, and it has no tables. If you remove all CSS, the page still works great in text mode (I've tested it on my old mobile phone, and it works like a charm).</p>

<p><img src="test.jpg" height="100" width="125" class="left" alt="" />The layout features one big image (front.jpg) which you can easily replace with your own header. The default image shows a snowy street in Porjus (northern Sweden), where I come from. The haiku can easily be replaced with an ad banner. There are also CSS classes for aligning text paragraphs and images.</p>

<p>This layout also has a print stylesheet, that you can customize in any way you want to. Per default, navigation menus and images are removed, and only the main content text is printed. <a href="index2.html">Look here</a> for an example of how the print layout looks, or print this page to see it in reality.</p>

<h3>The menubar</h3><p>The main navigation menu is an unsorted list, where each list item has been styled to be a button. There are lots of ways to style lists for navigation, but I've kept things simple for this layout. Adding "that little extra" is up to you! <img src="test.jpg" class="right" height="100" width="125"  alt="" /></p>

<p>If you like this layout and would like to use it in any way, you are free to do so. This is an <a href="http://oswd.org">open source web design</a>, and all I ask for is that you leave the "Design by Andreas Viklund" link in the footer of the site. If you would like to remove that line, or if you would like professional help with anything related to this layout (such as custom design, branding, scripting or programming), please contact me <a href="http://oswd.org/email.phtml?user=Andreas">through OSWD.org</a> or through my website for more information.</p>

<p>Good luck with your new website!</p>
</div>

<div id="footer">
Copyright &copy; 2005 (_your name_). Design by <a href="http://andreasviklund.com">Andreas Viklund</a>.
</div>

</div>
<!-- ###DOCUMENT_BODY### stop-->
</body>
</html>

ich gehe mal davon aus, dass das CSS nicht richtig eingebunden wird, da evtl. der Pfad nicht paßt.

Erscheint denn die CSS-Einbindung im Quell-Code der Ausgabeseite?
Falls, ja ruf diesen Pfad mal direkt im Browser auf. Findet er dort auch das CSS?

Ich lade es immer per FTP hoch und linke es auf fileadmin/css/meincss.css
aber Du scheinst das T3 intern zu machen, da es sich im uploads folder befindet.

Gruß
Michael

hey ho!

	<link rel="stylesheet" type="text/css" href="uploads/tf/andreas01.css" media="screen" />
	<title>News</title>
	<meta name="generator" content="TYPO3 4.0 CMS" />
	<script type="text/javascript" src="typo3temp/javascript_757c080409.js"></script>

das ist das HTML-Code auf der Ausgabeseite wo das CSS angesprochen wird.
Er tut ja auch irgendwie war - aber nicht das was er soll.

Sieht im Moment so aus.
Bild: img263.imageshack.us/…/typo3xz8.th.jpg

Hallihallo,

was genau soll es denn tun bzw. wie aussehen? Geht es darum, dass da oben ein Bild fehlt (in dem Screenshot, mein ich)? Bindest Du das Bild denn via CSS ein? Liegt das Bild am richtigen Ort? Oder soll die Seite generell ganz anders aussehen, das CSS wird also gar nicht angesprochen?

Dein Code (das HTML) sagt zumindest aus, dass Du via TypoScript erfolgreich den Pfad für das CSS in Dein HTML-Dok schreibst. 😉 Wenn nun das CSS auch dort liegt, wo es angegeben ist, word es eigentlich auch verwendet werden. Insofern kann es eigentlich nur sein, dass es eben NICHT da liegt, wo Du es Typo3 sagst...

Ich lade CSS-Dateien auch direkt in den filedamin (über FTP oder direkt online über "Dateiliste/Fileadmin/upload") und binde es dann (unter page) so ein:

seite = PAGE
seite {
   (...)
   stylesheet = fileadmin/dateiname.css
   (...)
}

LG, Sarah

#angry#

er benutze ja die CSS-Datei ... aber irgendwie nicht richtig ... ganz komisch !!

ich hab es jetzt mit TemplaVoila gemacht und es geht so wie ich es mir vor gestellt habe. *genialfind*

Problem is gelöst.
Danke an alle! :p :p

Wenn es um das Bild geht... der Ausgangspunkt einer CSS-Definition ist immer der Ordner in welchem sich das CSS befindet... BSP:

Bild:
fileadmin/template/main/images/layout/mainbox_bg.gif

CSS:
fileadmin/template/sub/res/layout.css

Im CSS als Hintergrundbild eingebunden würde dies nun folgendermaßen aussehen:
background: url(../../main/images/layout/mainbox_bg.gif);

2 Ordner zurück und von dort dann die Rootline entlang bis zum Bild...

MFG Proximo

PS: Verwende XHTML dann ist alles wesentlich einfacher, vorallem wenn du dann langsam aus den TemplateVoila-Anfängen zu richtigem Typo übergehst, empfehle ich gleich diesen Weg.