Spaltenbreite

Inzwischen habe ich schon viel gelernt, aber diesen Punkt verstehe ich nicht:

Ich habe ein Theme erstellt. Es hat drei Zeilen und zwei Spalten, nämlich eine Hauptspalte und eine linke Spalte. Die Breite der linken Spalte ist mit 20% angegeben. Wenn ich mir die erzeugte Website ansehe und mir mit dem Inspektionstool des Webbrowsers die Breite der Blöcke anzeigen lasse, dann geht irgendetwas nicht auf.

Im Beispiel ist der Bildschirm 1728 Pixel breit. Diese Breite hat auch das <div> mit der ID #wrapper. Dann folgt das <div> mit der ID #container, was links ein Padding von 345,6 Pixel hat, was diese 20% sind. Es verbleiben noch 1382,4 Pixel für die Hauptspalte. So breit ist sie dann auch. So weit, so gut.

Die linke Spalte mit dem Tag <aside> hat dann aber eine Breite von 276,467 Pixeln. Das ist weniger als die zu erwartenden 345,6 Pixel, und entsprechend schmaler ist auch der Inhalt dieser linken Spalte. Ganz links verbleibt ein ungenutzer Bereich.

Es stellt sich heraus, daß die (für mich) mysteriösen 276,467 genau 20% von 1382,4 sind, also der (geringeren) Breite der Hauptspalte. Ich hätte erwartet, daß die Breite der linken Spalte auf Basis der Gesamtbreite berechnet wird.

Ich habe auch versucht, mittels CSS eine Maximalbreite für das <div> mit der ID #wrapper zu setzen. Das geht auch. Die absoluten Zahlen ändern sich dann, aber die Verhältnisse bleiben gleich. Auch da werden die 20% doppelt angewendet, um die Breite der linken Spalte zu bestimmen.

Ohne einen Blick auf das CSS zu werfen wird man das nur schwer sagen können, sorry. Hast du einen Link für uns?

Zitat:

---

Zitat von lucina

Ohne einen Blick auf das CSS zu werfen wird man das nur schwer sagen können, sorry. Hast du einen Link für uns?

---

Der Effekt tritt auch ohne extra CSS-Datei auf, aber hier ist sie:

Anhang 28486

Die Installation befindet sich auf einem internen Server, der nicht aus dem Internet erreichbar ist. Daher kann ich leider keine Links schicken.

Leichter wäre es, wenn du so einen öffentlichen Link zur Verfügung stellst, also die Webseite irgendwo deployst.

Das klingt für mich nach dem guten, alten Holy Grail Layout. Das hat doch eigentlich schon immer so reagiert auf prozentuale Spaltenbreiten, also nicht so funktioniert wie vom User erwartet.

Zitat:

---

Zitat von tab

Das klingt für mich nach dem guten, alten Holy Grail Layout. Das hat doch eigentlich schon immer so reagiert auf prozentuale Spaltenbreiten, also nicht so funktioniert wie vom User erwartet.

---

Ich habe mit einem leeren Theme begonnen. Ich lerne ja erst.

Unter "Seitenlayouts des Themes bearbeiten" sieht es inzwischen so aus: Anhang 28487. Ich bin mir da auch überhaupt nicht sicher, ob das alles so nach allen Regeln der Kunst ist. Aber auf dem Bildschirm sah es erst einmal einigermaßen vernünftig aus.

Ob das in der Mitte mit den zwei Spalten so bleibt, ist noch offen. Sollte sich herausstellen, daß das ein generelles Problem ist, kann ich auch die Einstellung mit nur einer Spalte nehmen.

Also ich denke mal das hängt am von Contao mitgelieferten CSS. Damit sind m.E. - falls es in 5.7 immer noch so ist wie es mal war - linke und/oder rechte Spalten mit prozentualer Breite nicht wirklich unterstützt, das ist alles float basiert und soll eben erreichen, dass die mittlere Spalte im Quelltext vor den seitlichen Spalten ausgegeben wird, aber trotzdem in der Mitte angezeigt wird.

Lange Rede, kurzer Sinn: Es gibt mehrere Alternativen...

Falls die prozentuale Breite der Seitenspalten nicht so wichtig ist: Mit festen Breiten der Seitenspalten funktioniert das Contao-CSS, was du derzeit einbindest. Jedenfalls solange die Breite der seitlichen Spalten nicht größer ist als die der Hauptspalte. Für viele typische Inhalte von Seitenspalten ist es zumindest eh einfacher, wenn die Seitenspalten nicht auch noch in der Breite variieren.

Falls die prozentuale Breite doch wichtig ist, dann gibt es heutzutage relativ einfache Möglichkeiten das zu erreichen und die Mittelspalte mit den Hauptinhalten trotzdem vor den anderen Spalten im Seitenquelltext auszugeben. Eine relativ einfache ist mit flex zu arbeiten anstelle des float-basierten CSS, das Contao da für die Spalten wohl noch mitbringt, mit flex kann man die Reihenfolge der Spalten relativ einfach ändern, ohne solche Klimmzüge wie negative Margins bemühen zu müssen, um #left auch tatsächlich links von #main angezeigt zu bekommen. Es gibt aber durchaus auch noch andere Möglichkeiten. CSS ist mittlerweile sehr mächtig geworden, auch mit z.B. CSS-Grid kann man vieles machen.

Zitat:

---

Zitat von tab

Also ich denke mal das hängt am von Contao mitgelieferten CSS. Damit sind m.E. - falls es in 5.7 immer noch so ist wie es mal war - linke und/oder rechte Spalten mit prozentualer Breite nicht wirklich unterstützt, das ist alles float basiert und soll eben erreichen, dass die mittlere Spalte im Quelltext vor den seitlichen Spalten ausgegeben wird, aber trotzdem in der Mitte angezeigt wird.

---

Gut, dann muß ich mir da keine Gedanken machen, wofür ich vielleicht zu blöd bin. Damit wäre das soweit geklärt. Ich danke vielmals für die Unterstützung.