css background in mehreren Teilen

[YoshiGreen]

Aloas,

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:

Code:

<li>  <div id="pseudoL"></div>   <strong>Übersicht</strong> <div   id="pseudoR"></div> </li>

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?

Code:

#head ul a:hover, 
#head ul a:focus, 
#head ul a:active, 
#head ul strong { 
  background: url(img/focusMenu.png) 0px 10px repeat-x; 
}

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?

[Xardas der Dunkle]

Ich kann ja lediglich das Link-Element beeinflussen und nicht die benachbarten divs, die nicht von der Maus berührt werden.

...

In dem du das :hover dem li gibst.

Code:

#head ul li:hover {
    [...]
}

#head ul li:hover a {
    [...]
}

Allerdings verstehe ich nicht was du mit den div's vorhast, wieso tauscht du nicht einfach das Hintergrundbild aus?

[YoshiGreen]

Ah, die Idee klingt doch gar nicht so schlecht.

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?

[Xardas der Dunkle]

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).

Code:

#head ul li {
    background: url(bg_li.png) repeat-x top left;
}

#head ul li:hover {
    background: url(bg_li_hover.png) no-repeat top left;
}

#head ul li:hover a {
    background: url(bg_li_hover_a.png) no-repeat top right;
}

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.

[YoshiGreen]

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).

[Xardas der Dunkle]

Die Grafiken passen zwar nicht ganz ... in etwa aber so.

[YoshiGreen]

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!

Besten dank dafür!

[Xardas der Dunkle]

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.

[YoshiGreen]

So kann man es auch ausdrücken. Wie gesagt, wenn man es verstanden hat ist es einfach. Danke dafür, läuft wie ne Katze, die am Motorrad angebunden ist