einsiedler: Fragen über Fragen!!!

problematische Seite

Hallo liebe Forumer, ich stehe mal wieder vor einer Wand voller Fragen und irgendwie habe ich derzeit ein Logik-Problem, Dinge die mir nicht einleuchten wollen. Ich habe mal hier in einem jpg mein Fragenkatalog mit screenshots illustriert: jpg mit Illus Hier der Link zur Problem-Seite: Problemseite Das erste img zeigt die Seite bei einem breiten Bildschirm, direkt darunter beim Break wenn das Bildschirmfenster bis zu 1500px zusammengeschoben wird. wenn das Sandwich Botton gedrückt wird sollte das Navi-Menü sowohl in der Höhe als auch in der Breite expandieren. Nur nimmt es nicht dieselbe Breite an wie im ürsprünglichen (width) Zustand bei einem breiten Bildschirmfenster. Um die nav habe ich noch ein div gelegt welches eigentlich weg kann, ich habe es gemacht weil ich unter der navi noch eine aside - box hinmachen möchte, also um die <nav> </nav> und <aside> </aside> noch ein umspanndendes <div> gemacht habe. Das erweitert die Problemstellung weil ich ja nicht nur für die <nav> ein Sandwich Botton benötige sondern eben für beides, die nav und das aside. Momentan ist das Sandwich ja NUR für das <nav> gedacht/angelegt. Aber das ist eben ein Folgeproblem. Aber ein Schritt zurück: die Klasse .aside-clip für das div als auch nav hat eine flex-basis von 420 px mitbekommen, also müsste doch das Münu sobreit expandieren, das macht es aber NICHT! Zudem ist die Expansion des <nav> vom Sandwich-Botton links/oben abhängig, also von [aria-expanded="true"]::before .aside-clip { }, das zeigt aber bei meinen Experimenten KEINERLEI WIRKUNG!

So nun weiter, wenn man das Bildschirmfenster weiter verschmälert, ist das Sandwich Botton oben und kann beim betätigen sich nach unten ausbreiten (siehe IMG)

Zu meinen Fragestellungen: bei welchen Breiten würdet ihr einen media-BREAK anlegen, eventuell Tablet-breite (1280px) dann ein zweiten bei 900px oder??? Ich weiss man sollte sie nach der DesignDarstellung anlegen, sobald es nicht mehr "hübsch aussieht". Doch da bin ich überfragt.

Dann: Die Große Frage ist wenn js-script ausgeschaltet ist wie die Seite reagiert: Derzeit hab ich es so: bei breitem Bildschirmfenster öffnet sich das gesamte Menü links, sobald aber man das Bildschirmfenster verschmälert das das "offene" Menü unterhalb des Content angezeigt wird. doch wie löse ich das in meinem Fall? Es gibt ja bei flexbox soetwas wie order! Jedenfalls muss die Klasse .container eine flex-direction: column bekommen? Richtig?

Ich weiß, das ganze ist noch NICHT "schön", aber ich möchte es "schön" machen.

Freue mich auf eure Unterstützung.

