CSS-Menü mit dehnbarer Hintergrundgrafik

Hallo,

ich suche jemanden der mir bei einem CSS-Menü helfen kann. Das ganze eilt leider sehr und ich komm nicht weiter.
Es handelt sich um eine horizontale Liste mit einer Hintergrundgrafik. Diese ist in zwei Teile geteilt, und der rechte, grössere Teil soll sich dehnen/verkleinern falls sich der Name des Links verlängert/verkürzt. In dem grösseren Teil ist noch ein Verlauf (links und rechts aussen blau, in der mitte weiss) drin.
Der Aufbau steht soweit, nur komm ich einfach nicht dahinter wie es funktioniert das sich der Hintergund anpasst und der Verlauf nicht abgeschnitten aussieht.

Ich wäre sehr dankbar wenn sich jemand meldet! Schick die Daten dann per mail zu...

Danke+vg

Sandra

Hallo Sandra,

falls ich das Problem richtig nachvollzogen habe, solltest das Menü in zwei ineinanderliegende divs legen und dem einen die eine Hintergrundgrafik „right“ und dem anderen die Grafik „left“ – jeweils „no-repeat“ – mitgeben. Der Hintergrund müsste hierzu natürlich entsprechend in zwei Grafiken aufgeteilt werden. So lassen sich die Hintergründe ineinander verschieben und sind damit in ihrer Größe veränderlich.

auf die art und weise steht das, aber irgendwie ist da der haken drin. ich vermute fast das es durch den verlauf immer irgendwie so vergrössert/verkleinert wird das es nicht wirklich passt.
das ist etwas blöd zu beschreiben, am Besten man sieht sich das ganze mal an...bevor ich hier versuche das zu umschreiben und dann doch keiner versteht was genau nicht stimmt 😉 )

das ist etwas blöd zu beschreiben, am Besten man sieht sich das
ganze mal an...bevor ich hier versuche das zu umschreiben und
dann doch keiner versteht was genau nicht stimmt 😉 )

Ich guck’s mir gern an. Stell doch mal die URL hier rein.

www.sand-fuchs.de

danke! 😀

Hallo Sandra,

ich würde die jetzt transparenten Rundungen von navi_mb_links.gif und navi_mb_rechts.gif deckend im Hintergrund-Grau machen und dann dem a das Dunkelblau als Hintergrundfarbe mitgeben, dann entsteht keine Lücke, da sie ja von der Hintergrundfarbe gefüllt wird.

Das Problem mit dem Verlauf lässt sich in Kombination mit den runden Ecken nur über ein drittes Element mit zentriertem Hintergrund lösen. (Allerdings würde ich den Verlauf ohnehin weglassen.)

hm, den verlauf bräuchte ich aber. weil wie man sieht, verändert sich der verlauf farblich mitm mauszeiger...
das ganze menü soll anschliessend auch in ein layout eingebaut werden. dieses mach ich nur damit ichs mal hinbekomme. hinter den buttons ist dann eine rote fläche.

keine andere idee sonst?

Na, dann kommt der dritte Hintergrund ins Spiel, ungefähr so:

#navigation a { background: url (linke_rundung) #dunkelblau left top no-repeat }
#navigation a span { background: url (rechte_rundung) right top no-repeat }
#navigation a span span { background: url (verlauf) center bottom no-repeat }

<div id=„navigation“>
...
<a><span><span>seeeehr langer link</span></span></a>
...
</div>