Meine Navi geht hinter dem content auf!

  • Bin ziemlich neu und hab ein wahrscheinlich ein nur keines Problem aber ich raffs nicht, ich hab eine Navigation geschrieben die auf der linken seite steht, immer wenn dann ein submenu rechts rauskommt verschwindet es unter dem content und ist nicht zu lesen, kann mir dabei jemand helfen. die navigation hat z-index: auto; muss ich dem content dann auch einen z-index geben?

    oder hat das damit nichts zu tun?

  • Das kommt drauif an.

    Versuche es doch einfach mal den z-index ne Zahl zu geben. zb 1 oder 99999.

    Das kommt auch darauf an ob die anderen Elemente einen z-index haben und wie hoch sie Zahl da ist.


    Am besten gibst du uns mal den Code oder den Link zur Seite dann kann man dir das alles genauer sagen

  • Es liegt ohne den Code vorliegen zu haben wahrscheinlich am Z-Index. Teste mal wie Basti bereits geschrieben hat mit z-index herum und schau dir dann die Resultate an. Und wenn es dies nicht ist kannst du im nächsten Post bitte deinen Code posten.


    Grüße,

    Stef

  • html-seminar.de/woltlab/attachment/2248/html-seminar.de/woltlab/attachment/2248/


    Das hat ja schonmal super funktioniert, danke. Nun hab ich ein neues Problem, der Content hat es nurn verdeckt (Bild1). Bei mir wird das submenu was ja eigentlich nur zu sehen sein soll von man raufklickt schon vorher angezeigt und wenn ich rauf klick macht er das aber ganz normal auf. Die Navigation die ich meine ist „#naviL”. Danke für eure Hilfe!


    ich kopier hier mal die css rein:

  • Kannst du mal bitte ein test seite erstellen bei codepen.io oder wo anders ?

    Da kann man das besser sehen als wie auf Bildern und halben Code.

    Sehe auf deinen Bildern keinen unterschied.

    Mein Bildschirm ist auch nicht der größte .

    Besser wäre noch ein Link zu deiner Seite damit man das auch gleich sehen und testen kann was da los ist .


    Notfalls kannst du deinen Code auch hier her kopieren wenn er nicht zu lang ist

  • aber ich kopier hier auch mal das html rein, vielleicht ist das einfacher, danke übrigens nochmal für eure hilfe, hab vor 10 jahren meine programiererschule fertig gestellt hatte danach einen schweren unfall, koma, querschnittgelähmt, rollstuhl! will hier nicht auf mitleid machen aber nur zur erklärung warum ich mich so stümperhaft anhör, hab klein angefangen letztes jahr ... aber ich hab so, soviel vergessen!


  • Ok

    Dieses hier gibt es so nicht

    height: min-height 1000px; das müsste dann so aussehen min-height:1000px;


    Ansonsten habe ich mal deine Vorlage genommen und das rausgemacht

    * Link entfernt, weil existiert nicht mehr *


    Ich habe da mal mit Flexbox gearbeitet damit du siehst wie man das heute macht ( bzw. kann).

    Das obere nav Menü hat Position sticky.

    Das bedeutet, dass es beim runterscrollen an der Decke kleben tut.

    Wenn das nicht erwünscht ist, musst du einfach die Zeile ( position:sticky ) löschen.


    Meine Vorlage ist zwar auch noch nicht 100% tig aber es kommt der Sache schon mal näher

  • Hi, also ich bekomm das auf die schnelle nicht hin mich da reinzuarbeiten, da brauch ich bestimmt ein paar Monate um so mein Layout zu realisieren. Das ist ja auch nur für mein Cousine und sollte eigentlich schneller gehen. Da ich die Navi wohl nicht in mein Layout mit meinem Oldschool html integrieren kann, hab ich mir da was anderes überlegt, was ich aber auch leider nicht hinbekomm ... mal wieder. Ich hoffe das mir da jemand nochmal helfen kann. und zwar hätte ich gern das, wenn ich auf die seite asiagerichte geh, das alle links die mit asiagerichte (also bis zur Sweet Chilli Sauce) zu tun haben auf der seite gleich braun (das gleiche braun welches beim hoover erscheint) eingefärbt ist, ich dachte das ich das mit class lösen kann, aber das funktioniert nicht.

    Hab das alles mal in codepen eingetragen hier der Link


    https://codepen.io/RohbieP/pen/ZEGrPjw


    vielen, vielen Dank!

  • Hey,


    normalerweise kann man wenn man 1 Element hovert die CSS Anweisung auf andere Elemente auch übertragen.


    Dies geht dann so : #firstelement:hover .braun{

    background-color: red;

    }


    Leider funktioniert dies jedoch nicht was für mich unerklärlich ist - hat jemand von euch eine Idee warum dies nicht funktioniert?. Ich habe dann mittels Javascript eine Lösung gefunden welche ich dir jedoch nicht als 1. Wahl empfehlen würde.


    Nichts desto trotz ist hier die JavaScript Lösung:


    Grüße

  • Ich verstehe hier gerade garnix.

    Willst du das deine 5 navi Links einen anderen Background bekommen als die anderen ?

    Oder nur beim hovern ?


    Leider zeigt das JS von meinen Vorderman auch keine Wirkung deswegen verstehe ich gerade nicht was hier los ist.



    Und noch was.

    Ich hatte schon mal gesagt das es das so nicht gibt

    Code
    height: min-height 300px;

    Das hier hat keine funktion weil du keine id braun hast ( finde ich zumindest nicht )

    Code
    #naviL ul #braun li {
        background-color:#8a4b08; 
    }

    Und wenn du deine Verlinkung eine anderen Background geben willst , und beim hovern noch mal eine andere Farbe , versuche es mal so

    Code
    #naviL > ul > li.braun a{
      background:red;
    }
    
    #naviL > ul  > li.braun:hover  a{
      background:green;
    }
  • Zitat

    Dies geht dann so : #firstelement:hover .braun{

    background-color: red;

    }


    Leider funktioniert dies jedoch nicht

    Das hängt vom HTML ab. Ich nehme mal an, dass die .braun nachfolgende Geschwisterelemente sind. Dann muss man statt eines Leerzeichens eine Tilde im Selektor verwenden:

    Code
    #firstelement:hover~.braun {
       background-color: red;
    }
  • Hey,



    Leider zeigt das JS von meinen Vorderman auch keine Wirkung deswegen verstehe ich gerade nicht was hier los ist.

    Bei mir funktioniert dies.



    Sempervivum :

    Vielen Dank dir. Dies war die Lösung.
    Ich habe es gestern mit der Tilde auch ausprobiert dies hat jedoch nicht geklappt. Muss das Tilde dirket hinter dem :hover ohne Leerzeichen stehen?


    Grüße,

    Stef

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!