Stylesheet-Einstellungen werden nicht übernommen

Hallo,

ich versuche gerade, eine existierende Seite in Typo3 (3.8.1, mit Extension css_styled_content) zu übertragen.

Dabei werden nicht alle Einstellungen der stylesheets bezüglich des Contents übernommen: grundlegende Dinge wie Schriftfarbe und –typ macht Typo3, aber weitergehende Anweisungen, wie z. B. „overflow: auto“ nicht, jedenfalls kriege ich keinen scrollbar.

Hier meine .css (Auszug):

/* content Text */
contentText {margin-left: 50px; margin-top: 15px; width: 545px; height: 380px; overflow: auto;}
h1, h2, h3, p, p.back, a, a:hover, a:focus, a:active, ul, ol, li, input, input.border, select, textarea, label, form, table, th, td{font-family: verdana, arial, helvetica, sans-serif; line-height: 14px;}
p {margin-bottom: 6px; margin-right: 10px; font-size: 12px; color: #036;}
h1 {font-size: 12px; color: #036; text-transform: uppercase; margin-bottom: 8px;}
h2{margin-bottom: 7px; font-size: 12px; color: #036; font-weight: bold;}
h3{margin-bottom: 7px; font-size: 12px; color: #036; font-style: italic;}
p.back{border: 1px solid #039; border-width: 1px 0; width: 90%; margin: 15px 0; color: #039;}
a{text-decoration: none; font-weight: bold; color: #039;}
a:hover{color: #333;}
a:focus{color: #333;}
a:active{color: #333;}
ul{margin: 8px 0; list-style: circle;}
ol{margin: 8px 0;}
li{margin-left: 20px; margin-top: 5px; color: #036; font-size: 12px;}
input{border: none; font-size: 12px; margin-top: 10px; color: #036;}
input.border{border: 1px solid #999;}
select{font-size: 12px; width: 180px;}
textarea{font-size: 12px; width: 400px;}
label{font-size: 12px; float: left; width: 140px;}
form{margin-top: 10px;}
table{margin-top: 6px; text-align: center;}
th{font-size: 12px; color: #036; font-weight: bold; text-transform: uppercase; background: #e8e8e8; border: 1px solid #666; border-width: 0 1px 1px 0; width: 140px;}
td{font-size: 12px; color: #036; border: 1px solid #999; border-width: 0 1px 1px 0;}
.w300 {width: 310px!important;}

Wie muss ich die ändern, damit Typo3 das versteht? Gibt es irgendwo ein Tutorial oder eine andere Darstellung zum Thema?

Danke im Voraus,

Kutte

Hallo erstmal,

ich habe das Problem jetzt etwas genauer verstanden:

meine Designvorlage hat einen Subpart „contentText“, s. u.:

<body>
      <!-- ###container### begin--->
      <div id='container'>
           ###topNav###
           ###header###
           ###mainNav###
           ###subNav###
           <!-- ###badmintonContent### begin--->
           <div id='badmintonContent'>
             <!-- ###contentText### begin--->
             <div id='contentText'>
             </div>
             <!-- ###contentText### end--->
           </div>
           <!-- ###badmintonContent### end--->
      </div>
      <!-- ###container### end--->
</body>

Dessen Ausgabe versuche ich im stylesheet zu definieren, wie im vorigen Post beschrieben. Mittlerweile habe ich kapiert, dass ich mit den stylesheet-Angaben ab Zeile 3 einen Standard für die Wiedergabe von Schrift definiert habe, der auch auf jeden anderen subpart angewendet würde.

Was ich Typo3 sagen will, ist, dass es mir einen Kasten definiert, wie in Zeile 2 des stylesheet beschrieben, und in diesem dann den Content aus tt_content darstellt wie ab Zeile 2 definiert.

Was mich irritiert ist, dass das <div id='contentText'> nicht verstanden wird, da <div id='badmintonContent'> eine richtige Ausgabe eines Hintergrundbildes wie im stylesheet, aber nicht irgendwie in Typoskript im Seitentemplate, definiert, ergibt.

Zum Vergleich hier der Auszug aus dem Stylesheet:

#badmintonContent {height: 433px; background: url(../pix/inhBadmin_bg.jpg) no-repeat; padding: 1px 0; text-align: left;}

Ist hier denn wirklich niemand, der mir da weiterhelfen kann???

Gruss,

Kutte

Typo3 hat mit dem Design/CSS-Styles grundsätzlich nichts zu tun.
Wenn dein CSS im ausgegebenen HTMl-File inkludiert wird dann wird es auch angewandt. (der Browser weiß ja nicht dass Typo3 hinter dieser HTMl-Seite steht und es ist ihm auch wursch.)

1. Schau mal ob dein Stylesheet im resultierenden HTML eingebunden ist. (mittels <link rel="stylesheet" type="text/css" href="fileadmin/templates/..." /> oder @import)

2. Vergleiche das von Typo3 ausgegebene HTML mit deinem Template.
Stimmt die Struktur überein dann greift auch das CSS-File.

Hallo Miwolfram,

ja, beides ist so, er bindet´s ein lt. Quellcode der resultierenden Seite, und er stellt die Seite dar entsprechend der Designvorlage.

Ich denke, es liegt an meinem stylesheet. Leider weiss ich nicht, wie ich das entweder umformulieren muss, oder was ich tun könnte, damit Typo3 dieses Stylesheet ausführen kann (denn grundsätzlich steuert es, was es soll, jedenfalls ohne Typo3 einzusetzen).

Hast Du entweder einen Tip, wo ich mich einlesen kann, oder kennst Du Typo3 so gut, dass Du mir sagen kannst, wie Typo3 konfiguriert werden kann, damit es dieses Stylesheet versteht?

Gruss,

Kutte

Poste doch bitte mal den Teil des resultierenden HTML in dem das Stylesheet eingebunden wird.
Dann den Teil im HTML den du mit CSS stylen möchtest (bzw. wo es nicht funktioniert) (zb. <div id="contentmap"></div>).
Abschließend den Code-Schnipsel aus dem CSS der diesen Teil stylen soll.

Wie bereits erwähnt - man muss/kann Typo3 nicht "konfigurieren" damit es ein Stylesheet versteht denn es kommt ja gar nicht damit in Berührung bzw. gibt ja einfach ein HTML-File aus und der BROWSER setzt dies mit CSS um.

Also wird entweder das CSS nicht eingebunden (wenn du zumindest ein Teil des HTMLs so aussieht wie es aussehen soll - zb. Hintergrundfarbe die du im CSS gesetzt hast - dann kannst du dies ausschießen)
2. könnten Typo3-interne CSS-Styles deine Styles überschreiben (du siehst ja im HTML was eingebunden wird) - ist jedoch unwahrscheinlich da hier nur Standard-Formatierungen festgelegt sind.
3. Stimmt dein HTML-Code nicht bzw. hast du zb. 2 Elemente mit derselben Id oder du versucht mit einer CSS-klasse Eigenschaften zu setzen die bereits über den ID-Selektor eines Elements gesetzt wurden.

Hallo Miwolfram,

Danke ersteinmal für Deine Hilfsbereitschaft!

und jetzt kommen die "Schnipsel".

Hier der Auszug aus dem Browser-Quelltext:

<link rel="stylesheet" type="text/css" href="fileadmin/template/scripts/example.css" />

Und der Pfad stimmt auch.

Hier der Auszug aus der Designvorlage:

<!-- ###contentText### begin--->

             <div id="contentText">
             </div>

             <!-- ###contentText### end--->

Und hier der Auszug aus der .css:

#contentText {text-align: left; margin-left: 50px; margin-top: 15px; width: 545px; overflow: auto;}
h1, h2, h3, p, p.back, a, a:hover, a:focus, a:active, ul, ol, li, input, input.border, select, textarea, label, form, table, th, td{font-family: verdana, arial, helvetica, sans-serif; line-height: 14px;}
p#contentText {margin-bottom: 6px; margin-right: 10px; font-size: 12px; color: #036;}
h2#contentText {margin-bottom: 7px;; font-size: 12px; font-weight: bold; color: #036;}
h1.csc-firstHeader {font-size: 12px; color: #036; margin-left: 50px; margin-top: 15px; text-transform: uppercase; margin-bottom: 8px;}
h2.csc-firstHeader {margin-bottom: 7px; font-size: 12px; color: #036; font-weight: bold;}
h3{margin-bottom: 7px; font-size: 12px; color: #036; font-style: italic;}
p.back{border: 1px solid #039; border-width: 1px 0; width: 90%; margin: 15px 0; color: #039;}

Ich hoffe, das sind die Angaben die Du wolltest; sonst: anmeckern!

Gruss,

Kutte

Naja, spontan fällt mir auf dass dein Stylesheet zwar korrekt jedoch ein wenig sinnlos ist.

Mit p#contentText bzw. h2#contentText erreichst du nicht dass alle p bzw. alle h2-Tags im Div "contentText" entsprechend formatiert werden sondern du definierst das aussehen eines p-Tags mit der id "contentText" bzw. eines h2-Tags mit derselben ID.
Da in einer HTML-Seite jedoch jede ID nur genau einmal vorkommen darf - ansonsten ist es nicht HTML-konform und funktioniert auch je nach Browser nicht richtig - stimmt das nicht.

Wenn du die Tags p bzw. h2 im Div "contentText" definieren willst muss du:
#contentText p{ ... } bzw. #contentText h2{ ... } schreiben.

Das Tag auf das die jeweilige Formatierung angewendet werden soll davor zu schreiben ist nur bei einer Klasse sinnvoll - z.B. p.back{...} - was du ja auch gemacht hast.
In diesem Fall definierst du eine CSS-Klasse "back" die ausschließlich auf p-Tags angewendet wird.

CSS-Klassen dürfen beliebig oft in einer HTML-Seite vorkommen, jede ID jedoch nur einmal.

Poste doch auch noch einen Teil des resultierenden HTML-Codes der Stellen die nicht funktionieren!

Tipp: www.css4you.de

Hallo Miwolfram,

tja, das mit dem Stylesheet, also das Typo3 damit nicht in Berührung kommt, das hatte ich nicht gewusst.

Deshalb habe ich sicher die Sache komplett falsch angegangen: Es existierte ein funktionierendes Stylesheet, das ich hier (auszugsweise, die Menügeschichten sind aussen vor) eingebunden habe:

* {margin: 0; padding: 0;}
body {background: url(../pix/bg.gif) top left repeat; text-align: center;}
body, input, textarea {font-family: verdana, arial, helvetica, sans-serif; line-height: 14px;}
img {border: none;}
hr {margin: 5px 0; width: 90%;}

#container {width: 800px; margin: 0 auto; background: #fff; border-bottom: 2px solid #369;}


/* main Text */

#mainText {margin-left: 30px; margin-top: 35px; width: 340px; height: 380px;}
#mainText p {margin-bottom: 5px; font-size: 12px; color: #036;}
#mainText h1 {font-size: 12px; color: #036; text-transform: uppercase; margin-bottom: 8px;}
#mainText h2 {margin-bottom: 7px; font-size: 12px; color: #036; font-weight: bold;}
#mainText h3 {margin-bottom: 7px; font-size: 12px; color: #036; font-style: italic;}
#mainText a {text-decoration: none; font-weight: bold; color: #039;}
#mainText a:hover, #mainText a:focus, #mainText a:active {color: #333;}
#mainText ul {margin-top: 8px; list-style: circle;}
#mainText li {margin-left: 15px; margin-top: 5px; font-size: 12px; color: #036;}
.maus {cursor: pointer; cursor: hand;}

/* end main Text */

/* content Text */

#contentText {margin-left: 50px; margin-top: 15px; width: 545px; height: 380px; overflow: auto;}
#contentText h1 {font-size: 12px; color: #036; text-transform: uppercase; margin-bottom: 8px;}
#contentText h2 {margin-bottom: 7px; font-size: 12px; color: #036; font-weight: bold;}
#contentText h3 {margin-bottom: 7px; font-size: 12px; color: #036; font-style: italic;}
#contentText p {margin-bottom: 6px; margin-right: 10px; font-size: 12px; color: #036;}
#contentText p.back {border: 1px solid #039; border-width: 1px 0; width: 90%; margin: 15px 0; color: #039;}
#contentText a {text-decoration: none; font-weight: bold; color: #039;}
#contentText a:hover, #contentText a:focus, #contentText a:active {color: #333;}
#contentText ul {margin: 8px 0; list-style: circle;}
#contentText ol {margin: 8px 0;}
#contentText li {margin-left: 20px; margin-top: 5px; color: #036; font-size: 12px;}
#contentText input {border: none; font-size: 12px; margin-top: 10px; color: #036;}
#contentText input.border {border: 1px solid #999;}
#contentText select {font-size: 12px; width: 180px;}
#contentText textarea {font-size: 12px; width: 400px;}
#contentText label {font-size: 12px; float: left; width: 140px;}
#contentText form {margin-top: 10px;}
#contentText table {margin-top: 6px; text-align: center;}
#contentText th {font-size: 12px; color: #036; font-weight: bold; text-transform: uppercase; background: #e8e8e8; border: 1px solid #666; border-width: 0 1px 1px 0; width: 140px;}
#contentText td {font-size: 12px; color: #036; border: 1px solid #999; border-width: 0 1px 1px 0;}
.w300 {width: 310px!important;}

/* end content Text */

Das habe ich versucht, so zu verändern, dass Typo3 es versteht (der Großteil dessen, was Dir an dem oben dargestellten Stylesheet nicht sinnvoll erschien, wird hier nicht drin sein). Dieser Ansatz war somit von vornherein nicht der richtige.

Andererseits muss das wohl bedeuten, dass ich an Typo3 solange einzustellen habe, bis die Darstellung mit dem gegebenen Stylesheet richtig ist, oder?

Dazu fällt mir Folgendes ein:

Es reicht nicht, das Stylesheet eingebunden zu haben im Typoscript des templates.

Gibt es irgendwo default-stylesheets, auf die Typo3 zugreift?

Muss z. B. der rte konfiguriert werden, so dass er default-Stylesheets ignoriert, bzw. das eigene anwendet?

Muss im template das Stylesheet eingebunden werden?

Z. B. im TypoScript ObjectBrowser, muss da die Klasse „bodytext“ ´raus, und durch „contentText“ und „mainText“ (aus meinem Stylesheet) ersetzt werden?

Denn es ist so, dass die Darstellung nicht so ist, wie sie soll: z. B. ist der Text schwarz, und auch viel zu gross.

Das wird sicher so ein bisschen viel für dieses Forum, aber vielleicht kannst Du mir doch ein paar Stichworte geben (auch damit ich im Forum suchen kann). Gibt es da ein Tutorial? Modern Template Building?

Gruss,

Kutte

Nein - "bodytext" musst du nicht durch "contentText" ersetzen.

Probiers einfach so aus:
Speichere dir die Seite wie sie von Typo3 ausgegeben wird (im Browser) ab, inklusive der darin eingebunden Stylesheets und teste es offline durch.
Dann siehst du was du in Typo3 bzw. im TypoScript verändern musst damit dein Stylesheet greift. Erst danach machst du die Änderungen in Typo3.

Nochmals: Auf welche Stylesheets/Definitionen das resultierende HTML zurückgreift kannst du leicht daraus lesen. Im Quellcode steht ALLES dazu drin. Wenn ein Stylesheet nicht im Quellcode steht kann der Browser es auch nicht benutzen. Es genügt also wenn du die eingebunden Stylesheets überprüfst bzw. - falls vorhanden - die Inline-Styles im Quellcode durchsiehst und du wirst schnell herausfinden welche Styles nicht greifen bzw. welche Definitionen aus einem CSS-File z.B. durch einen Inline-Style überschrieben werden.

Hallo Miwolfram,

bin ich eigentlich der Einzige, der diese Vorgehensweise, also den Quelltext lokal abzuspeichern, und dann darin zu ändern, bis die Ausgabe richtig ist, nicht kannte?

Ich muss sagen, dass ich zuerst verblüfft und skeptisch war, aber jetzt bin ich verblüfft und begeistert! Vielen Dank für den Tipp! Und für Deine Hilfsbereitschaft sowieso!

Ich hatte einen saublöden und einen Verständnisfehler in meiner Designvorlage, (ich weiß nicht, ob Du Dir die überhaupt angesehen hattest) die ich, zusammen mit unserem CSS-Guru, so finden konnte, und die mir alles kaputt gemacht hatten.

JETZT LÄUFT ES!!! (Zumindest prinzipiell, und es werden noch genug Probleme auftauchen.)

Gruss,

Kutte