Der folgende Beitrag wurde am 23. 05. 2008, 21:32 Uhr von maggie veröffentlicht.
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
Der folgende Beitrag wurde am 23. 05. 2008, 21:38 Uhr von Beat veröffentlicht.
> 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
--
Selber klauen ist schöner!
Der folgende Beitrag wurde am 23. 05. 2008, 22:14 Uhr von maggie veröffentlicht.
> > 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
Der folgende Beitrag wurde am 23. 05. 2008, 22:30 Uhr von Beat veröffentlicht.
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
--
Selber klauen ist schöner!
Der folgende Beitrag wurde am 23. 05. 2008, 23:24 Uhr von maggie veröffentlicht.
> 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
Der folgende Beitrag wurde am 23. 05. 2008, 23:33 Uhr von Beat veröffentlicht.
> 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
--
Selber klauen ist schöner!
Der folgende Beitrag wurde am 23. 05. 2008, 23:48 Uhr von maggie veröffentlicht.
> > 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
Der folgende Beitrag wurde am 23. 05. 2008, 23:55 Uhr von Beat veröffentlicht.
> 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
--
Selber klauen ist schöner!
Der folgende Beitrag wurde am 24. 05. 2008, 00:00 Uhr von maggie veröffentlicht.
> > .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
Der folgende Beitrag wurde am 24. 05. 2008, 00:13 Uhr von Beat veröffentlicht.
> 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
--
Selber klauen ist schöner!
Der folgende Beitrag wurde am 24. 05. 2008, 09:59 Uhr von maggie veröffentlicht.
> 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
Der folgende Beitrag wurde am 24. 05. 2008, 10:20 Uhr von Beat veröffentlicht.
> 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
--
Selber klauen ist schöner!
Der folgende Beitrag wurde am 24. 05. 2008, 10:33 Uhr von maggie veröffentlicht.
> 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
Der folgende Beitrag wurde am 24. 05. 2008, 10:54 Uhr von Ingo Turski veröffentlicht.
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 auchmoduletable-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
--
[barrierefreie Ingo Webdesign » Suchmaschinenoptimierung | em? | IE7 - Bugs]
Der folgende Beitrag wurde am 23. 05. 2008, 23:30 Uhr von maggie veröffentlicht.
> 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
© 1998-2013 SELFHTMLImpressumSoftware: Classic Forum 3.4