"position. absolute" ist nicht fix... oder ich habe keine fixe Idee dazu.

  • Hallo liebes Forum,


    habe parallel zum HTML5 u. CSS lernen mein 2. altes Web-Site-Modernisierungsprojekt gestartet, damit es responsiv wird.

    Das neue Laout besteht aus "header", "footer", dazwischen 3 Spalten. Links "nav" ( fixe Breite) "article" u. "aside", beide flexibel.

    Der "header" ist sticky, oben angeklebt.


    Situation:

    Die nav-Spalte wird bei schmalem Bildschirm ausgeblendet, Funktion i.O.

    Im "header" ist mit position: absolute ein button platziert, der die nav-Spalte wieder einschaltet Funktion i.O.


    Problem:

    Denn wenn die Nav-spalte wieder erscheint, sitzt sie etwas höher als vorher und hat den button aus dem header mitgenommen und damit aus dem Sichtfeld hinausgeschoben.

    Also vor dem Ausblenden liegt die "Oberkante nav" an "Unterkante header" an.

    Nach dem Wiedereinblenden ist wohl "Oberkante nav" bündig mit "Oberkante header"


    Frage:

    Der button ist aber offensichtlich nicht, wie erwartet, mit dem header verbunden ist, sondern mit der dahinterliegenden "Welt" bzw. nav ?

    Kann man das beeinflussen, oder sind das grundlegende Eigenschaften von header , nav & Co. ?


    ( Code kann ich noch nachreichen...)


    VG Uli

  • Zitat

    ( Code kann ich noch nachreichen...)

    Das ist sicher angebracht oder, besser noch, wenn die Seite online wäre und Du die URL posten würdest. Du kannst ja eine temporäre Datei anlegen, damit etwas, das nicht richtig funktioniert, nicht öffentlich ist.

    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von Sempervivum ()

  • Das ist sicher angebracht oder, besser noch, wenn die Seite online wäre und Du die URL posten würdest. Du kannst ja eine temporäre Datei anlegen, damit etwas, das nicht richtig funktioniert, nicht öffentlich ist.

    Hallo


    habe vorübergehend die neuen Website-inhalte anstelle der alten, starren Version online gestellt.
    (das mit der temporären Datei verstehe ich noch nicht...)
    Egal, die Seite funktioniert ja weitgehend.


    http://www.logopaedie-badwimpfen.de


    habe hier noch die CSS-Datei als txt-datei angehängt.


    hoffe dass das reicht.


    VG Uli

    Dateien

    • logo.txt

      (4,96 kB, 0 Mal heruntergeladen)
  • Mit der temporären Datei meinte ich nur, dass Du die geänderte Version mit einem anderen Dateinamen speicherst, z. B. index-test.html.


    Was ich selber beobachte ist, dass die Seite zu der Position scrollt wo der Anker #nav-menue liegt und der Button nach oben verschwindet. Das ist genau der Grund, warum ich kein Freund von diesem Verfahren mit Ankern und :target bin: Man hat mit ungewollten Nebeneffekten zu kämpfen. Besser den Checkbox-Trick verwenden oder Javascript.

    Checkbox-Trick ist z. B. hier beschrieben:

    https://stackoverflow.com/ques…hile-clicking-on-checkbox