Grafik bei a:hover verschiebt den Menüpunkt

[maggie]

Hallo,
bei einem Listenmenü möchte ich bei 'hover' und 'activ' ein Bild vor dem Menüpunkt anzeigen lassen. Dabei soll der Menütext um die Bildbreite nach re. versetzt erscheinen.
Bei diesen Styleangaben wird das unter dem Menütext.

.nav li a:hover {
background-image:url(../images/pfeil.gif);
background-position:center left;
background-repeat:no-repeat;
...

Text-align: center;
ist zuviel nach re. versetzt

Danke für Eure Hilfe.
Gruß
Maggie

[Beat]

bei einem Listenmenü möchte ich bei 'hover' und 'activ' ein Bild vor dem Menüpunkt anzeigen lassen. Dabei soll der Menütext um die Bildbreite nach re. versetzt erscheinen.

Du meinst also: list-style-image: url();

Andernfalls du ganz grauenhaft die text-indent, padding und margin parameter manipulieren musst.

mfg Beat nature

[maggie]

bei einem Listenmenü möchte ich bei 'hover' und 'activ' ein Bild vor dem Menüpunkt anzeigen lassen. Dabei soll der Menütext um die Bildbreite nach re. versetzt erscheinen.

Du meinst also: list-style-image: url();

Andernfalls du ganz grauenhaft die text-indent, padding und margin parameter manipulieren musst.

mfg Beat nature

Hi, mit
list-style-image: url(../images/pfeil.gif);
wird das Bild nicht angezeigt.
Ist es richtig, dass ich diese Anweisung auf mein
.nav li a:hover {
anwenden kann?
Gruß
Maggie

[Beat]

Sorry bin mal wieder Betriebsblind.

Li war der von mir vermutete Kontext.
Aber offensichtlich war hier meine Annahme falsch.

Willst du MSIE6 einkalkulieren, dann ist dein Ansatz mit a:hover richtig.

Ergo musst du in diesem Fall mit background-image für das a Element arbeiten
Den entsprechenden Platz für das Bild kannst du dem a durch ein padding-left:2em (oder was passt) geben, während text-align ganz einfach left bleibt darf.

mfg Beat

[maggie]

Ergo musst du in diesem Fall mit background-image für das a Element arbeiten
Den entsprechenden Platz für das Bild kannst du dem a durch ein padding-left:2em (oder was passt) geben, während text-align ganz einfach left bleibt darf.

mfg Beat

Danke.
Ich wollte allerdings, dass der Menütext sich erst nach :hover um die Bildbreite nach re. verschiebt und nicht gleich eingerückt da steht.
Gibt es da noch eine Möglichkeit das hinzubekommen?

Gruß
Maggie

[Beat]

Ich wollte allerdings, dass der Menütext sich erst nach :hover um die Bildbreite nach re. verschiebt und nicht gleich eingerückt da steht.
Gibt es da noch eine Möglichkeit das hinzubekommen?

ja, du musst das padding einfach für die verschiedenen Zustände gesondert definieren

a{ padding:left:0em; }
a:hover{ padding:left:2em; }

mfg Beat

[maggie]

Ich wollte allerdings, dass der Menütext sich erst nach :hover um die Bildbreite nach re. verschiebt und nicht gleich eingerückt da steht.
Gibt es da noch eine Möglichkeit das hinzubekommen?

ja, du musst das padding einfach für die verschiedenen Zustände gesondert definieren

a{ padding:left:0em; }
a:hover{ padding:left:2em; }

mfg Beat

Hi, jetzt hab ich noch ein Problem :-(
Wenn ich die Anweisungen für hover und active getrennt angebe, wird bei Mousbewegung über den aktiven Link nochmal das Bild gezeigt und auch verschoben.
.moduletable-nav li a:hover {
}
.moduletable-nav li.active {
}
Wie muss ich die beiden Anweisungen richtig in einer Anweisung zusammenfassen?
.moduletable-nav li a:hover, li.active {
oder
.moduletable-nav li a:hover, .moduletable-nav li.active  {
Diese Anweisungen sind nicht richtig :-(

Danke für nochmalige Hilfe.
Gruß
Maggie

[Beat]

Wie muss ich die beiden Anweisungen richtig in einer Anweisung zusammenfassen?
.moduletable-nav li a:hover, li.active {

nein
li.active ist <li class="active">

oder
.moduletable-nav li a:hover, .moduletable-nav li.active  {

^^
ditto

du meinst wohl
.moduletable-nav li a:active

mfg Beat

[maggie]

.moduletable-nav li a:hover, li.active {
nein
li.active ist <li class="active">

oder
.moduletable-nav li a:hover, .moduletable-nav li.active  {
                                                  ^^
ditto

du meinst wohl
.moduletable-nav li a:active

mfg Beat

Das li.active ist ein spezielles Joomla!1.5 Tag mit a:active wird der aktive Link nicht gekennzeichnet.

Gruß
Maggie

[Beat]

Das li.active ist ein spezielles Joomla!1.5 Tag mit a:active wird der aktive Link nicht gekennzeichnet.

wenn du das hast
<li class=active><a ...>Link</a></li>

dann muss ich du enttäsuchen.
Du kannst ein äusseres Element (li) nicht in Abhängigkeit eines inneren Elements (a) mit CSS formatieren.
Hier brauchst du Schützenhilfe durch Javascript.

Wenn du sagst
li.active, li.active a:hover { ... }
dann wird sich li ganz einfach statisch verhalten.

Wenn du sagst:
li.active:hover , li.active a:hover { ... }
dann könnte es gehen. Das ist aber abhängig von verschiedenen Faktoren. MSIE6 kennt kein li:hover.

mfg Beat

[maggie]

Wenn du sagst:
li.active:hover , li.active a:hover { ... }
dann könnte es gehen. Das ist aber abhängig von verschiedenen Faktoren. MSIE6 kennt kein li:hover.

mfg Beat

Hi Beat,
schwierig, es funktioniert so nicht. Vermutl. muss ich für 'hover' und 'active' unterschiedl. Markierungen finden, die gut zusammen passen.
Danke für die gute Hilfe.

Mit Stylesheets habe ich noch Probleme vor allem mit der richtigen Schreibweise bei Kombination mehrerer Elemente. Kannst Du mir ein gutes Tutorial empfehlen?

Gruß
Maggie

[Beat]

Mit Stylesheets habe ich noch Probleme vor allem mit der richtigen Schreibweise bei Kombination mehrerer Elemente. Kannst Du mir ein gutes Tutorial empfehlen?

Da du joomla voraussetzt für deinen Code: Nein. Richte dich an die Anwender dieses CMS.

mfg Beat

[maggie]

Da du joomla voraussetzt für deinen Code: Nein. Richte dich an die Anwender dieses CMS.

mfg Beat

...es geht mir allgemein um Stylesheet-Angaben.
Gruß, Maggie

[Ingo Turski]

Hi,

Wenn ich die Anweisungen für hover und active getrennt angebe, wird bei Mousbewegung über den aktiven Link nochmal das Bild gezeigt und auch verschoben.
.moduletable-nav li a:hover {
}

Du möchtest also den Link formatieren...

.moduletable-nav li.active {
}

und hier aber das Listenelement? Das dürfte wohl - je nach HTML - kaum das gewünschte Resultat bringen. Ein sinnvolles Markup wird aber nicht nur den aktuellen Listenpunkt klassifizieren, sondern den Linktext auch hier in ein Element setzen, z.B.
<li class="active"><em>Linktext</em></li>
Wenn dem so ist, kannst Du auch
moduletable-nav li a:hover, .moduletable-nav li.active em {}
selektieren.

nebenbei bemerkt:

.moduletable-nav li a:hover, li.active {
oder
.moduletable-nav li a:hover, .moduletable-nav li.active  {

im ersten Fall selektierst Du *alle* li class=active und im zweiten nur die, die in .moduletable-nav enthalten sind.
Das dürfte zwar hier keinen Unterschied machen, aber es wird häufig z.B. ein Fehler dieser Art gemacht:
#nav a:link, a:visited {}
wobei man sich dann wundert, wieso alle besuchten Links innerhalb der Seite betroffen sind...

freundliche Grüße
Ingo

[maggie]

Sorry bin mal wieder Betriebsblind.

Li war der von mir vermutete Kontext.
Aber offensichtlich war hier meine Annahme falsch.

Willst du MSIE6 einkalkulieren, dann ist dein Ansatz mit a:hover richtig.

Ergo musst du in diesem Fall mit background-image für das a Element arbeiten
Den entsprechenden Platz für das Bild kannst du dem a durch ein padding-left:2em (oder was passt) geben, während text-align ganz einfach left bleibt darf.

mfg Beat

Bitte Entschuldige!
Deine Antwort war super richtig!! Danke!!
Ich hab bei a Element schon den großen Abstand wie beim a:hover gewählt und das war natürlich falsch.
Jetzt klappt es bestens.
Gruß
Maggie