mehrere Spalten mit verschiedenen Stylesheets

marc-willmann · 28. September 2003 02:29

Hallo Forum,

ich habe ein Template mit zwei Spalten (links und normal), die auch eine unterschiedliche Farbgestaltung haben. Für jede dieser Spalten gibt es ein Stylesheet, das auch in das Template eingebunden ist.

Meine Frage: Wie bringe ich Typo3 nun bei, dass es für die Texte und Links in der linken Spalte immer das eine Sheet und in der normalen Spalte den anderen Sheet gibt?

Vielen Dank für jede Hilfe

Marc

Julian · 28. September 2003 14:34

Für jede dieser Spalten gibt es ein Stylesheet, das auch in das Template eingebunden ist.

Zwei unterschiedliche Stylesheets in einer Seite? Wie soll das denn gehen? Oder steh ich grad auf dem Schlauch...?!

Julian

rolli · 28. September 2003 17:36

marc-willmann schrieb
Hallo Forum,

ich habe ein Template mit zwei Spalten (links und normal), die auch eine unterschiedliche Farbgestaltung haben. Für jede dieser Spalten gibt es ein Stylesheet, das auch in das Template eingebunden ist.

Meine Frage: Wie bringe ich Typo3 nun bei, dass es für die Texte und Links in der linken Spalte immer das eine Sheet und in der normalen Spalte den anderen Sheet gibt?

Vielen Dank für jede Hilfe

Marc

Hallo Marc,

- Du hast eine Designvorlage.
- Du hast eine Stylesheetdatei.

In der CSS Datei legst Du für alle Bereiche Deine Designvorlage die Styles fest.
Sollte doch so funktionieren?

MFG
rolli

marc-willmann · 28. September 2003 23:16

Ja, habe ich so gemacht, funktioniert auch fast. Wenn ich normalen Text habe, dann wird dieser wie im Stylesheet angegeben formatiert. Unangenehmer Nebeneffekt: Wenn ich als Content-Element "Text mit Bild" angebe und das Bild neben dem Text anzeigen lasse, dann bringt Typo3 mit der wilden Tabellenverschachtelei mein Stylesheet ins Abseits - das wird dann einfach ignoriert. Wenn man sich den HTML-Code anschaut, auch zurecht - die -Tags werden nämlich durch -Tags überschrieben (die T3 da ungefragt einbaut). Mit "Bild im Text" gehts einwandfrei - damit kann ich momentan auch leben.

Was wirklich stört: Wenn im Text Links angegeben sind, dann benutzt t3 nicht die a.standard und a.left-Sheets, sondern den Standard-Sheet a.

Ich habe bereits versucht, mit ATagParams die richtige CSS-Klasse zu erzwingen, aber leider akzeptiert typo3 das nicht. Kann ich denn ATagParams nur auf MENU-Objekte loslassen? Wenn nein, wie ist die korrekte Zuweisung?

Mein Setup-Schnippsel für besagtes Problem:

subparts.CONTENT < styles.content.get
subparts.CONTENT.wrap= |
subparts.CONTENT.ATagParams = class="a.standard"

subparts.CONTENT_LEFT.ATagParams = class="a.LeftBox"
subparts.CONTENT_LEFT < styles.content.getLeft

in der HTML-Seite steht KEIN class-Tag im <A>-Tag.

Vielen Dank.

Ich hoffe, ich habe mich halbwegs verständlich ausgedrückt... 🙂[/b]

rolli · 28. September 2003 23:48

marc-willmann schrieb
. . . Mit "Bild im Text" gehts einwandfrei - damit kann ich momentan auch leben.

Was wirklich stört: Wenn im Text Links angegeben sind, dann benutzt t3 nicht die a.standard und a.left-Sheets, sondern den Standard-Sheet a.

Ich habe bereits versucht, mit ATagParams die richtige CSS-Klasse zu erzwingen, aber leider akzeptiert typo3 das nicht. Kann ich denn ATagParams nur auf MENU-Objekte loslassen? Wenn nein, wie ist die korrekte Zuweisung?

