Flexboxen

[delbor]

Hi zusammen

Dasbisherige Problem ist zwar soweit 'gelöst', als das ich eine mMn. recht ansprechendes Oberfläche hingekriegt habe. Zwei Wermutstropfen gibts bislang aber noch: Im Header hatte ich es hingekriegt, dass in der ersten Zeile ein Willkommenstext und daraufhin in der zweiten Zeile ein CSS-Logo ohne Zwischenraum zur ersten Zeile angezeigt wurde. Dann hatte ich versucht, nach diesem Beispiel meinen Navs einen Farbverlauf zuzuweisen. Das ging aus mir nicht wirklich klaren Gründen schief, und so machte ich meinen Versuch rückgängig. Der Versuch wäre gewesen, das gewöhnliche "<NAV>-Element durch "<NAV class="one">"zu ersetzen". Gelöst habe ich das mit einer Zuweisung an 'background-image' in der NAV-Definition:

background-image: linear-gradient(blue, aqua, aqua, blue);

Doch seither ist im Header zwischen der ersten und der zweiten Zeile ein grössere Abstand, so, als hätte ich da Padding oder Margin >0 zugewiesen - eine Zuweisung gibt es, allerdings explizit auf 0.

Wie auch immer. Wenn da nun 2 verschiedene Bilder sind, zeigen die ein weiteres Problem auf. Eines zeigt meinen Firefox ohne Sidebar, das andere mit. Beabsichtigt ist: die beiden kleineren Boxen sollen in jedem Fall auf 16:9 und 3:4- Bildschirmen untereinander dargestellt werden. Um die Darstellung auf einem Tablet/iPad/Smartphon kümmere ich mich zu einem späteren Zeitpunkt. Der Grund ist: es soll möglichst schlankes CSS ausgegeben werden. Von daher macht es keinen Sinn, an einen Desktop Handy- oder Tablet-CSS auszuliefern. Dabei gehe ich davon aus, dass das, was ich zu sehen bekomme, wenn ich den Browser soweit zusammenschiebe, dass er ungefähr die Gössenverhältnisse eines iPads/Smartphones hat, dies nur eine Pseudovorschau ist. Zurück zzu den beiden kleineren Boxen: das sind zwei flexible Nav-Elemente, die sich in einem auch flexiblen Section-Elemnt befinden; Padding der Section und Margin der Navs sind explizit 0, damit die beiden kleinen Boxen zusammen gleich hoch sind wie die danebenstehende grosse Box. Wie kann ich das hinkriegen? Die eigentlichen Linklisten haben eine prozentuale Grösse und ebensolche margins zwecks Zentrierung - da lässt sich also wohl nichts machen.

Ich hoffe, das Problem verständlich dargestellt zu haben und danke schon mal für eure Antworten.

Gruss Delbor