nicht angemeldet
Der Martin
MudGuard
Matthias Apsel
Der Martin
MudGuard
Gunnar Bittersmann
MudGuard
Hallo, ein horizontales Menü - Liste ul/li - soll z.T. Untermenüpunkte erhalten, die dann in der 'li' wieder als ul/li gespeichert werden.
Mit ~~~css
.joomla-nav a:focus, a:hover, a:active {
display:block;}
ul.joomla-nav li ul {
display:none;}
Bei mouse-event soll das Untermenü gezeigt werden. Ich weiß nicht, warum es mit den angegebene CSS nicht klappt.
Kann mir jemand auf die Sprünge helfen?
Danke.
Maggie
Hi,
Mit ~~~css
.joomla-nav a:focus, a:hover, a:active {
display:block;}
ul.joomla-nav li ul {
display:none;}
> Bei mouse-event soll das Untermenü gezeigt werden. Ich weiß nicht, warum es mit den angegebene CSS nicht klappt.
ohne das zugrundeliegende HTML ist der CSS-Code nahezu wertlos. Aber nur fast. ;-)
Ich gehe mal davon aus, dass die jeweiligen Links (a-Elemente) Nachfahren eines li- und ul-Elements sind. Und wie soll bitte ein a-Element eingeblendet werden, wenn dessen Elternelement permanent ausgeblendet ist?
So long,
Martin
--
Ein Ehepaar beim Sex. Sie fragt ihn: "Woran denkst du gerade?" - Er antwortet: "Kennste sowieso nicht."
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
Hi,
die verschachtelte ul/li soll nur dann erscheinen (und zwar unterhalb des horzintal angeordneten Menüs - also aufklappen) wenn dieser Menüpunkt angesprochen wird (per Maus oder per Startlink gleich auf diesen Menüpunkt: Untermenüpunkte unsichtbar
ul.joomla-nav li ul {
display:none;
um diese Menüpunkte wieder sichtbar zu machen habe ich nun folgendes versucht:
ul.joomla-nav li ul a:hover a:focus a:active {
display:block;
:-(
Hier das HTML:
<ul class="joomla-nav mainmenu">
<li id="current" class="selected parent item464">
<a class=" main" href="/joomla/index.php/name1">name1</a>
<ul>
<li class="item473">
<li class="item474">
<li class="item475">
<li class="item476">
</ul>
</li>
<li class="item477">
<a class=" main" href="/joomla/index.php/name2">name2</a>
</li>
</ul>
ul.joomla-nav li ul a:hover a:focus a:active {
display:block;
>
> :-(
gibt es diese Verschachtelung, also ein aktiver Link innerhalb eines fokussierten Links innerhalb eines gehoverten Links in der untergeordneten Liste? Sicher nicht! Wahrscheinlich meinst du:
~~~css
ul.joomla-nav li ul a:hover, ul.joomla-nav li ul a:focus, ul.joomla-nav li ul a:active {
display:block;
ul.joomla-nav li ul a:hover, ul.joomla-nav li ul a:focus, ul.joomla-nav li ul a:active {
display:block;
Jo, so dachte ich's und wollte abkürzen :-(
Hm, aber wo habe ich noch so einen 'peinlichen' Fehler drin?
Hi,
ul.joomla-nav li ul a:hover a:focus a:active {
a-Elemente dürfen nicht verschachtelt werden. Der Selector kann also niemals zutreffen, da niemals ein a:active innerhalb eines a:focus vorkommen kann (und ein a:focus niemals innnerhalb von a:hover).
Hier das HTML:
<ul class="joomla-nav mainmenu">
<li id="current" class="selected parent item464">
<a class=" main" href="/joomla/index.php/name1">name1</a><ul>
<li class="item473">
<li class="item474">
<li class="item475">
<li class="item476">
</ul>
</li><li class="item477">
<a class=" main" href="/joomla/index.php/name2">name2</a>
</li></ul>
Da sind einige Elemente nicht korrekt geschlossen. Das solltest Du erstmal reparieren.
cu,
Andreas
--
[Warum nennt sich Andreas hier MudGuard?](http://MudGuard.de/)
[O o ostern ...](http://ostereier.andreas-waechter.de/)
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
Hi,
ul.joomla-nav li ul a:hover a:focus a:active {a-Elemente dürfen nicht verschachtelt werden. Der Selector kann also niemals zutreffen, da niemals ein a:active innerhalb eines a:focus vorkommen kann (und ein a:focus niemals innnerhalb von a:hover).
Hier das HTML:
<ul class="joomla-nav mainmenu">
<li id="current" class="selected parent item464">
<a class=" main" href="/joomla/index.php/name1">name1</a><ul>
<li class="item473">
<li class="item474">
<li class="item475">
<li class="item476">
</ul>
</li><li class="item477">
<a class=" main" href="/joomla/index.php/name2">name2</a>
</li></ul>
>
> Da sind einige Elemente nicht korrekt geschlossen. Das solltest Du erstmal reparieren.
>
> cu,
> Andreas
Danke, ja die Listelemente sind geschlossen, das habe ich beim Kopieren vergessen.
die Angaben für den Aufruf der Unternavi. habe ich nun vervollständigt -
~~~css
ul.joomla-nav main li ul a:hover,
ul.joomla-nav main li ul a:focus,
ul.joomla-nav main li ul a:active {
display:block;}
aber irgendwas ist noch unkorrekt, denn das gewünschte Aufklappen erfolgt nicht.
Maggie
Om nah hoo pez nyeetz, maggie!
aber irgendwas ist noch unkorrekt, denn das gewünschte Aufklappen erfolgt nicht.
Statt, dass du du hier bröckchenweise Änderungen und Kopierfehler zeigst, solltest du auf die Seite verlinken. So kann dir mit wesentlich höherer Effizienz geholfen werden.
Matthias
Om nah hoo pez nyeetz, maggie!
Link zur Ansicht
Gruß
Maggie
Hallo,
das kann doch nicht so schwer sein, oder?
Martin hat dir bereits einen, wenn nicht sogar den_entscheidenden_Hinweis gegeben und nochmals darauf geantwortet.
Du solltest dir bitte einmal genau angucken, welche Elemente immer sichtbar sind und welche Elemente nicht sichtbar sind. Dann überlegst du mal, bei welchen Elementen das Überfahren (hovern) mit dem Cursor dazu führen soll, dass und welche Elemente angezeigt werden sollen.
In deinen untergeordneten ULs gibt es aktuell gar keine Links (A Elemente). Schon alleine deswegen kann dein derzeitiger Ansatz ja nie klappen.
Was du willst ist, dass beim Überfahren der permanent sichtbaren Links (oder besser der LI-Elemente) eventuell vorhandene Kindelemente vom Typ UL angezeigt werden.
BTW: Solche Menüs sind millionenfach im Netz zu finden. Man könnte sich auch mal eine entsprechende Seite (oder gar ein Tutorial dazu) angucken! ;-)
Gruß Gunther
Hallo,
okay, 'display: none;' wird nun die 'ul' der Untermenüpunkte gesetzt
ul.joomla-nav mainmenu li ul {
display:none;
left: -0.4em;
margin-bottom: 0;
margin:0;
padding:0;
position: absolute;
}
und mit 'display: block;' will ich diese Untermenüpunkte, die nun auch richtig ein 'a' Element haben, nach unten sichtbar machen.
ul.joomla-nav mainmenu li ul a:hover,
ul.joomla-nav mainmenu li ul a:focus,
ul.joomla-nav mainmenu li ul a:active {
display:block;
left: -0.4em;
margin-bottom: 0;
margin:0;
padding:0;
position: absolute;
}
...ich kappiere wohl gar nichts :-( denn jetzt siehts so auch
> Hallo,
das kann doch nicht so schwer sein, oder?
Martin hat dir bereits einen, wenn nicht sogar den_entscheidenden_Hinweis gegeben und nochmals darauf geantwortet.Du solltest dir bitte einmal genau angucken, welche Elemente immer sichtbar sind und welche Elemente nicht sichtbar sind. Dann überlegst du mal, bei welchen Elementen das Überfahren (hovern) mit dem Cursor dazu führen soll, dass und welche Elemente angezeigt werden sollen.
In deinen untergeordneten ULs gibt es aktuell gar keine Links (A Elemente). Schon alleine deswegen kann dein derzeitiger Ansatz ja nie klappen.
Was du willst ist, dass beim Überfahren der permanent sichtbaren Links (oder besser der LI-Elemente) eventuell vorhandene Kindelemente vom Typ UL angezeigt werden.
BTW: Solche Menüs sind millionenfach im Netz zu finden. Man könnte sich auch mal eine entsprechende Seite (oder gar ein Tutorial dazu) angucken! ;-)
Gruß Gunther
Darf ich noch mal nerven?
Sind diese Überlegungen bzw. Umsetzungen falsch?
ul .joomla-nav mainmenu li
soll horizontal angezeigt werden
in dieser liste ist eine
ul .joomla-nav mainmenu li ul mit weiteren li punkten
diese li soll nur bei event angezeigt werden
ul .joomla-nav mainmenu li ul li
display: none
ul .joomla-nav mainmenu li ul li a: ...
dispaly: block
Danke fürs Anschauen und Rückmelden.
Maggie
Hallo,
Darf ich noch mal nerven?
versuch' doch! ;-)
in dieser liste ist eine
ul .joomla-nav mainmenu li ul mit weiteren li punkten
diese li soll nur bei event angezeigt werden
Ja, aber bei welchem Event bzw. auf welchem Element? Das ist der Knackpunkt!
ul .joomla-nav mainmenu li ul li
display: noneul .joomla-nav mainmenu li ul li a: ...
dispaly: block
Du sagst: Sobald eine Kanne auf dem Stövchen steht (hover), soll das Teelicht brennen.
Gleichzeitig nimmst du aber den ganzen Tisch aus dem Zimmer (display: none für die übergeordnete Liste).
Fällt dir der Widerspruch nicht auf?
Du musst also dafür sorgen, dass das ganze ausgeblendete ul-Element in der zweiten Ebene wieder eingeblendet wird. Beispielsweise beim Hovern über dem übergeordneten li. Nicht aber auf dem a-Element, denn das ist in dem Augenblick weg!
Ciao,
Martin
Hallo,
Darf ich noch mal nerven?
versuch' doch! ;-)
in dieser liste ist eine
ul .joomla-nav mainmenu li ul mit weiteren li punkten
diese li soll nur bei event angezeigt werdenJa, aber bei welchem Event bzw. auf welchem Element? Das ist der Knackpunkt!
ul .joomla-nav mainmenu li ul li
display: noneul .joomla-nav mainmenu li ul li a: ...
dispaly: blockDu sagst: Sobald eine Kanne auf dem Stövchen steht (hover), soll das Teelicht brennen.
Gleichzeitig nimmst du aber den ganzen Tisch aus dem Zimmer (display: none für die übergeordnete Liste).
Fällt dir der Widerspruch nicht auf?Du musst also dafür sorgen, dass das ganze ausgeblendete ul-Element in der zweiten Ebene wieder eingeblendet wird. Beispielsweise beim Hovern über dem übergeordneten li. Nicht aber auf dem a-Element, denn das ist in dem Augenblick weg!
Ciao,
Martin
Hallo Martin,
schöner kann man's nicht erklären - danke.
...aber ich beachte vermutl. die Schreibweise nicht, denn
/* zweite ebene der aufzählungsliste - wird ausgeblendet */
ul.joomla-nav mainmenu li ul {
display:none;
}
/* bei mouse events der ersten aufzählungsebene wird ausgeblendetes wieder eingebl.*/
ul.joomla-nav mainmenu li a:hover;{
display:block;
}
das Ausblenden funktioniert schon nicht.
:-( Maggie
Hi,
...aber ich beachte vermutl. die Schreibweise nicht, denn
[code lang=css]/* zweite ebene der aufzählungsliste - wird ausgeblendet */
ul.joomla-nav mainmenu li ul {
display:none;
}
Du wurdest doch schon mehrfach darauf hingewiesen, daß es kein mainmenu-Element gibt, und daß Du für einen Klassennamen nicht den Element-Selektor, sondern den Klassenselektor benutzen mußt.
cu,
Andreas
Hi,
...aber ich beachte vermutl. die Schreibweise nicht, denn
/* zweite ebene der aufzählungsliste - wird ausgeblendet */
ul.joomla-nav mainmenu li ul {
display:none;
}Du wurdest doch schon mehrfach darauf hingewiesen, daß es kein mainmenu-Element gibt, und daß Du für einen Klassennamen nicht den Element-Selektor, sondern den Klassenselektor benutzen mußt.
cu,
Andreas
Hi Andreas,
das Einblenden müsste jetzt doch mit
[code lang=css]/* bei mouse events der ersten aufzählungsebene wird ausgeblendetet wieder eingebl.*/
ul.joomla-nav li a:hover,
ul.joomla-nav li a:focus,
ul.joomla-nav li a:active {
display:block;}
funktionieren. Tut es aber nicht.
Maggie
Hallo, komme ohne Eure Hilfe nicht weiter und bitte deshalb um einen weiteren Blick auf die Styles.
Vielen Dank für Eure Mühe
Maggie
das Einblenden müsste jetzt doch mit
/* bei mouse events der ersten aufzählungsebene wird ausgeblendetet wieder eingebl.*/
ul.joomla-nav li a:hover,
ul.joomla-nav li a:focus,
ul.joomla-nav li a:active {
display:block;}
> funktionieren. Tut es aber nicht.
> Maggie
Om nah hoo pez nyeetz, maggie!
Hallo, komme ohne Eure Hilfe nicht weiter
Da du dich offensichtlich verrannt hast, beginnst du ganz von vorn: Mit einer validen Seite, die _nur_ das Menü enthält und _ohne_ CSS.
Matthias
Om nah hoo pez nyeetz, maggie!
Hallo, komme ohne Eure Hilfe nicht weiter
Da du dich offensichtlich verrannt hast, beginnst du ganz von vorn: Mit einer validen Seite, die _nur_ das Menü enthält und _ohne_ CSS.
Matthias
...habe endlich begriffen, dass die Pseudoklassen wie :hover auch für andere Elemente, außer 'a' eingesetzt werden können.
Eine gewaltige Basis-CSS Lücke ist nun bei mir geschlossen ;-)
Danke
[latex]Mae govannen![/latex]
ul .joomla-nav mainmenu li
soll horizontal angezeigt werdenin dieser liste ist eine
ul .joomla-nav mainmenu li ul mit weiteren li punkten
diese li soll nur bei event angezeigt werdenul .joomla-nav mainmenu li ul li
display: noneul .joomla-nav mainmenu li ul li a: ...
dispaly: block
Daß du main jetzt in mainmenu umbenannt hast, ändert nichts daran, daß weder das eine noch das andere _Element_ existiert. Du willst eine entsprechende _Klasse_ selektieren, kein _Element_. Also nutze den _Klassen_-Selektor statt des _Element_selektors.
Stur lächeln und winken, Männer!
Kai
[latex]Mae govannen![/latex]
ul.joomla-nav main li ul a:hover,
ul.joomla-nav main li ul a:focus,
ul.joomla-nav main li ul a:active {
display:block;}
Es gibt kein Element, das main heißt. du willst einen Klassen-Selektor.
Stur lächeln und winken, Männer!
Kai
--
Unsere Identität entnehmen Sie bitte dem beigefügten Auszug aus den Personenstandsbüchern. Gegen die Assimilierung in unser Kollektiv ist nach dem ABGB (§666, Abs. 3/IV) kein Rechtsmittel zulässig. Wir bitten um Ihr Verständnis.
[SelfHTML-Forum-Stylesheet](http://selfhtml.knrs.de/#h_stylesheet)
[latex]Mae govannen![/latex]
ul.joomla-nav main li ul a:hover,
ul.joomla-nav main li ul a:focus,
ul.joomla-nav main li ul a:active {
display:block;}
>
> Es gibt kein Element, das main heißt. du willst einen Klassen-Selektor.
>
> Stur lächeln und winken, Männer!
> Kai
...habe das 'main' `<a class=" main" href="www.selfhtml.org">Aufklappmenü</a>`{:.language-html}
[hier](http://www.formfalt.net/navitest.html)ergänzt.
Maggie
@@MudGuard:
nuqneH
Da sind einige Elemente nicht korrekt geschlossen. Das solltest Du erstmal reparieren.
Welche sollten das sein? </li>-Endtag ist optional.
Qapla'
Om nah hoo pez nyeetz, Gunnar Bittersmann!
</li>-Endtag ist optional.
kommt auf das X an.
Matthias
@@Matthias Apsel:
nuqneH
</li>-Endtag ist optional.kommt auf das X an.
Was du mir für ein U vormachen willst?
Manche Clients unterscheiden zwischen HTML mit und ohne X, andere nicht. Letztere sind in der Mehrheit.
Browser unterscheiden nicht zwischen text/html und text/html. Dem Tag-Soup-Parser ist es egal, ob optionale End-Tags da sind oder nicht, egal ob XHTML drübersteht oder nicht.
Darstellungsprobleme haben ihre Ursache nicht in weggelassenen </li>-Tags.
Qapla'
PS. Das soll jetzt nicht als Plädoyer fürs Weglassen optionaler Tags missverstanden werden. Ich plädiere für XML-Syntax. Auch bei HTML5.
Om nah hoo pez nyeetz, Gunnar Bittersmann!
Darstellungsprobleme haben ihre Ursache nicht in weggelassenen
</li>-Tags.
+1
PS. Das soll jetzt nicht als Plädoyer fürs Weglassen optionaler Tags missverstanden werden. Ich plädiere für XML-Syntax. Auch bei HTML5.
+1
Matthias
Hi,
Mit
.joomla-nav a:focus, a:hover, a:active {
Dir ist bewußt, daß damit alle a-Elemente bei hover und active betroffen sind, aber bei focus nur die innerhalb eines .joomla-nav?
cu,
Andreas
Mit ~~~css
.joomla-nav a:focus, a:hover, a:active {
display:block;}
ul.joomla-nav li ul {
display:none;}
vielelicht hilft es, wenn du die display-Eigenschaft jeweils denselben Elementen gibst. So ist jetzt die übergeordnete Liste immer unsichtbar, die darin enthaltenen Links sollen aber gelegentlich erscheinen. "Was tun?" wird sich der Browser fragen.
Hallo,
So ist jetzt die übergeordnete Liste immer unsichtbar, die darin enthaltenen Links sollen aber gelegentlich erscheinen.
darauf habe ich schon gestern abend hingewiesen.
"Was tun?" wird sich der Browser fragen.
Da gibt es nichts zu rätseln: Das Vorfahrenelement (die Liste) ist unsichtbar, damit auch alle seine Nachfahren. Ein :hover auf einem der Nachfahren kann also nie entreten. AFAIK werden auch :focus und :active nicht auf ausgeblendete Elemente angewendet, aber da bin ich mir nicht absolut sicher.
Ciao,
Martin