gute n8 der einsiedelnde

  1. problematische Seite

    Moin,

    zu deiner Frage mit den CSS-Breakpoints: Ich bezweifle, dass Pixel das richtige Maß sind – denn was passiert z.B. wenn der Nutzer zoomt? em dürfte die sinnvollere Einheit sein.

    Viele Grüße
    Robert

    1. problematische Seite

      @@Robert B.

      zu deiner Frage mit den CSS-Breakpoints: Ich bezweifle, dass Pixel das richtige Maß sind – denn was passiert z.B. wenn der Nutzer zoomt?

      Dann zoomen die Pixel mit. Es sind CSS-Pixel, keine Gerätepixel.

      Die Frage ist: Was passiert, wenn der Nutzer in den Browsereinstellungen die Basisschriftgröße ändert? Dann gilt nicht mehr 16px ≙ 1rem.

      zum Ausprobieren

      em dürfte die sinnvollere Einheit sein.

      Auf jeden Fall!

      LLAP 🖖

      --
      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
      1. problematische Seite

        Hallo Gunnar,

        zu deiner Frage mit den CSS-Breakpoints: Ich bezweifle, dass Pixel das richtige Maß sind – denn was passiert z.B. wenn der Nutzer zoomt?

        Dann zoomen die Pixel mit. Es sind CSS-Pixel, keine Gerätepixel.

        Die Frage ist: Was passiert, wenn der Nutzer in den Browsereinstellungen die Basisschriftgröße ändert? Dann gilt nicht mehr 16px ≙ 1rem.

        Danke für den Hinweis, wieder etwas gelernt.

        Viele Grüße
        Robert

    2. problematische Seite

      Ja, wieder etwas gelernt! Danke! (daher meine +1 Bewertungen) Werde ich auf jeden Fall ändern, also in em!

      Doch zu meinen übrigen Fragen-Katalog (siehe meinen alten Post!)

      Hinzu als Fragen kommen noch: a) eine <nav> </nav> kommt niemald in ein <header>... richtig? b) als auch ein <nav> </nav> niemals in <aside> hineinkommt... das ist richtig oder? Allerhöchstens "weiterführende Links" die sich auf den content beziehen können da eingefügt werden. Ist das richtig?

      Bitte um Hilfe bei meinem "Breiten"-Hauptproblem!

      Gruß der einsiedelnde

      1. problematische Seite

        @@einsiedler

        a) eine <nav> </nav> kommt niemald in ein <header>... richtig?

        Nö. Der Seitenheader ist ein guter Platz (aber nicht zwingend), die Site-Navigation unterzubringen: “A header typically contains a group of introductory or navigational aids.” [Spec]

        Hab ich in diesem Beispiel auch so gemacht.

        b) als auch ein <nav> </nav> niemals in <aside> hineinkommt... das ist richtig oder? Allerhöchstens "weiterführende Links" die sich auf den content beziehen können da eingefügt werden. Ist das richtig?

        Das hört sich nicht so ganz falsch an.

        LLAP 🖖

        --
        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
        1. problematische Seite

          Das hört sich nicht so ganz falsch an.

          Ähm, heisst das man könnte DOch eine Hauptnavigation in ein <aside> packen?

          1. problematische Seite

            @@einsiedler

            Das hört sich nicht so ganz falsch an.

            Ähm, heisst das man könnte DOch eine Hauptnavigation in ein <aside> packen?

            Nicht die Hauptnavigation. Sagtest du doch selber.

            LLAP 🖖

            --
            „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
  2. problematische Seite

    hallo

    beachte flx-grow

    anzubringen im Bereich für mittlbreite Screen.

    .aside-clip {
        margin-top: 2rem;
        margin-bottom: auto;
        flex-grow: 1;
        flex-shrink: 0;
        flex-basis: 80px;
    }
    
    1. problematische Seite

      NOPE, ganz so einfach scheint es doch nicht zu sein! :O((

    2. problematische Seite

      Das ist es leider nicht @beatovich

      ich habe jetzt im betreffenden CSS stehen:

      @media only screen and (min-width: 851px) and (max-width: 1499px) {
      				.container {
      					display: flex;
      					flex-wrap: wrap;
      					align-content: flex-start;
      				}
      				
      				
      				main {
      					/*margin: 0.5rem 0 0.5rem 0.3rem;*/
      					flex-grow: 1;
      					flex-shrink: 1;
      					flex-basis: calc(100% - 14em - 1em);   /* calc(100% - 500px - 5rem); */
      					/*align-self: stretch;*/
      				}
      				
      				#main-nav {
      					/*margin-top: 2rem;*/
      					margin-bottom: auto;    /* 20px; */
      					flex-grow: 0;
      					flex-shrink: 0;
      					flex-basis: 1em;
      				}
      				
      				botton [aria-expanded="true"] > #main-nav {
      					margin-bottom: auto;
      					flex-grow: 1;
      					flex-shrink: 1;
      					flex-basis: 17em;
      				}
      			}
      

      Aber das scheint es noch nicht ganz zu sein. Villeicht hilft ja nochjemand, ich lkomme und komme nicht weiter. Für heute erstmal gut n8.

      der einsiedelnde