✔ Hintergrundbild vor span tag

[sra]

Hallo Superbrains

Ich habe im Moment das Problem, dass ich für dotNetNuke (so n cms) ein skin entwickle, in dem ich ein Menu anpassen soll. Das Menu definiert .CurrentItem als CSS Klasse für den angewählten Menupunkt. Ich möchte VOR diesem Menupunkt ein gif anzeigen (mit einem + drinn) anzeigen lassen, so dass man immer genau weiss wo man gerade ist.

Mein Problem dabei ist, dass .CurrentItem im <span> definiert ist. Also etwa so:

<a href....><span class="CurrentItem">MENU 1</span></a>

Ich hab wirklich schon einiges probiert, von text-indent bis padding, aber das bg kommt einfach immer mit dem abstand mit (ist nicht am anfang).

Hat jemand eine Idee?

btw. So als Geheimtipp... testet mal das Microsoft Expression Web an. Ich konnte Frontpage nicht ausstehen, aber das liebe ich - speziell auch wegen des CSS Dditors.

 

[Maik]

Hi,

hast du es schon mit dieser Regel probiert?

.CurrentItem {
background: url(plus.gif) no-repeat 0 50%;
padding-left: 15px;
}

Sie funktioniert bei mir einwandfrei.

 

[sra]

Hallo

Das Problem mit dem padding-left war, dass ich dann den Menupunkt noch zusätzlich eingerückt habe, was ich nicht wollte. Ich konnte es nun aber machen, indem ich padding-left auf 45px und text-indent auf -45px gestellt habe. Funktioniert nun genau wie vorgestellt.

Mein neues Problem: Diese Lösung funktioniert nur in IE(7?), nicht aber unter Firefox. Hat jemand eine Idee, wie ich dies auch noch für Firefox richtigstellen kann?

sra

 

[sra]

Ich habe etwas geforscht, und herausgefunden, dass es in Firefox richtigerweise nicht funktioniert, da

text-indent

eine Eigenschaft ist, die man nur auf Block Elemente (wie div, nicht aber span) anwenden kann.

Ich habe es mit

display:block

versucht, und das klappt auch ganz gut - ausser, dass es einen Zeilenumbruch erzwingt (was ich absolut nicht brauchen kann). Ich glaube die Lösung wäre

display:inline-block;

- nur ist das weder im aktuellen Firefox, noch im aktuellen IE umgesetzt!

Es ist zum verzweifeln - ich bin echt froh um jeden Input.

 

[Maik]

Hi,

vielleicht solltest du mal den vollständigen Quellcode (HTML + CSS) des Dokuments posten, denn mein gestriger Lösungsvorschlag funktioniert bei mir grundsätzlich in allen gängigen Browsern einwandfrei - repräsentativ hänge ich hier mal den Firefox-Screenshot an.

Der padding-left-Wert ist natürlich davon abhängig, wie breit die eingesetzte Hintergrundgrafik ist.

 

[sra]

Hallo

Ich glaube es macht wenig Sinn, dir den kompletten Quellcode zu zeigen, ist doch bereits meine CSS Datei 296 Zeilen lang, vom HTML Output möchte ich gar nicht erst anfangen (ASP.NET + DotNetNuke kann eifach mal grundsätzlich keinen schönen stricten HTML Code erzeugen). Ich werde dir aber gerne mein Problem etwas näher schildern.

Ich habe ein Menu (ist ein Web Usercontrol, das ich nicht bearbeiten kann), dessen Output so aussieht:

<table cellSpacing="0" cellPadding="0" border="0" style="width:100%;">
   <tr>
      <td onmouseover="selectmenuitem(this, true, 'PRODUKTE', 'MenuItem0', 'MenuItemMouseOver0'); return 0;" onmouseout="selectmenuitem(this, false, '', '', '');" id="invsidemenu-Produkte" class="MenuItem0"><a href="Produkte/tabid/736/Default.aspx"><span class="CurrentItem0">PRODUKTE</span></a></td>
   </tr>
</table>

Wie gesagt - das wird generiert und ich habe darauf keinen direkten Einfluss. Hier das dazugehörige CSS:

.MenuItem4 a:link, .MenuItem4 a:visited, .MenuItem4 a:hover, .MenuItem4 a:active, .MenuItem4 a:focus {
	padding-left: 45px;
}
.MenuItemMouseOver4 a:link, .MenuItemMouseOver4 a:visited, .MenuItemMouseOver4 a:hover, .MenuItemMouseOver4 a:active, .MenuItemMouseOver4 a:focus {
	padding-left: 45px;
	background-image: url('images/3plus.gif');
	background-repeat: no-repeat;
}
.CurrentItem4 {
	background-image: url('images/3plus.gif');
	background-repeat: no-repeat;
	padding-left: 45px; 
	* text-indent: -45px;
}

Das Problem liegt imho daran, dass text-indent nur auf Blockelemente (div), nicht aber auf Inlineelemente angewandt werden kann (IE interpretiert das "eigentlich" falsch).

Du kannst dir das Ergebnis hier ansehen http://tinyurl.com/2l4oq3

Gruss
sra

//EDIT

ICH HABE DIE LÖSUNG
Und wieder mal zeigt sich, dass es Hilft jemandem sein Problem zu erklären, da man dann Plötzlich wieder den Wald und nicht die Bäume sieht.

Auf jeden Fall konnte ich eine FF-konforme Lösung finden, indem ich einfach margin-left:-45px; und padding-left:45px; setze. Somit ist der Text auf 45px vom linken Rand, das background-image jedoch auf 0px vom linken Rand. Und für IE funktioniert es wie oben beschrieben mit text-indent.

Gruss und Danke
sra