Mein Setup-Schnippsel für besagtes Problem:

subparts.CONTENT < styles.content.get
subparts.CONTENT.wrap= |
subparts.CONTENT.ATagParams = class="a.standard"

subparts.CONTENT_LEFT.ATagParams = class="a.LeftBox"
subparts.CONTENT_LEFT < styles.content.getLeft

in der HTML-Seite steht KEIN class-Tag im <A>-Tag.

Vielen Dank.

Ich hoffe, ich habe mich halbwegs verständlich ausgedrückt... 🙂[/b]

Hallo,

tut mir leid, Dir nicht mehr weiter helfen zu können. Mit den von Dir aufgezählten Wiedrigkeiten muß ich auch noch zum Teil leben.

  subparts.CONTENT.ATagParams = class="a.standard"

Solch ein Konstrukt funktioniert jedoch keinesfalls(?)

  subparts.CONTENT < styles.content.get
  subparts.CONTENT.wrap= <p>|</p>
  subparts.CONTENT.ATagParams = class="a.standard"

Bei mir funktioniert das so:

marks.INHALT < styles.content.get
marks.INHALT.wrap = <font class=inhalt><br>|</font>

Ich meine, die vorher in der Designvorlage festgelegten Marker "INHALT" erhällt dann den entsprechenden Style.

Mit:

page = PAGE
page.typeNum = 0
page.stylesheet = fileadmin/designvorlagen/stil1.css
. . .

sollten dann auch alle anderen Styles wie z.B. Elemente wie "A" auch automatisch übernommen werden, so Du den Links mit entsprechenden Styles in der *.css Datei versehen hast. z.B.:

a:link
{
	color: #ffffff;
	text-decoration: none;
}

A:visited
{
	color: #ff0000;
	text-decoration: none;
}


a:active 
{
	color: #00ff00;
	text-decoration: none;
}

MFG
rolli

s.sach · 29. September 2003 08:09

Lösung:
#5934

marc-willmann · 29. September 2003 09:48

Hallo nochmal,

vielen Dank für die Hinweise - aber leider lösen selbige mein Problem immer noch nicht. Um es noch einmal deutlich zu sagen:

meine beiden Spalten links und normal haben sehr unterschiedliche Farben und deshalb muss natürlich auch der Text und die Links in unterschiedlichen Farben dargestellt werden. Für den Text funktioniert das auch ganz gut, aber die Links werden immer mit dem Standard- <a>-Stylesheet formatiert, obwohl es in der CSS-Datei auch ein <a.Left>-Sheet gibt.

Es muss doch irgendwie möglich sein, Typo3 beizubringen, dass er für die linke Spalte dieses Sheet benutzt...

bei MENUs habe ich das bereits hinbekommen, indem ich ein myMENU.NO.ATagParams = class="a.myClass" eingefügt habe. Leider scheint die ATagParams-Eigenschaft aber bei Standard-Content nicht zu exisitieren, zumindest finde ich nicht das richtige Objekt, um diese Eigenschaft zu setzen...

Aber weil dieses Problem ja eigentlich nicht soooo aussergewöhnlich ist, glaube ich schon, dass T3 das kann...

Gruß

Marc

dj.picasso · 29. September 2003 10:42

Hi @all,

subparts.CONTENT.ATagParams = class="a.standard"

Besser ist:

subparts.CONTENT.NO.ATagParams = class="standard"

Dies folgende ist technisch gesehen: "Nichts-Halbes-und-Nichts-Ganzes"!
Man kann es auch als "RUMBRATEN" bezeichnen! 😉

marks.INHALT.wrap = <font class=inhalt><br>|</font>

Entweder font ODER styles aber bitte NICHT so etwas!

