Ich bin gerade dabei ein kleines Navigationsmenü für 'ne Webseite zu basteln. Das ganze ist recht spartanisch. Die Links liegen auf einem Farbverlauf.
Das aktuelle Element soll gesondert ausgezeichnet werden, genau so wie die anderen, wenn der Cursor über ihnen liegt. In diesem Fall soll der Farbverlauf etwa "wachsen". Siehe hier:
Das Problem ist nun, dass der Übergang doch recht unschön ist. Ich hätte gerne eine Unterbrechung der Linie oder ähnliches.
Ich dachte daran, Pseudo-div Elemente zu platzieren:
und denen im stylesheet dann die Übergänge zu zu weisen. (Die Bilder von oben werden also in 3 Teile geteilt.)
Aber wie kriege ich dann den gleichen Effekt beim mouse over hin?
Ich kann ja lediglich das Link-Element beeinflussen und nicht die benachbarten divs, die nicht von der Maus berührt werden.
Gibt es eine Möglichkeit sowas via CSS zu realisieren?
Aber wenn ich das Hintergrundbild einfach austausche muss ich doch wissen, wie groß das Listenelement ist. Ein einfaches repeat-x würde ja immer wieder die Übergänge wiederholen/wie kriege ich denn die Übergänge da rein?
Da hast du wohl recht, allerdings sind die DIV's trotzdem überflüssig:
Leg einfach 2 Bilder an. Eines enthält den linken Teil (dieses machst du z.B. 200px breit, länger sollte ein Menüpunkt eh nicht sein) und eines das den rechten Teil enthält (dieses machst du nur so breit wie die schwarze Fläche).
So ließen sich in Verbindung mit einem padding zum Beispiel auch Runde Ecken oder Verläufe an den Rändern umsetzen.
Es wäre natürlich auch mit deinen beiden DIVs möglich, aber das Markup sollte eigentlich auch wirklich nur aus solchen bestehen. Schon allein aus Gründen der Barrierefreiheit.
Ehrlich gesagt bin ich nun doch wieder verwirrt Vielleicht kannst du am Minimalbeispiel einmal eben zeigen wie du dir das gedacht hast? ( bzw. vielleicht hab ich mich falsch ausgedrückt. Aber so hab ich es momentan gelöst).
Weeeeee, das sieht doch geil aus. Die Übergänge etc. kann ich noch anpassen. Ob ich da tatsächlich ne Lücke haben will oder doch was anderes kann ich mir dann ja überlegen
Werde mir das morgen nochmal zu Gemüte führen und versuchen zu verinnerlichen.
Anscheinend ist der "Trick", dass bg_ul_head_li_hover.png, obwohl es "zu groß" ist, nicht über die Box heraus angezeigt wird. Und bg_ul_head_li_hover_a.png als "Begrenzung" wirkt.
Macht wahrscheinlich gar keinen Sinn was ich schreibe sobald man es verstanden hat. Ich hatte dieses Verhalten aber nicht vermutet/konnte mir nicht vorstellen, dass dies funktioniert.
Deswegen war das Beispiel echt hilfreich!
Anscheinend ist der "Trick", dass bg_ul_head_li_hover.png, obwohl es "zu groß" ist, nicht über die Box heraus angezeigt wird. Und bg_ul_head_li_hover_a.png als "Begrenzung" wirkt.
...
Wat?
Nein ... Hintergrundbilder gelten nur soweit wie die Box groß ist der sie zugewiesen wurden. Und die andere Grafik liegt einfach darüber so das die darunter liegende Grafik verdeckt wird.