CSS: Korrekte Bemaßung und Positionierung der Elemente bei Verwendung des Holy Grails

[KloBoBBerLe]

Liebe Leser,

nach einigen Anfängerfehlern (Holy Grail nicht verstanden etc.) und dem Lesen des Buches von Peter Müller bin ich nun schon ein gewaltiges Stück weiter gekommen. Erst einmal besten Dank für Euren erstklassigen Support!
Eine grundlegende Frage habe ich aber dennoch, die ich mir aus Buch und Forum bisher noch nicht ganz erklären konnte:

Peter schreibt, dass #main, #left und #right im CSS keine margins und paddings vertragen. Man sollte stattdessen lieber auf die Selektoren #main .inside, #left .inside und #right .inside zurückgreifen.

• Doch wie verhält es sich mit der Breitenangabe (width) bei diesen Selektoren? Darf ich hier die direkten Selektoren ansprechen, oder muss ich ebenfalls auf die jeweiligen Klassen .inside zurückgreifen?

Bei meinem derzeitigen Holy Grail-Layout funktioniert alles bestens. Dennoch geht mir die Anmerkung von Peter nicht aus dem Kopf. Bisher sieht meine Bemaßung und Positionierung von #left und #right so aus:

#left {
    right: 100px;
    width: 100px; }

#right {
    width: 100px; }

#container {
    padding-left: 100px;
    padding-right: 100px; }

