[TYPO3] Problem with CSS in TS

[Andreas Balzer]

Hi!
I want to remake a GMENU to a TMENU. For this, i'm creating a css file.
The problem is, that some background-images of the menu are TS specific. 
That means, that some parts of the CSS have to be configurble via TS.

My CSS TS Code looks like this:


page.309.10.value = <style>
page.309.20.value = .hauptmenu_element_div_no {
page.309.30.value =  width:132px;
page.309.40.value =  height:20px;
page.309.50.value =  padding-left:24px;
page.309.60.value =  background-image:url 
({$mainDir}/layout/{$colorDir}/Link1-no_nosub.gif);
page.309.70.value = }
page.309.80.value = .hauptmenu_element_div_act {
page.309.90.value =  width:132px;
page.309.10.value =  height:20px;
page.309.110.value =  padding-left:24px;
page.309.120.value =  background-image:url 
({$mainDir}/layout/{$colorDir}/Link1-ro_nosub.gif);
page.309.130.value = }
page.309.140.value = .hauptmenu_element_div_actifsub {
page.309.150.value =  width:132px;
page.309.160.value =  height:20px;
page.309.170.value =  padding-left:24px;
page.309.180.value =  background-image:url 
({$mainDir}/layout/{$colorDir}/Link1-ro_nosub.gif);
page.309.190.value = }
page.309.200.value = hauptmenu_element_a_no {
page.309.210.value =  color:#5E6E9A;font-size:10px;font-weight:normal;
page.309.220.value = }
page.309.230.value = .hauptmenu_element_div_no:hover {
page.309.240.value =  background-image:url 
({$mainDir}/layout/{$colorDir}/Link1-act_nosub.gif);
page.309.250.value = }
page.309.260.value = .hauptmenu_element_div_ifsub:hover {
page.309.270.value =  width:132px;
page.309.280.value =  height:20px;
page.309.290.value =  padding-left:24px;
page.309.300.value =  background-image:url 
({$mainDir}/layout/{$colorDir}/Link1-act_sub.gif);
page.309.310.value = }
page.309.320.value = </style>

The problem is, that TS trys to execute that code instead of just 
writing it to my webpage.. I get strange output on the FE:
(and this is not from the source code, but from WYSIWYG)
height:20px;width:132px;padding-left:24px;}width:132px;padding-left:24px;}width:132px;padding-left:24px;hauptmenu_element_a_no 
{}background-image:url 
(fileadmin/layout/schueler/Link1-act_nosub.gif);.hauptmenu_element_div_ifsub:hover 
{padding-left:24px;}


My question: How can i create a CSS thing like this that works correct?
And an other question:
I read in a german Typo3 book, that it would be possible to create a TS like
thing.10.value (
	Bla bla
	bla bla
)

I would like to know, whether there is something for:
thing.10.value (
	Bla bla("something that should be outputted")
	bla bla
)

Thanks for any reply.

Greets
Andreas