Flexboxen

[MrMurphy1]

Hallo

als das ich eine mMn. recht ansprechendes Oberfläche hingekriegt habe

Deine Webseite, du bestimmst das Layout und Aussehen. Ich bevorzuge Lösungen die von meinen Besuchern als angenehm und seriös empfunden werden. Von daher halte ich mich aus Geschmacksfragen raus.

Doch seither ist im Header zwischen der ersten und der zweiten Zeile ein grössere Abstand

Ohne Link zur Seite kann ich dir bei dem Problem nicht weiterhelfen.

Beabsichtigt ist: die beiden kleineren Boxen sollen in jedem Fall auf 16:9 und 3:4- Bildschirmen untereinander dargestellt werden.

Das sind eher Verhältnisse für TV. Bei Computern sind sie die Ausnahme. Wobei dann noch nicht die Pixelanzahl feststeht oder ob der Browser im Vollbild / Vollfenster ausgeführt wird. Bei einer Vollfensterdarstellung wird das Verhältnis durch die unterschiedlichen Rahmen der Browser zerstört. In der Praxis hat es sich deshalb als Irrweg erwiesen Webseitenlayouts von Bildschirmverhältnissen abhängig zu machen.

Um die Darstellung auf einem Tablet/iPad/Smartphon kümmere ich mich zu einem späteren Zeitpunkt.

Das funktioniert in der Praxis meist nicht oder nur unter erheblichen Mehraufwand. Häufig sind dabei zusätzliche Container erforderlich, die das bisherige Layout zerstören. Oder vorhandene Container stören. So kommt dann eins zum anderen. Deshalb sollten von Beginn an alle Fenstergrößen berücksichtigt werden. Zumal dies mit den Möglichkeiten von HTML5 und CSS3 und den Möglichkeiten wie Media Queries zu dem frühen Zeitpunkt nur einen unerheblichen Mehraufwand bedeutet. Später wird der Aufwand manchmal unüberschaubar.

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.

Das hast du wohl falsch verstanden. Schlankes CSS bedeutet nicht möglichst wenig Text / Zeichen zu verwenden. Sondern zum Beispiel nicht mehr benötigte Anweisungen zu löschen.

Smartphone (Handy), Tablet und Desktop sind zudem nur Schlagworte ohne technischen Hintergrund. Vom CSS können sie deshalb überhaupt nicht unterschieden werden.

Außerdem wird der CSS-Quelltext schnell unübersichtlich, wenn für getrennte Geräte getrenntes CSS erstellt werden soll. Doppelte Anweisungen lassen sich dann nicht vermeiden, wobei die Idee vom schlanken CSS unterlaufen wird.

Wenn du dein CSS nach den drei Schlagworten ausrichten möchtest musst du zunächst für dich die Unterscheidungsmerkmale so festlegen, dass sie mit CSS überhaupt angesprochen werden können.

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.

Die aber für dein Projekt vollkommen ausreicht, da die von dir bevorzugte Unterscheidung in Smartphone, Tablet und Desktop überhaupt nicht möglich 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?

Mit CSS - Flexbox. Wie das umgesetzt werden sollte kann aber erst entschieden werden wenn auch das gewünschte Layout für andere Fenstergrößen bekannt ist. Ansonsten kann es wie oben beschrieben zu einer Lösung kommen, die dann wieder komplett abgerissen werden muss. Das kannst du für dich natürlich gerne machen, wenn du zu viel lange Weile hast. Die meisten Anderen gehen dabei eher bewährte, zielführende Wege.

Die eigentlichen Linklisten haben eine prozentuale Grösse und ebensolche margins zwecks Zentrierung - da lässt sich also wohl nichts machen.

Das verstehe ich nicht.

Gruss

MrMurphy