[-Tom-Tom-]

Hallo,

ich hab in Joomla noch nicht besonders viel Erfahrung ...

Ich habe ein Template erstellt und möchte so ein Menü realisieren:



Das Problem woran ich gerade scheitere ist, dass der oberste und untereste Button abgerundet sein sollen.
Normalerweise würde ich hergehen und für diese einfach andere Grafiken verwenden.
Nur weis ich nicht wie ich Joomla sagen soll dass der oberste und unterste Button ne andere Grafik platzieren soll als für die Mittleren. Weil eigentlich bezieht sich der ja immer auf den Einen Button, wie er im css definiert, ist, oder?

Gruß

[lefoff]

Erzeugst du die Buttons über Hintergrundbilder?
Dann heißt dein Zauberwort :first-child und :last-child

[immerIch]

Welche Browser möchtest du bedienen?
Wenn du auf alte Browser (IE < 9) pfeiffst, kannst du CSS3 verwenden -> border-radius

[ChrisKam]

^ das was immerIch gesagt hat.

Und bei Bedarf lässt sich Support für sowas wie last-child auch nachfüllen mittels Javascript. Für Selektoren wie first-child usw. z.B. mit http://selectivizr.com/

Ich finde das eine wesentlich elegantere Lösung als CSS-Hacks und Extrawürste für den IE.

Im Übrigen: Die meisten nicht-Standard Menüsystem für Joomla (z.B. Megamenu) fügen dem ersten und letzten Element automatisch eine entspr. Klasse hinzu. Das ließe sich natürlich auch in das Standardmenü reinbasteln. Ich habe schon lange nicht mehr in die Quelldateien reingeschaut, weiß aber noch von 1.5 dass das Menü dort ziemlich verstreut war (über einige Klassen kreuz und quer eingebundene Dateien). Diese Möglichkeit bietet sich also nur an, wenn man sich ein wenig mit Joomla-Templates auf der Quellebene auskennt.

[-Tom-Tom-]

[Alex]

je nachdem wie Browserkompatibel du arbeiten willst empfiehlt es sich (leider) statt :first-child und :last-child das template so an zu passen, dass dem ersten und letzten element eine jeweilige klasse gegeben wird.

Ohne jetzt nachgeschaut zu haben meine ich dass ab ie7 und abwärts die pseudoklassen nicht funktionieren.

[top]

Müsste mal wieder mit neuen Browsern gefüttert werden, aber bei den alten ändert sich ja nichts mehr:
http://www.css4you.de/browsercomp.html/standardbrowser/

:first-child geht ab IE7
und
:last-child will selbst der IE8 nicht verstehen

Ich würde dir daher empfehlen die Trennlinie mitsamt Streifenmuster dem li mit background: ... left top; zu setzen und beim ersten li mit :first-child die Trennlinie mit einer abgerundeten Version zu überschreiben.

Den runden Abschluss unten unten könntest du dann dem ul verpassen ( inclusive padding-bottom: 4px; )

Also etwa so:

[-Tom-Tom-]

Danke für eure Antworten,

mein Vorgehen hab ich grad nochmal komplett übern haufen geschmissen, da die (halb)Transparenten PNG-Grafiken die Ladezeiten einfach extrem in die Länge ziehn.
Hatte 6 Grafiken:
- Anfangsbutton oben mit Rundung + Hover
- Button mittig + Hover
- Abschlussbutton unten mit Rundung + Hover

Wie würdet ihr das Ganze am Einfachsten realisieren?
Komplett mit CSS?

Oder einfach mit DIVs?:
Rundung oben, Mitte mit einer 1px hohen (transparenten Grafik, dass die Hintergrundstruktur durchscheint) auffüllen, Rundung unten
Und die Buttons dann nur noch die Grafik mit dem Strich zur unterteilung laden?
Hier häng ich nur an zwei Punkten:
Der letzte Button braucht ja keine Unterteilung mehr, wie mach ich's hier?
Der obere und unterste Button soll nicht unbedingt höher werden als die mittleren, wenn ich aber mit den Rundungen oben und unten als Grafik arbeite, ist das doch der fall ..

Wie würdet ihr das angehen?
Javaskript kann ich nicht und hab auch grad nicht die Zeit zu lernen