Diese Lösung wäre ja aufgrund des direkten Ansprechens der Selektoren nach Peter nicht ganz optimal. Wenn ich nun allerdings mit obigem CSS anstelle der Elternelemente die Klassen .inside ansprechen würde, dann wären die Elternelemente (#left und #right) bündig an #main, während die Klassen .inside (im Fall von #left) zwar korrekt positioniert, jedoch teilweise über das Elternelement hinaus ragen würden.

• Das wäre dann aber doch auch keine saubere Lösung mehr, weil die .inside-Klassen (teilweise) außerhalb ihrer jeweiligen Elternelemente (#left und #right) liegen würden?

Wie würdet Ihr das CSS denn gestalten?

Herzlichen Dank für Eure Hilfe!

Viele Grüße
KloBoBBerLe

[pmmueller]

Die Breitenangaben für width kommen doch aus dem Seitenlayout. Die gehen an die Container selbst und sollten beim Holy Grail in px sein.

In den Folien zu meinem Vortrag auf dem Contao Nordtag 2013 wird das ziemlich genau erklärt:
http://pmueller.de/blog/vortrag-cont...dtag-2013.html

[KloBoBBerLe]

Hallo Peter,

herzlichen Dank für Deine schnelle Antwort (vom Maestro persönlich sogar...)!
Ich arbeite komplett mit externen Stylesheets, also gänzlich ohne Layout-Builder (ja, ich weiß - der ist wirklich gut. Aber ich möchte mein CSS von Grund auf selbst verstehen).
Dementsprechend habe ich den Holy Grail wie auch den Media Query handgetippt.

Sofern ich jedoch den Layout-Builder genutzt hätte: Welchen Selektoren hätte er denn die gewünschte Formatierung zugeteilt? Den ID's (#left) oder doch sogar den Klassen (#left .inside)?

Laut Deiner Präsentation (vielen Dank hierfür!) spricht der Layout-Builder ja auch lediglich nur die ID's an. Selbst, wenn da Abstände (z.B. right:20px) angegeben wurden.
Doch wozu dann Deine Bemerkung mit den .inside-Klassen im Buch?

Auf Seite 188 hast Du geschrieben:

"Erwähnenswert ist, dass der horizontale Abstand zwischen den drei Spalten im Inhaltsbereich nicht direkt über #main definiert wird, sondern über das innere div mit der Klasse inside. Grund dafür ist, dass der "Holy Grail" Innen- oder Außenabstände an #main, #left und #right nicht verträgt."

Doch genau solch ein Außenabstand wird doch z.B. bei #left mit "right:100px" generiert - und dies nicht wie im Buch gewünscht in der .inside-Klasse?

(Ich hoffe, Du nimmst mir das Zitat nicht übel)

Besten Dank für Deine Hilfe!

Herzliche Grüße
KloBoBBerLe

[pmmueller]

Doch wozu dann Deine Bemerkung mit den .inside-Klassen im Buch?

Pretty simple, actually:
width und Positionierung (right etc.) an die Hauptcontainer, horizontales padding und margin an die Innencontainer.

Das muss so sein, da der Holy Grail eine echte Presspackung ist. Da kommt es bei der Positionierung von #left und #right auf jeden Pixel an.

Doch genau solch ein Außenabstand wird doch z.B. bei #left mit "right:100px" generiert - und dies nicht wie im Buch gewünscht in der .inside-Klasse?

right erzeugt keinen Außenabstand, sondern positioniert den Container. Es schiebt ihn in deinem Beispiel um 100px nach links, genau an die richtige Stelle. Wobei 100px für eine Seitenspalte ziemlich schmal ist...

Falls dir das nicht einleuchtet, lies dir mal in "Little Boxes" den Abschnitt zu relativer Positionierung durch.

[KloBoBBerLe]

Aaaah, okay! Klasse Peter, besten Dank für Deine super Hilfe!

Es ist also nicht weiter schlimm, wenn ich die .inside-Klassen mit margin noch etwas verschiebe? Auch, wenn sie dann eventuell über die Hauptselektoren (z.B. #left) hinausragen?

Ach ja: Die 100px waren nur ein Beispiel, meine Sidebars sind schon etwas breiter...

[pmmueller]

Es ist also nicht weiter schlimm, wenn ich die .inside-Klassen mit margin noch etwas verschiebe? Auch, wenn sie dann eventuell über die Hauptselektoren (z.B. #left) hinausragen?

Mit margin verschiebst du die .inside-Container nicht, mit margin regelst du die Außenabstände. Und wenn sie dadurch nicht mehr innerhalb der umgebenden Container sitzen, sind durchaus Situationen denkbar, wo sich das rächt.

[KloBoBBerLe]

Mit margin verschiebst du die .inside-Container nicht, mit margin regelst du die Außenabstände. Und wenn sie dadurch nicht mehr innerhalb der umgebenden Container sitzen, sind durchaus Situationen denkbar, wo sich das rächt.

Okay, also die Sidebars einfach so großzügig bemessen, dass die .inside-Klassen selbst beim Umpositionieren/Einstellen von Außenabständen nicht darüber hinausragen und sich ausschließlich komplett innerhalb der Hauptselektoren befinden.

Alles klar, danke!

[ATLAS]

Hmm, kann margin und padding dann überhaupt benutzt werden?

[pmmueller]

Hmm, kann margin und padding dann überhaupt benutzt werden?

Klar.

• #left und #right bekommen width in px (aber kein horizontales padding oder margin!)
• #left .inside und #right .inside bekommen horizontales padding und margin in was auch immer (aber keine width)

Oder habe ich die Frage falsch verstanden?

[pmmueller]

Okay, also die Sidebars einfach so großzügig bemessen, dass die .inside-Klassen selbst beim Umpositionieren/Einstellen von Außenabständen nicht darüber hinausragen und sich ausschließlich komplett innerhalb der Hauptselektoren befinden.

Die .inside-Container solltest du gar nicht "bemessen", wenn du damit die Breite der Elemente meinst. Das machen die von selbst

Und nenn mich pedantisch, aber die ".inside-Klassen" werden nicht positioniert. Sie dienen zum Ansprechen der mit class="inside" gekennzeichneten HTML-Elemente. Oft ist der ungenaue Gebrauch der Begriffe der erste Schritt zum Missverständnis...

[KloBoBBerLe]

• #left und #right bekommen width in px (aber kein horizontales padding oder margin!)
• #left .inside und #right .inside bekommen horizontales padding und margin in was auch immer (aber keine width)

Okay danke! Ich glaube, ich hab's dank der Frage von ATLAS endlich geschnallt!

Beispiel 1: .inside erhält gar keine CSS-Formatierung

=> .inside besitzt also die exakt selben Abmessungen wie dessen Elternelement (z.B. #left). Weiterhin befindet sich .inside deckungsgleich über/in seinem Elternelement.



Beispiel 2: .inside erhält lediglich einen rechten Außenabstand (margin-right) zum rechten Rand seines Elternelements

=> Der rechte Rand von .inside wird also um den Betrag des margins nach links verschoben. Die Breite von .inside wird hierdurch allerdings auch schmaler, da der linke Rand von .inside noch weiterhin durch den linken Rand des Elternelements fixiert bleibt.



Beispiel 3: .inside erhält einen rechten Außenabstand (margin-right) zum rechten Rand seines Elternelements und eine feste Breite (width)

=> Der rechte Rand von .inside wird um den Betrag des margins nach links verschoben. Sofern die vorgegebene .inside-Breite (width) den Abstand von linker Elternelement-Außenkante zu verschobener rechter .inside-Außenkante übersteigt, steht der .inside-Container um den Restbetrag zum Erfüllen seiner vorgegebenen Breite aus dem Elternelement hinaus.



Die Breite von .inside sollte also möglichst nicht vorgegeben werden, da sonst Gefahr besteht, dass es über das Elternelement hinausragt...

Etwas improvisiert zu später Stunde... Bitte kurz sagen ob das so stimmt! Danke!

[ATLAS]

Danke an beide. Dann kann man mit inside arbeiten und lässt right usw. unangetastet, was margin und padding betrifft.

[pmmueller]

Etwas improvisiert zu später Stunde... Bitte kurz sagen ob das so stimmt! Danke!

Insgesamt sehr schön und anschaulich, und ich denke, du hast die Grundprinzipien geschnackelt.

Zu 1: .inside liegt innerhalb von #left, nicht "deckungsgleich auf". border für #left und .inside bleiben beide sichtbar.

Der Rest stimmt beim Überfliegen soweit.

Reines HTML ist zwar nicht hübsch, aber zugänglich und ziemlich responsive. Beim CSS lautet die Grundregel in gewisser Weise, dass wir von dieser natürlichen Flexibilität möglichst wenig kaputt machen sollten. Gerade was feste Höhen oder auch Breiten angeht. Weniger ist mehr.

[KloBoBBerLe]

.inside liegt innerhalb von #left, nicht "deckungsgleich auf". border für #left und .inside bleiben beide sichtbar.

Okay! Das wusste ich nicht, es macht aber natürlich durchaus Sinn! Ich versuche auch, wie Du geschrieben hast, CSS-Bemaßungen sehr überlegt und nur wenn unbedingt nötig einzusetzen.

Noch eine Frage (einfache Standardsituation):

Wenn ich also ein normales Navigationsmenü in den Container #left .inside einfügen möchte, welches einen Einzug/Abstand zum rechten Rand von #left besitzen soll (damit das Menü nicht bündig an #main anliegt):
Sollte ich das margin:right dann lieber für das das Navigationsmodul-umgebende .inside anwenden, oder doch eher direkt für das Navigationsmodul .mod_navigation?

Sollten die gewünschten CSS-Eigenschaften (falls bei den beinhalteten Containern nicht abweichend) immer für die umgebenden Elternelemente angegeben werden (z.B., wenn alle beinhalteten Container die selbe Schriftart besitzen sollen), oder doch eher für jeden Container (bzw. beinhaltete Klassen/ID's) einzeln und separat?

[pmmueller]

Wenn ich also ein normales Navigationsmenü in den Container #left .inside einfügen möchte, welches einen Einzug/Abstand zum rechten Rand von #left besitzen soll (damit das Menü nicht bündig an #main anliegt):
Sollte ich das margin:right dann lieber für das das Navigationsmodul-umgebende .inside anwenden, oder doch eher direkt für das Navigationsmodul .mod_navigation?

Die Antwort ist ein gepflegtes "Kommt drauf an". Zum Beispiel, ob und was da sonst noch alles so an Elementen in #left ist.

Damit das Menü nicht bündig an #main liegt könntest du übrigens auch ein margin-left (oder ein padding-left) an #main .inside geben. Das ist zum Beispiel dann sinnvoll, wenn du eine farbig hinterlegte Sidebar hast und der Text in #main nicht direkt an der Farbe kleben soll.

Sollten die gewünschten CSS-Eigenschaften (falls bei den beinhalteten Containern nicht abweichend) immer für die umgebenden Elternelemente angegeben werden (z.B., wenn alle beinhalteten Container die selbe Schriftart besitzen sollen), oder doch eher für jeden Container (bzw. beinhaltete Klassen/ID's) einzeln und separat?

Nutze die Kaskade und die Vererbung soweit möglich. Definiere z. B. die Schriftart für das Stammelement <html> oder für <body>. Das wird dann runter vererbt an alle anderen Elemente im DOM-Baum.

[KloBoBBerLe]

Damit das Menü nicht bündig an #main liegt könntest du übrigens auch ein margin-left (oder ein padding-left) an #main .inside geben.

In der Tat - in meinem Fall werde ich aus Designgründen sogar eine Kombination aus beidem wählen (margin-right für #left. inside und margin-left für #main .inside.

Klasse Peter, besten Dank für Deine Hilfe!