Ich möchte meinen Links in meinem Menü eine Hintergrundgrafik verpassen.

Der html-Code wird von Joomla! vorgegeben, leider in Tabellen-Struktur:

Code

	<table width="100%" border="0" cellpadding="0" cellspacing="0"> 
		<tr align="left"> 
			<td><a href="p;id=20&amp;Itemid=49" class="mainlevel" id="active_menu">Wärmepumpen</a> 
				<div style="padding-left: 4px"><img src="#" alt="" /><a href="#" class="sublevel">Noch mehr</a></div> 
				<div style="padding-left: 4px"><img src="#" alt="" /><a href="#" class="sublevel">Untermenü 2</a></div> 
			</td> 
		</tr> 
		<tr align="left"> 
			<td><a href="#" class="mainlevel">Beispiel-Content</a></td> 
		</tr> 
	</table> 

CSS:

Code

  a.sublevel { 
  	display: block; 
	width: 220px; 
	white-space: nowrap; 
  	background: transparent url("images/navi_left_button_blue.gif") no-repeat; 
  } 

Für a.mainlevel soll natürlich das selbe gelten, und die src-Angabe ist natürlich auch korrekt.

Nun möchte ich, dass jeder Link mit der Klasse .sublevel genau 220px breit ist, um die Hintergrundgrafik anzuzeigen. Doch leider erscheint die Grafik nur als ein 1-Px breiter Streifen links neben dem Link. Was versteh ich hier nicht???

Hoffe ich hab mich verständlich ausgedrückt.

Hallo Canio,

>> Der html-Code wird von Joomla! vorgegeben

Hast Du Angst davor den Code zu ändern?

Poste doch mal die URL zu der betreffenden Seite.
Mit dem geposteten Codeschnipsel ist der Darstellungsfehler nicht nachvollziehbar.

Angst vorm Code hab ich nicht. Ich bin Joomla-Newbie, aber ist ja auch nicht das Problem.

Die Testseite befindet sich hier: http://web30.mitho-rhein-server.de/tecalor/index.php.

Es geht nur um die Navigation auf der linken Seite. Ich möchte allen Menüpunkten, auch den Untermenüs eine Hintergrundgrafik geben.

Hallo Canio,

mit diesem HTML-Code wird das nichts werden.
Um einem Link eine Breite zu geben muß man den Link mit display:block formatieren.

Und genau das hat zur Folge, daß zwischen diesem Bild und Link ein Umbruch entsteht.
<img src="#" alt="" /><a href="#" class="sublevel">Noch mehr</a>

Du könntest jetzt versuchen mit


<img class="platzhalter" src="#" alt="" /><a href="#" class="sublevel">Noch mehr</a>

.platzhalter{float:left}


den Link rechts neben das Bild zu bekommen.


Ich würde aber eine andere Lösung vorschlagen.
Verwende am besten eine Liste, dann mußt Du die Menüpunkte nicht mit Hilfe von Bildern einrücken.

Hier ein Beispiel mit Hintergrundbild:
http://css.maxdesign.com.au/...atic2/vertical06.htm

Und hier findwest Du zahlreiche weitere Beispiele:
http://css.maxdesign.com.au/listamatic2/index.htm