Untermenü klappt nicht!
franzsen
Untermenü klappt nicht!
franzsen
Rolf B
Matthias Scharwies
Gunnar Bittersmann
Der MartinNach längerer Pause möchte ich HTML, insbesondere Navigation, auffrischen, bevor ich mit FlexBox bzw. Grid weitermache. Ich habe gerade ein Video von YouTube durchgearbeitet und habe das Problem, daß das erste Untermenü nicht an die gewünschte Stelle rückt. Dadurch erreiche ich auch die Untermenüs nicht. Habe mit dem Video sicher schon mehrmals verglichen aber finde keinen Fehler. Entweder übersehe ich etwas oder es liegt am Browser. Würde mir jemand kontrollieren wo der Fehler liegen könnte?
Arbeite mit Mac/Safari/Visual Studio Code Mit Visual Studio Code sehe ich gleichzeitig welche Wirkung eine Eingabe hat. An der Stelle, wo das Untermenü angepaßt wird, ändert sich nichts.
"https://www.youtube.com/watch?v=XDFyUPoak34"
<!--https://www.youtube.com/watch?v=XDFyUPoak34-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="Dropdown.css">
<title>Document</title>
</head>
<body>
<div id="container">
<ul>
<li>Home</li>
<li>Services
<ul>
<li>Web Design</li>
<li>Mobile App
<ul>
<li>iOS App</li>
<li>Android</li>
<li>Windows</li>
</ul>
</li>
<li>Advertising</li>
</ul>
</li>
<li>Blog</li>
<li>About US</li>
<li>Contact US</li>
</ul>
</div>
</body>
</html>
*{
margin: 0px;
padding: 0px;
}
body {
background-color: #5D6D7E;
margin-left: 250px;
margin-top: 20px;
}
#container ul{
list-style: none;
margin-left: 25px;
margin-top: 20px;
}
#container ul li{
background-color: #8E44AD;
width: 150px;
border: 1px solid white;
border-radius: 26px;
height: 50px;
line-height: 50px;
text-align: center;
float: left;
color: white;
font-size: 19px;
position: relative;
}
#container ul li:hover {
background-color: #85C1E9;
}
#container ul ul {
display: none;
}
#container ul li:hover > ul {
display: block;
}
#container ul ul ul {
margin-left: 150px;
top: 0px;
position: absolute;
}
-
Hallo franzsen,
ich muss mit der Standard-Antwort von Selfhtml für solche (Un-)Fälle anfangen: Dein Menü funktioniert nicht. Ich kann auf meiner Tastatur tippen wie ich will, da tut sich nichts.
- Damit meine ich:
- Ein reines CSS Menü ist rein mausbedienbar und damit nichts, was man seinen Besuchern zumuten darf. Bereits mit einem Touch-Gerät gibt's Probleme. Von Sprachassistenzsystemen reden wir gar nicht erst. Eine zugängliche Dropdown-Navigation ist bei uns im Wiki leider Baustelle, deshalb kann ich Dich dafür im Moment vor allen an Heydon Pickering und seine Inclusive Components verweisen, das ist allerdings ein ziemlich zäher Tobak weil er das Thema so richtig gründlich auf englisch durchdekliniert. Er hat aber zusammen mit Kitty Giraudel einen fertigen Baustein entwickelt. Guckst Du. Bedienbare, zugängliche Menüs sind leider nichts, was sich eben mal so erstellen lässt.
Wichtig ist, dass die Menü-Items Buttons sind, keine nackigen li Elemente. Andernfalls können sie nicht bedienbar interaktiv sein. Das Öffnen und Schließen muss dann mit JavaScript erfolgen.
Aber zum Einsteigen ins Thema bleiben wir erstmal bei deiner Frage´und einem CSS Menü. Abgesehen davon, dass mir dieses Video reichlich spanisch vorkommt (zumindest bietet Youtube mir an, spanische Untertitel automatisch zu erzeugen), hast Du nicht alles verglichen.
Das Problem ist der margin-top der
#container ulRegel, dadurch entstehen 20px frische Luft oberhalb von jedem ul in der Navigation, auch zwischen Hauptmenüpunkt und Untermenü und die genügen, um den :hover-Zustand zu beseitigen.Wenn Du eine CSS Eigenschaft setzen willst, die NUR für das oberste ul gilt, verwende nav > ul. Andernfalls gilt die Eigenschaft für jedes ul in der Navigation. Wenn es nur die zweite Ebene sein soll, verwende nav > ul > ul. Das > bewirkt, dass eine direkte Kindbeziehung bestehen muss. Ein Space heißt: beliebig weit entfernter Nachfahre.
Wenn Du einen Margin oberhalb deines Gesamtmenüs haben willst, setze den Margin auf das <nav>-Element, in das deine Navigation eingeschlossen gehört. Nicht in ein <div id="container">. Ein Megacontainer innerhalb des Body ist sowieso in den meisten Fällen unnötig.
Wenn Du tatsächlich etwas Abstand zwischen Hauptmenüpunkten und Aufklappmenü willst, gib dem Aufklappmenüs ein padding-top. Das Padding gehört zur Box des ul-Elements und da kannst Du drüber weg hovern. Das siehst Du auch, wenn Du den Seiteninspektor öffnest und für eins der li-Elemente der obersten Ebene den Hover-Schalter setzt (li zum aktuellen Element machen, rechts auf :hov klicken, :hover auswählen). Dann bleibt das Ausklappmenü offen und Du kannst analysieren, was da passiert.
Und vor allem: VERGISS PIXEL. Verwende relative Maße wie em, denn mit der px Angabe reagiert dein Menü nicht auf eine vom Benutzer eingestellte Änderung der Basisfontgröße.
Ein ordentliches Menü bekommst Du aber ohne JavaScript nicht hin. Tut mir leid.
Rolf
--
sumpsi - posui - obstruxi-
Hallo Rolf!
Die Übung hat sich rein an die Angaben des Autors gehalten. Nach und nach kommt die nächst Übung. Betreffend YouTube kann ich davon nichts feststellen.
Die margins bei "#container ul" machten tatsächlich die Probleme. Damit wäre das Problem gelöst. Wahrscheinlich habe ich darauf weniger geachtet weil ich konsequent das Video abgearbeitet habe. Mich wundert es, daß es im Video funktioniert. In der Regel verwende ich sowieso "nav". Ich verwende ebenso em, vm, etc.
--
LG Franz-
Servus!
Hallo Rolf!
Die Übung hat sich rein an die Angaben des Autors gehalten. Nach und nach kommt die nächst Übung. Betreffend YouTube kann ich davon nichts feststellen.
Die margins bei "#container ul" machten tatsächlich die Probleme. Damit wäre das Problem gelöst.
Nein, wie Rolf und ich sagten, sind da noch viele Fehler und Fallen versteckt.
In der Regel verwende ich sowieso "nav". Ich verwende ebenso em, vm, etc.
Gut, dann setz' das auch gleich in Deinen Versuchen ein - das Markup wirkt aufgeräumter und übersichtlicher.
Bitte lies und beachte die Tutorials!
Herzliche Grüße
Matthias Scharwies
--
Ich habe heute rausgefunden, dass in das Pizzafach meines Rucksacks auch ein Laptop passt! -
Hallo franzsen,
Mich wundert es, daß es im Video funktioniert.
Ich habe das Video im Schnelldurchlauf angeguckt. Ich habe nicht gesehen, dass dort für
#container ulein margin-top gesetzt wurde. Nur für den Body. Möglicherweise bist Du beim Übertragen in die falsche Regel gerutscht.Viel Erfolg weiterhin, und lass Dich von mir nicht abschrecken 😉
Rolf
--
sumpsi - posui - obstruxi-
Ich habe das Video im Schnelldurchlauf angeguckt. Ich habe nicht gesehen, dass dort für #container ul ein margin-top gesetzt wurde.
Naja. Nicht in der Konkretheit, die Du vielleicht erwartet hast...
Aber an Stelle 7:17 ist das hier erkennbar:
*{ margin: 0px; padding: 0px; }Das setzt mal eben jeden Margin für jedes Element auf Null. Also auch den
margin-topfür#container ul. Natürlich wieder mit der notlos-falschen Pixel-Angabe.Und das zeigt wieder auf, warum ich von der YouTube-Universität nichts halte: Es wird mehr oder weniger irgendetwas gemacht, das Ergebnis mutet mangels Erläuterung vollständig zufällig an.
Zu der anderen Frage: Man kann aus didaktischen Gründen auch in einer Übung eine nahe liegend scheinende, aber falsche „Lösung“ zeigen (nicht: lehren). Dies aber nur um sodann praktisch zu zeigen, wie sehr sich jemand in Sankt Petersburg freuen wird, wenn man Zeug, dass man in YouTube-Videos gesehen hatte, unüberlegt oder durch die „sportlichen“(¹) Behauptungen im Video dazu animiert, auf einem aktiven und erreichbaren Server übernimmt.
¹) Das ist ein Euphemismus. Scheinbar positive Darstellung von etwas Schlechtem.
-
Hallo Raketenwilli,
Nur kurz...
Das setzt mal eben jeden Margin für jedes Element auf Null. Also auch den margin-top für #container ul
Darf ich dich an die Spezifität (specificity) von Selektoren erinnern?
Rolf
--
sumpsi - posui - obstruxi-
Hm. Vermutlich reden wir aneinander vorbei…
Hallo Raketenwilli,
Nur kurz...
Das setzt mal eben jeden Margin für jedes Element auf Null. Also auch den margin-top für #container ul
Darf ich dich an die Spezifität (specificity) von Selektoren erinnern?
Klar. Aber warum? Der Youtuber hat keine spezifischeren Regeln gesetzt. Also liefert...
<!doctype html> <html lang="de-DE"></html> <head> <title>Test</title> <style> * { margin:0; padding:0; } ul { list-style: none; } </style> </head> <body> <h1>Test</h1> <p>Eine Liste:</p> <ul> <li>Foo</li> <li>Bar</li> </ul> </body> </html>wie erwartet:
-
Hallo Raketenwilli,
stimmt, der nicht. Aber franzsen…
Gut, dass wir drüber aneinander vorbei geredet haben 😉
Der Easy Tutor hätte auch gern einen Link in die Description setzen können, wo sein Ergebnis als Text steht, dann hätte ich das Video jetzt nicht nochmal überfliegen müssen.
Rolf
--
sumpsi - posui - obstruxi
-
-
-
-
-
-
@@Rolf B
- Damit meine ich:
- Ein reines CSS Menü ist rein mausbedienbar und damit nichts, was man seinen Besuchern zumuten darf. […] Ein ordentliches Menü bekommst Du aber ohne JavaScript nicht hin.
Damit meinst du: ein Aufklappmenü.
🖖 Живіть довго і процвітайте
--
„Ukončete, prosím, výstup a nástup, dveře se zavírají.“
-
Servus!
Nach längerer Pause möchte ich HTML, insbesondere Navigation, auffrischen, bevor ich mit FlexBox bzw. Grid weitermache. Ich habe gerade ein Video von YouTube durchgearbeitet
Gut, aber noch besser wären unsere Tutorials:
und habe das Problem, daß das erste Untermenü nicht an die gewünschte Stelle rückt. Dadurch erreiche ich auch die Untermenüs nicht.
Entweder übersehe ich etwas oder es liegt am Browser.
Ja und nein - am Browser liegt es 2023 fast nie mehr!
Bei mir tut's mausmäßig - aber da ist noch viel -auch Grundlegendes- zu verbessern. Bitte lies die Tutorials durch.
Herzliche Grüße
Matthias Scharwies
--
Ich habe heute rausgefunden, dass in das Pizzafach meines Rucksacks auch ein Laptop passt!-
Hallo Matthias,
Gut…
Nein, das Video ist nicht gut. Es ist Schlangenöl, das Ergebnis ist unbedienbar, unsemantisch, nicht responsiv und damit diskriminierend, und es verwendet Pixel statt relativer Maße. Brrrr.
Bei mir tut's mausmäßig
Du schaffst es, "Web Design" zu hovern?! Rrrrespekt, Herr Scharwies, dafür braucht's eine flinke Maus. Oder einen trägen Browser? 😉 Im FF schaffte ich das gelegentlich auch, in Chrome konnte ich zucken wie ich wollte, ging nicht.
Rolf
--
sumpsi - posui - obstruxi-
Servus!
Hallo Matthias,
Gut…
Nein, das Video ist nicht gut.
Darum geht es nicht - es geht drum den Nutzern leicht verständliche, sachliche Alternativen anzubieten, ohne ihnen gleich zu sagen, dass alles was sie bis jetzt getan haben, Blödsinn war.
aber noch besser wären unsere Tutorials:
Das ist jetzt die Chance von Grund auf richtig zu arbeiten.
Und by the way:
ist 90% fertig.
Im letzten Beispiel habe ich :hover ausgeschaltet - es ist aber mit der Tab-Taste benutzbar.
Da müsste jemand für einen Nachmittag noch ran. Bis Franzsen sich soweit vorgearbeitet hat, wäre das fertig!
Herzliche Grüße
Matthias Scharwies
--
Ich habe heute rausgefunden, dass in das Pizzafach meines Rucksacks auch ein Laptop passt!-
@@Matthias Scharwies
Nein, das Video ist nicht gut.
Darum geht es nicht - es geht drum den Nutzern leicht verständliche, sachliche Alternativen anzubieten
Ja, man darf seine Schüler am Anfang nicht überfordern. Aber etwas grundsätzlich Falsches zu lehren, weil es gerade leicht verständlich ist, macht ihr das in der Schule auch so?
🖖 Живіть довго і процвітайте
--
„Ukončete, prosím, výstup a nástup, dveře se zavírají.“-
Hallo Gunnar,
Aber etwas grundsätzlich Falsches zu lehren, weil es gerade leicht verständlich ist, macht ihr das in der Schule auch so?
zumindwst in meiner Grundschule hat man das damals tatsächlich gemacht. Ich weiß das konkrete Beispiel nicht mehr, aber es war mehrmals "kaputte" Grammatik m Deutschunterricht, die einfach der schwäbischen Umgangssprache entsprach.
Beim wiederholten Mal fühlte sich mein Vater doch genötigt, den Lehrer mal in der Sprechstunde zu besuchen und zur Rede zu stellen. Die Stellungnahme des Lehrers war in etwa: "Ha, so kennet se's halt, und wenn die Schüler später mal aufs Gymnasium gehn, dann lernet se's eh noch richtig."
Noch Fragen?
Einen schönen Tag noch
Martin--
Im Englischen hat eine Katze neun Leben. Im Deutschen vielleicht auch, aber nach Abzug der Steuern bleiben nur noch sieben übrig.-
@@Der Martin
Noch Fragen?
Ja! Wer sagt’s Matthias, dass wir hier nicht in der Schule sind? 😆
🖖 Живіть довго і процвітайте
--
„Ukončete, prosím, výstup a nástup, dveře se zavírají.“-
Servus!
@@Der Martin
Noch Fragen?
Ja! Wer sagt’s Matthias, dass wir hier nicht in der Schule sind? 😆
Nein, das hatte auch Janosch schon mal behauptet, dass man erst mal was falsches lehren könnte und dann…
Das sollte sich auf einen falschen Weg beim Rechnen beschränken, meinte dann Matthias Apsel - hier ist der Link: Tutorial "Zugriffszähler" und SELFHTML-Qualitätssicherung
Es ging drum, dass Franzsen ein Video guckte und ich schrub:
Nach längerer Pause möchte ich HTML, insbesondere Navigation, auffrischen, bevor ich mit FlexBox bzw. Grid weitermache. Ich habe gerade ein Video von YouTube durchgearbeitet
Gut, aber noch besser wären unsere Tutorials:
HTML/Tutorials
Navigation
...
aber da ist noch viel -auch Grundlegendes- zu verbessern. Bitte lies die Tutorials durch.
Da kann ich immer noch nix falsches dran erkennen!
Herzliche Grüße
Matthias Scharwies
--
Ich habe heute rausgefunden, dass in das Pizzafach meines Rucksacks auch ein Laptop passt!-
Hallo Matthias,
vermutlich geht's Gunnar darum, dass ich überhaupt auf das Video eingegangen bin und es nicht einfach totgeschwiegen habe. Es enthält mehrere grundsätzlich falsche Dinge. Ja. Die konnte ich gar nicht alle auflisten.
Aber man kann sich daran im Umgang mit :hover und geschachtelten ''Aufklapp''-Menüs üben. Das sind nützliche Kenntnisse.
Die HTML Struktur und einige der CSS Grundprinzipien bleiben ja auch dann erhalten, wenn man eine inklusive Komponente wie von Kitty und Heydon einsetzt.
Rolf
--
sumpsi - posui - obstruxi
-
-
-
-
-
-
-
Danke Matthias. Das Video ist ja schon 5 Jahre alt das war mir schon klar aber gleich aber es ging zumindest einmal um das eintauchen in die Materie. Gleich mit Java etc. wäre ein zu hoher Einstieg gewesen. Die nächsten werde ich dann mit flex durchgehen. Jedenfalls werde ich die gemachten Ratschläge beherzigen. Das Problem ist jedenfalls schon festgestellt worden. Vielen Dank an alle.
--
LG Franz-
Servus!
Danke Matthias. Das Video ist ja schon 5 Jahre alt das war mir schon klar aber gleich aber es ging zumindest einmal um das eintauchen in die Materie.
Das ist mir schon klar. Ich habe grad geschaut, was Du so bisher gepostet hast:
SELF-Forum: Fehlermeldung vom 17.12.2017
Bitte nimm unsere Ratschläge an und arbeite unsere Tutorials langsam durch. Wenn da irgendetwas nicht klar ist, kannst Du entweder im Forum fragen oder eben die Entwicklerwerkzeuge verwenden. Da hat Dir @Rolf B damals keinen Link gegeben - mittlerweile gibt es ein Tutorial:
Gleich mit Java etc. wäre ein zu hoher Einstieg gewesen.
JavaScript - das kannst du aus dem Dropdown-Tutorial kopieren!
Die nächsten werde ich dann mit flex durchgehen.
Nimm lieber Grid - das ist logischer und einfacher!
Jedenfalls werde ich die gemachten Ratschläge beherzigen. Das Problem ist jedenfalls schon festgestellt worden. Vielen Dank an alle.
Herzliche Grüße und viel Erfolg!
Matthias Scharwies
--
Ich habe heute rausgefunden, dass in das Pizzafach meines Rucksacks auch ein Laptop passt!-
@@Matthias Scharwies
Die nächsten werde ich dann mit flex durchgehen.
Nimm lieber Grid - das ist logischer und einfacher!
Das kann man so nicht sagen.
Grid ersetzt Flexbox nicht. Es gibt Anwendungsfälle für beides.
In manchen Fällen ist Grid richtig und Flexbox falsch. [15] In anderen Fällen ist Flexbox richtig und Grid falsch. [14]
Und in manchen Fällen kann man das Layout mit beidem umsetzen. [9] Dann würde ich auch zu Grid raten.
🖖 Живіть довго і процвітайте
--
„Ukončete, prosím, výstup a nástup, dveře se zavírají.“
-
-
-