Bei der Verwendung von Styles hängt die Darstellung von Links in Verbindung mit Text auch von der Reihenfolge der Definition ab, d.h. Du musst darauf achten wie die wraps, allwraps und atagparams definiert werden und Dir auch mal den Quelltext ansehen, wenn es nicht so funzt wie Du es gern hättest.

Beispiel:
Versuche mal den Unterschied von:

<p class="style1"><a href="irgendwas.html" class="style2">hallo hier bin ich</a></p>

<a href="irgendwas.html" class="style2"><p class="style1">hallo hier bin ich</p></a>

Ciao
Der DJ

rolli · 29. September 2003 11:34

dj.picasso schrieb
Hi @all,
. . .

Dies folgende ist technisch gesehen: "Nichts-Halbes-und-Nichts-Ganzes"!
Man kann es auch als "RUMBRATEN" bezeichnen! 😉
marks.INHALT.wrap = |
Entweder font ODER styles aber bitte NICHT so etwas!
. . .

Hallo DJ,

danke für Deinen Hinweis.
Ich habe die Zuweisung bis jetzt immer so gelöst. Grund dafür, ich habe es hier im Forum oft genug so gelesen, an anderen Beispielen.

#2219
-> Letzter Beitrag. Statt des <p ... Tags habe ich dann das o.g. <font class ... Tag eingesetzt.

Anderes Beispiel, ebenfalls letzter Beitrag:
#5934
Statt des <div ... Tags habe ich dann das o.g. <font class ... Tag eingesetzt.

Werde Deinen o.g. Ratschlag beherzigen und meine Setup´s verbessern.

Danke und einen schönen Tag
rolli

PS: Beiträge solcher Art sind sehr wertvoll, finde ich.

marc-willmann · 29. September 2003 11:35

ich versuche, die -Tags nicht zu benutzen, Styles finde ich da wesentlich eleganter.

Der betreffende (von t3 generierte) Code lautet wie folgt:

<td height="313" width="155" bgcolor="1D4BA9" valign="top" align="left" class="LeftBox">
<p>
   <a name="8"></a><P style="margin:0 0 0 0;">
   [...hier kommt richtig formatierter Text...]</P>
<P style="margin:0 0 0 0;"><b><A HREF="index.php?id=8" target="_top">Zum Eingabeformular</a></b></P>
</P>
</td>

das Problem ist eben nun, dass im <A>-Tag gar kein Klassenname steht und ich dort aber eben einen reinhaben möchte...

s.sach · 29. September 2003 11:38

Also so funktionierts bei mir. Auch mit den unterschiedlich Linkfarben und Dekorationen. Oder verstehe ich irgendwas falsch?

Constants:

styles.content.textStyle.color =
styles.content.textStyle.altWrap = |

Setup:

marks.INHALT < styles.content.get
marks.INHALT2 < styles.content.getLeft 
marks.INHALT2.stdWrap.required = 1
marks.INHALT2.stdWrap.wrap = <div class="inhalt2">|</div>
marks.INHALT3 < styles.content.getRight 
marks.INHALT3.stdWrap.required = 1
marks.INHALT3.stdWrap.wrap = <div class="inhalt3">|</div>

CSS:

div.inhalt2 p {color:#EFEFF7; height: 100%; padding-left: 0px; padding-right: 0px; padding-top: 0px; padding-bottom: 0px; valign: top;}
div.inhalt2 a {color:red; text-decoration: none;} 
div.inhalt2 a:hover {color:red; text-decoration: underline;} 
div.inhalt3 p {color:#EFEFF7; height: 100%; padding-left: 0px; padding-right: 0px; padding-top: 0px; padding-bottom: 0px; valign: top;}
div.inhalt3 a {color:blue; text-decoration: none;} 
div.inhalt3 a:hover {color:blue; text-decoration: underline;}

marc-willmann · 29. September 2003 11:53

wunderbar, nun geht's. Ich habe in der css-Datei die Einträge von

a.LeftBox {...}

auf

div.LeftBox a {...}

geändert und nun läuft es wie gewünscht!

Vielen Dank!

M.