Tabelle mit CSS

[Gunnar Bittersmann]

@@Darelius

Ich habe 2 Blöcke: oben linkes ein Logo (120 px x 100 px) oben rechts eine Navigationsleiste (* x 100 px) unten links eine zweite Navigationsleiste (120 px x *) unten rechts der "Inhalt" mit dem Bildschirlrest.

Und dein Problem ist – Zählen? Nach 2 kommt 3. Nach 3 kommt 4. 4 Blöcke.

So weit kein Problem, da brauche ich nciht einmal CSS.

Doch. Wenn du zum Layouten/Gestalten was anderes als CSS verwendest, ist das ein Problem.

Mit html+frames kriege ich das in 5 minuten hin, bei CSS dampft mein Gehirn und ich finde keine Lösung, die funktioniert.

Dabei ist CSS doch so einfach. Zum Layouten in zwei Dimensionen ist CSS Grid das Mittel der Wahl.

Einfach dem body den default margin wegnehmen, ihn den Viewport ausfüllen und ein Grid aufspannen lassen. Der Code ist nahezu selbsterklärend, zumal die Maßangaben auch erkennen lassen, dass sie sich auf Höhen bzw. Breiten beziehen. (Bei mir 8em und 8em, das kannst du deinen Bedürfnissen anpassen.)

body {
	margin: 0;
	height: 100vh;
	display: grid;
	grid-template:
		'logo header' 8em
		'nav  main'   1fr
		/8em  1fr;
}

Die Benennung der Grid-Zellen brauchst du nicht unbedingt, das macht es aber verständlicher.

Den Rest kannst du dir in diesem Beispiel ansehen.

Dort steckt das 2×2-Layout in einem media query, damit es auf schmalen Viewports nicht zweispaltig ist.

Zu guter letzt eine Frage dazu: Ist CSS immer noch komplett Browserabhängig oder zeigen die das mittlerweile gleich an?

Bei den neusten Features gibt es naturgemäß Unterschiede, je nachdem, ob die im jeweiligen Browser schon implementiert sind.

Aber grundsätzlich stellen Browser Webseiten so ziemlich gleich dar. Also:

Oder muß ich dann verschiedenen CSS machen, weil es in verschiedenen Browsern laufen soll, wie es früher war?

Nein.

Und wenn es Unterschiede gibt, dann ist das progressive enhancement.

Und der vermutlich einzige, der deine Seiten in verschiedenen Browsern ansieht, bist du. Webseiten müssen nicht in allen Browsern gleich aussehen. Sie sollten in allen Browsern gut aussehen.

Kwakoni Yiquan