Link mit text und Bild

[Bauer]

Hallo - noch jemand hier... 8)

ich bin gerade dabei eine neue Seite zu entwickeln.
Dabei möchte ich ein Menü haben, bei dem vor jedem Begriff eine Symbol dargestellt wird. Z.B. ein Stern.

Standardmäßig soll der Stern und auch der Menüpunkt in weißer Schriftfarbe dargestellt werden. Wenn der User jedoch ein onmouseover macht, soll sowohl der Stern, als auch der Schriftzug in rot dargestellt werden.

Wie kann ich das jetzt am besten umsetzten?

Ursprünglich habe ich den Stern in einem eigenem Div-Container und den Menünamen direkt daneben in einem weiteren Div-Container platziert.
Das geht so aber ja nicht - denke ich mal.

Vielen Dank für hilfreiche Tipps ;)

cu

[ChrisB]

Hi,

Dabei möchte ich ein Menü haben, bei dem vor jedem Begriff eine Symbol dargestellt wird. Z.B. ein Stern.

Standardmäßig soll der Stern und auch der Menüpunkt in weißer Schriftfarbe dargestellt werden. Wenn der User jedoch ein onmouseover macht, soll sowohl der Stern, als auch der Schriftzug in rot dargestellt werden.

Wie kann ich das jetzt am besten umsetzten?

Mit einer vernünftigen HTML-Struktur – Navigation als Liste von Links – und den Symbolen als Hintergrundbildern.
Wechsel der Farbe des Symbols bei :hover mit einem CSS-Sprite.

MfG ChrisB

[Bauer]

Hallo ChrisB

Mit einer vernünftigen HTML-Struktur – Navigation als Liste von Links – und den Symbolen als Hintergrundbildern.
Wechsel der Farbe des Symbols bei :hover mit einem CSS-Sprite.

Da brauche ich jetzt leider doch nochmal Hilfe.

Mit Deinem Hinweis auf eine Navigations-Liste klappt alles wunderbar.
Auch habe ich es geschafft, dass sich der Hintergrund (das Symbol) farblich verändert.

Das kleine Problem ist aber nun, dass die verschiedenen Menütitel unterschieldich lang sind und somit das ganze links-bündig positioniert werden muss.
Dann schieben sich die Titel jedoch über das Symbol, welches ebenfalls links positioniert ist. Mit einem margin-left bekomme ich zwar den Text wieder weiter nach rechts verschoben, sodass mein Symbol wieder "alleine" da steht, jedoch verschiebe ich somit auch meinen Linkebereich (<a...>). Das hat den ganz klaren Nachteil, dass ich mit der Maus über meine Symbole "fahren" kann, diese sich auch fleißig farblich verändern jedoch dort kein Link zu finden ist, weil der ja nun um x pixel nach rechts verschoben wurde...

Das ganze sieht in meiner CSS jetzt so aus:

ul#Navigation li
   {
   list-style: none;
   padding:0;
   height:40px;
   background-color:black;
   background-image:url(../gfx/star_white_mini.gif);
   background-repeat:no-repeat;
   }
ul#Navigation li:hover
   {
   list-style: none;
   padding:0;
   height:40px;
   background-image:url(../gfx/star_red_mini.gif);
   background-repeat:no-repeat;
   }

ul#Navigation a
   {
   height:100%;
   display:block;
   padding:0;
   margin-left:35px;
   font-size:20px;
   text-decoration:none;
   font-weight:bold;
   line-height:200%;
   color:white;
   }
ul#Navigation a:hover
   {
   height:100%;
   margin-left:35px;
   padding: 0;
   font-size:20px;
   text-decoration:none;
   font-weight:bold;
   line-height:200%;
   color:red;
   }

Habe ich da einen falschen Ansatz gewählt oder fehlt mir da noch ein funken Wissen?

Besten Dank

[Rainer]

Nimm für den Link <a> padding statt margin.

Gruß Rainer

[misterunknown]

Moin,

Standardmäßig soll der Stern und auch der Menüpunkt in weißer Schriftfarbe dargestellt werden. Wenn der User jedoch ein onmouseover macht, soll sowohl der Stern, als auch der Schriftzug in rot dargestellt werden.
Wie kann ich das jetzt am besten umsetzten?

Ich weiß nicht, ob ich das jetzt so korrekt verstanden habe, aber ich würde, genau wie ChrisB, eine Liste definieren, <http://de.selfhtml.org/css/eigenschaften/listen.htm#list_style_image@title=mit eigener Bullet-Grafik>. Mit der Pseudoklasse :hover kannst du dann sowohl eine andere Grafik als auch eine andere Schriftfarbe für das entsprechende Listenelement definieren.

Grüße Marco

[Matthias Apsel]

Om nah hoo pez nyeetz, misterunknown!

Ich weiß nicht, ob ich das jetzt so korrekt verstanden habe, aber ich würde, genau wie ChrisB, eine Liste definieren, <http://de.selfhtml.org/css/eigenschaften/listen.htm#list_style_image@title=mit eigener Bullet-Grafik>. Mit der Pseudoklasse :hover kannst du dann sowohl eine andere Grafik als auch eine andere Schriftfarbe für das entsprechende Listenelement definieren.

oder ohne list-style-image, dafür mit einer Hintergrundgrafik, die per :hover lediglich verschoben wird.

Matthias

[misterunknown]

Moin,

oder ohne list-style-image, dafür mit einer Hintergrundgrafik, die per :hover lediglich verschoben wird.

Auch eine Möglichkeit. Ist diese Lösung performanter? Theoretisch sollte die zweite Grafik ja im Cache gehalten werden, oder?

Grüße Marco

[Matthias Apsel]

Om nah hoo pez nyeetz, misterunknown!

Auch eine Möglichkeit. Ist diese Lösung performanter? Theoretisch sollte die zweite Grafik ja im Cache gehalten werden, oder?

Es wird auf jeden Fall nur eine Grafik angefordert.

Anderenfalls geht mMn trotzdem jedesmal eine Anfrage nach der Grafik raus (oder zuerst zum Cache). Die spart man dann.

Matthias