Fragen über Fragen!!!

[einsiedler]

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

[Robert B.]

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

[Gunnar Bittersmann]

@@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 🖖

[Robert B.]

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

[einsiedler]

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

[Gunnar Bittersmann]

@@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 🖖

[einsiedler]

Das hört sich nicht so ganz falsch an.

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

[Gunnar Bittersmann]

@@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 🖖

[beatovich]

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;
}

[einsiedler]

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

[einsiedler]

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