✔ Listenbeschreibungen überlagern

[Sprint]

Hallo,

dieses sehr stark gekürzte Menü ist bereits in Funktion, aber als reine Textlinks ohne Hintergrund. Jetzt soll der Hintergrund mit grafischen Elementen bestückt werden. Auch das funktioniert. Jetzt sollen einige der Button farblich hervorgehoben werden. Das funktioniert mit entsprechend eingefärbten Bildern. Jetzt hatte ich mir überlegt, alle Hintergründe mit dem selben Button zu belegen und die Färbung mit einer halb transparenten Farbe durchzuführen. doch auch wenn ich die Färbung mit z-Index nach oben setze, überlagert das Bild immer.
Wie muß ich die Färbung setzen, daß sie das Bild überlagert?

<style type="text/css" media="screen"><!--
.level1 a { font-size: 11px; text-decoration: none; background-image: url('images/menu-level1.gif'); background-repeat: no-repeat; display: block; padding-left: 3px; width: 172px; height: 20px; z-index: 90; }
.level1_newsletter a { font-size: 11px; text-decoration: none; background-image: url('images/menu-newsletter.gif'); background-repeat: no-repeat; display: block; width: 172px; height: 20px; padding-left: 3px; }
.umfrage { font-size: 11px; background-color: aqua; text-decoration: none; display: block; padding-left: 3px; width: 172px; height: 20px; }
.level2 a { font-size: 11px; background-image: url('images/menu-level2.gif'); background-repeat: no-repeat; text-decoration: none; position: relative; left: -10px; width: 172px; height: 20px; padding-left: 3px; display: block; }
.level3 a { font-size: 11px; background-image: url('images/menu-level3.gif'); background-repeat: no-repeat; text-decoration: none; position: relative; left: -20px; width: 172px; height: 20px; padding-left: 3px; display: block; }
--></style>
<ul>
	<li class="level1"><a onclick="showmain('cat0')" href="#">Standard Button</a>
		<ul id="cat0" style="display:none"></ul>
	</li>
	<li class="level1_newsletter"><a onclick="showmain('cat1')" href="#">eingefärbtes Bild</a>
		<ul id="cat1" style="display:none"></ul>
	</li>
	<li class="level1 umfrage"><a onclick="showmain('cat3')" href="#">Das hier soll farblich überlagert werden</a>
		<ul id="cat1" style="display:none"></ul>
	</li>
</ul>

Danke schon einmal für eure Hilfe.

 

[Maik]

Hi,

wieso weist du den ausgewählten Menüpunkten nicht einfach blos diesen gesonderten Hintergrund zu?

mfg Maik

 

[Sprint]

Hi,

wieso weist du den ausgewählten Menüpunkten nicht einfach blos diesen gesonderten Hintergrund zu?

mfg Maik

Hab ich vergessen zu erwähnen. Das ganze Menü wird aus einer Datenbank aufgebaut und der Admin soll die Menüpunkte beliebig einfärben können, ohne deswegen extra Bilder erzeugen und hochladen zu müssen.

 

[Maik]

Naja, du versuchst da derzeit den Hintergrund des Kinderelements a durch den Hintergrund des Elternelements li zu überdecken, was so nicht funktionieren kann, und sich mit z-index auch nicht lösen lässt.

mfg Maik

 

[Sprint]

Ich hab es auch schon mal so probiert, daß ich dem <a> die Färbung zugeordnet habe. Hat aber auch nicht geklappt-

	<li class="level1"><a class="umfrage" onclick="showmain('cat3')" href="#">Das hier soll farblich überlagert werden</a>
		<ul id="cat1" style="display:none"></ul>
	</li>

 

[Maik]

Mit dem li-Element funktioniert's bei mir tadellos:

.level1  { font-size: 11px; text-decoration: none; background-image: url('images/menu-level1.gif'); background-repeat: no-repeat; display: block; padding-left: 3px; width: 172px; height: 20px; }
.level1.umfrage { font-size: 11px; background-image: none; background-color: aqua; text-decoration: none; display: block; padding-left: 3px; width: 172px; height: 20px;   }

mfg Maik

 

[Maik]

Mit dem a-Element geht es übrigens auch:

	<li class="level1"><a class="umfrage" onclick="showmain('cat3')" href="#">Das hier soll farblich überlagert werden</a>
		<ul id="cat1" style="display:none"></ul>
	</li>

.level1 a { font-size: 11px; text-decoration: none; background-image: url('images/menu-level1.gif'); background-repeat: no-repeat; display: block; padding-left: 3px; width: 172px; height: 20px; position:relative; z-index: 90; }
.level1 .umfrage { font-size: 11px; background-image: none; background-color: aqua; text-decoration: none; display: block; padding-left: 3px; width: 172px; height: 20px;   }

mfg Maik

 

[Sprint]

Nach meinem letzten Posting kam mir zwar eine Idee, die dann auch funktionierte. Vor allem auch wenn ich die Färbung per opacity verringert habe. Dann kommt das Hintergrundbild leicht durch, so wie es soll. Nur wird die eigentlich schwarze Schrift auch mit verringert, so daß sie jetzt grau ist.

	.level1 { background-image: url(../images/menu-level1.gif); background-repeat: no-repeat; display: block; width: 172px; height: 20px; }
	.level1 a { font-size: 11px; text-decoration: none; display: block; width: 172px; height: 20px; padding-left: 3px; }
	.umfrage { color: black; background-color: aqua; background-repeat: no-repeat; display: block; width: 172px; height: 20px; filter:alpha(opacity=50); opacity:0.5; }

 

[Maik]

Jo, der Opacity-Filter wird nunmal an das Nachfolgerelement bzw. den Inhalt vererbt.

Nutze stattdessen ein semitransparentes PNG-Bild als Hintergrund, um die Vererbung der Transparenz zu vermeiden.

mfg Maik

 

[Sprint]

Jo, der Opacity-Filter wird nunmal an das Nachfolgerelement bzw. den Inhalt vererbt.

Nutze stattdessen ein semitransparentes PNG-Bild als Hintergrund, um die Vererbung der Transparenz zu vermeiden.

mfg Maik

Aber dieses PNG Bild muß ja dann auch schon entsprechend eingefärbt sein, oder? Und das möchte ich ja gerade vermeiden. Der Admin soll eine Farbe festlegen und die entsprechende Zeile wird per PHP erzeugt und eingetragen.