Frage zum Tutorial Navi-DropdownMenü

[Cryptic Sven]

Sorry für den neuen Beitrag aber leider kann man auf Archivierte Beiträge nicht mehr antworten.

Ich habe das Tutorial für Navigation Dropdownmenü gefunden und es ist exakt was ich suchte.

Hab soweit auch alles wunderbar verstanden und für meine Zwecke natürlich umgebaut. Jedoch ist mir bei dem Beispiel, und auch bei mir selber, aufgefallen das das Menübeispiel 7 mit den Blauen abgerundeten Buttons unter allem anderen liegt wenn es aufklappt.

Sprich ich geh mit der Maus drüber und die untermenüs liegen unter dem Inhalt welcher sich auf der Seite darunter befindet. Woran könnte es liegen? Z-Index ist ja bereits auf 1000 gesetzt worden und dennoch liegt es unter dem restlichen inhalt der Webseite. Dachte erst es liegt an meinem Browser (Firefox) aber auch in Edge das gleiche Ergebnis. Jemand eine Idee wo da der fehler liegt?

[Matthias Scharwies]

Servus!

Sorry für den neuen Beitrag aber leider kann man auf Archivierte Beiträge nicht mehr antworten.

Ich habe das Tutorial für Navigation Dropdownmenü gefunden und es ist exakt was ich suchte.

Danke, dass zu hören!

Hab soweit auch alles wunderbar verstanden und für meine Zwecke natürlich umgebaut. Jedoch ist mir bei dem Beispiel, und auch bei mir selber, aufgefallen das das Menübeispiel 7 mit den Blauen abgerundeten Buttons unter allem anderen liegt wenn es aufklappt.

Das ist der Stapelkontext (Stacking Context). Der geht erst los, wenn das entsprechende Element positioniert ist.

Ich habe in Zeile 17 ein position: relative;eingefügt.

Herzliche Grüße

Matthias Scharwies

[Cryptic Sven]

Ich hätte da nochmal eine neugierige Frage zu der Navigation. Mir ist aufgefallen das die Untermenüs Rechts bündig sind mit dem Haupt li jedoch werden sie Links eingerückt. Ist das Standart so das ich eine Zeile in der CSS hinzufügen muß oder ist das in der CSS vorgegeben und ich habs nur noch nicht gefunden?

Eigentlich hätte ich gern ein Menü so wie bei EMP Aber nun hab ich mich so an mein umbearbeitetes Menü gewöhnt das ich nun nur noch gern das Einrücken beseitigt hätte! Das umbearbeiten wie bei EMP hat noch Zeit da derzeit ja noch keine Produkte in meinem Shop sind ... damit befasse ich mich später wenn der Shop schön gefüllt ist 😉

[Rolf B]

Hallo Cryptic,

Untermenüs Rechts bündig

das sind sie eigentlich nicht. Es sieht nur so aus. Genau genommen sind sie genauso breit wie das Elternelement, und links eingerückt.

Listen (ol, ul) haben browserseitig ein Padding. Deswegen ist das ul.submenu eingerückt; in der .submenu Regel des Stylesheets kannst Du bspw. padding:0 setzen.

Die li Elemente des Submenüs sind dann aber immer noch kleiner als die des Hauptmenüs, das liegt daran, dass die li Elemente im Haupt- und Untermenü einen Margin haben, der sich im Untermenü addiert.

Rolf

[Cryptic Sven]

Hallo,

Also ich würde schon sagen das die Navi bei mir eingerückt ist auf der linken seite und nicht nur ein paar Margin-Pixel sondern schon extrem

Edit: in der CSS habe ich bei nav / Nav ul / nav li und nav a abgeänder auf margin & padding 0px

LG Cryptic Sven

[Rolf B]

Hallo Cryptic,

nicht nur ein paar Margin-Pixel

ein ul hat bei mir margin-left: 40px (Default in Chrome). Ich habe nicht gesagt, dass es nur "ein paar" Pixel seien.

Wenn Du konkrete Fragen zu einer unerwünschten Darstellung hast, wäre ein Onlinezugriff auf die Seite und eine exakte Beschreibung, was wo anders sein soll, nützlich.

Rolf

[Cryptic Sven]

Hallo Rolf,

Achso Sorry, ich bin davon ausgegangen das die Browser nur wenige px von sich aus vergeben ... das Bild hab ich aus dem Firefox gemacht. OK dann weiß ich schonmal woran es liegen mag und schau mir die CSS nochmal etwas genauer an.

Danke für die Info. Und sorry fals ich etwas barsch rüberkam, das war nicht meine Absicht 😉

LG Cryptic Sven

[JürgenB]

Hallo Sven,

Ich habe das Tutorial für Navigation Dropdownmenü gefunden und es ist exakt was ich suchte.

hast du auch den roten Kasten mit Überschrift „Achtung“ sowie das Fazit gelesen?

Gruß
Jürgen

[Cryptic Sven]

Hallo JürgenB,

Ja hab ich gelesen. Da steht wohl das es nicht funktioniert wie gewünscht aber nicht das ein Browser automatisch linksseitig die untermenüs einrückt.

Sorry das ich gefragt habe um das ganze besser zu verstehen. Wird nicht mehr vorkommen, versprochen 😉

LG Cryptic Sven

[JürgenB]

Hallo Sven,

ich habe nur nachgefragt, weil ich mir nicht sicher bin, ob du HTML und CSS der Navi verstehen willst, oder ob du dieses Menü in deine Seite einbaueb willst.

Gruß
Jürgen

[Cryptic Sven]

Hallo JürgenB,

Ich dachte schon ich werd heut nur falsch verstanden. Klar ich hab es erstmal 1 zu 1 bei mir eingebaut und nach und nach abgeändert auf meine Wünsche hin und die Frage war um es zu verstehen.

Ich kenn es noch vom Body-Tag das wenn man da die Margin nicht auf 0 Setzt die gesamte Webseite einen rundumrahmen (leere Fläche) von ca 6-8px erhält. Drum hatte ich um 5:40 ja auch gefragt ob es so gewollt ist und ich es in der CSS abändern muß aber noch nicht gefunden habe oder ob es standart ist und ich eine Zeile hinzufügen muß wie im Body-Tag um die leer Fläche zu entfernen.

Edit: Bin auch nebenher dabei eine Dropdown-Navi mal selber von Grundauf zu basteln mit den erkenntnissen die ich dank des fertigen Codes gelernt & verstanden habe.

LG Cryptic Sven