[bender007]

Hi,

ich habe ein menu unter Joomla ganz normal mit <ul's> und <li's>. Allerdings soll vor den menü namen eine 01, 02 oder 03. Wenn ich die Nummern als Titel benutze und der Titel etwas länger ist gibt es einen Zeilenumbruch (z.B. Hallo Welt) das Hallo steht dann vor dem 01 und Welt fängt bündig mit dem 01 an und nicht mit dem Hallo.

Beispiel:

Falsch:
01. Hallo
Welt

Richtig(so sollte es sein):
01 Hallo
----Welt (ohne ---)

Wenn ich das ganze mit <ol's> löse funzt der hover effekt nicht mehr denn vor dem 01 sollte beim drüber hovern ein Pfeil zu sehen sein.

Beispiel:

01. > Hallo
--------Welt

so würde das ganze dann mit <ol's> aussehen. Allerdings soll der Pfeil vor dem 01 erscheinen.

So sollte es eingentlich aussehen:
> 01. Hallo
---------Welt

Hatt jemand eine Idee?



Thx bender

[alexw_ingoS]

Die einfachste (und überdies semantisch sinnvollste) Lösung wäre, mit einer geordneten Liste zu arbeiten und den hover-Effekt einfach dem <li> statt dem <a> zuzuweisen.
Hauptnachteil: Der Internet Explorer 6 wird sich sperren, weil er so elementare Sachen leider nicht kann...
Es gibt zwar ein JavaScript-basiertes Workaround, aber da liegt der nächste Nachteil auf der Hand: Es basiert auf JavaScript.
Wenn du allerdings der Klientel "IE6 und JavaScript abgeschaltet" einen fehlenden hover-Effekt zumuten kannst, dann ist das Problem natürlich an dieser Stelle schon gelöst.

[bender007]

mh das hover hab ich schon auf das <li> gelegt aber wie gesagt der Pfeil muss ja vor die 01 und die 01 wird ja vom <ol> generiert. D.H. wenn ich drüber hovere wird der Pfeil nach dem 01 erscheinen.

Und bei meinem Menü sollte es ja in folgender Reihenfolge sein: erst Pfeil > 01. Hallo Welt.

Thx Bender

[Smooth-Graphics]

http://www.google.com/search?q=CSS+Sprites

Vielleicht hilft dir hier ein Beispiel weiter... sollte zumindest, weil doch viele genau ähnliche Beispiele abdecken.

[alexw_ingoS]

@bender007: Tut mir Leid, ich hatte (war so früh am Morgen) verkehrterweise angenommen, der <li>-Block würde sich auch über die Nummer erstrecken. 'tschuldigung.

EDIT: So, jetzt aber.
Folgende Möglichkeit ist eher hässlich, ist aber das Einzige, was mir noch eingefallen ist:
Wenn du doch eine ungeordnete Liste ohne Aufzählungszeichen verwendest und die Nummern einfach neben den Linktext schreibst, kannst du die erste Zeile mit einem negativen text-indent-Wert nach links rücken und den Hintergrund mit padding-left "nachschieben". (Man kann natürlich auch umgekehrt sagen: Du schaffst dir erst mit padding-left Platz und schiebst dann mit einem negativem text-indent-Wert die erste Zeile nach links in den freien Platz.) Am sinnvollsten sind hier wohl Angaben in em.
Ich hab hier mal ein Beispiel gebastelt: Listenpunkte + Hintergrund
Klarer Nachteil: Für text-indent kann man keine Zeichenanzahl oder sowas angeben, sondern nur Längenmaße oder Prozentangaben. Hat der Betrachter also nicht die richtige(n) Schrift(en), passt die Einrückung nicht mehr so ganz.

[bender007]

ok wow danke für das Beispiel. Bin bis jetzt durch CSS ganz gut durchgestiegen aber auf so ne Idee wäre ich nicht gekommen. Bzw. ich hätte nicht gedacht das sowas funktionieren würde . Hab auch ne Minute gebraucht bis es klick gemacht hat

Wegen den Schriftarten verwende ich sowieso Arial. Also eine absolute Standardschrift.

Vielen dank ich werd gleich mal umsetzen.

Thx Bender

P.S. Wieso wäre das eine "hässliche" Möglichkeit? Ich meine es sind ja alles CSS Funktionen. Man muss nur drauf kommen wie man sie einsetzt.

[bender007]

mh das einzige was mir noch einfällt ist der Active effekt. Das Problem ist das auf einen Activen Link eine Class gesetzt wurde (indiesem fall heisst die class mainlevel_current_subnav). D.h. nicht auf ein LI sondern auf <a>

[bender007]

Ah ok hat sich erledigt ich hab mir mal n bisschen den Code angesehen und einfach die active class auf das <li> gelegt und nicht auf das <a>...

Aber trotzdem könnte man nicht mit der selben Lösung auch das active bild vorschieben?? Nur mal so als zusatz Info.


Thx Bender