Problem sobald ein Padding gesetzt wird

[Georgi]

Ich habe 2-Spalten-Layout mit Left (Navigation) und main mit Content. Auf der Startseite ist in main ein Artikel mit der Klasse grid6 und das Kalender-Modul (mini_cal) Klasse grid 3 vorhanden, beide - wie gewollt - nebeneinander.
Left ist auf grid3, wie unter empohlen https://contao.org/de/news/den-layou...mbinieren.html, angepasst:

#main .inside {
margin-left:20px;
}

Ich habe den Kalender farbig hinterlegt und sobald ich ein Padding 5px links und rechts setze, damit der Text des Kalenders nicht unmittelbar am Rand steht, dann springt mir das Modul unter den grid6 Artikel. Erst, wenn ich

#main .inside {
margin-left:-10px;
}

setze, ist der Kallender wieder neben dem grid6 Artikel. Vielleicht muss das so sein. Jedenfalls läuft das so.

Gruß Georgi

[pmmueller]

Hast du in dem von dir verlinkten Artikel zur Anpassung der margins den Kommentar von Leo darunter gelesen? Das ist eigentlich nicht mehr nötig: https://github.com/contao/core/issues/4824

Ich habe den Kalender farbig hinterlegt und sobald ich ein Padding 5px links und rechts setze, damit der Text des Kalenders nicht unmittelbar am Rand steht, dann springt mir das Modul unter den grid6 Artikel.

Das ist ziemlich logisch, denn wenn du links und rechts ein padding hinzufügst, dann ist das Element im klassischen Box-Modell halt 10px breiter: width + padding-left + padding-right.

Im modernen CSS-Fachchinesisch nennt sich dieses klassische Box-Modell inzwischen box-sizing: content-box; und das ist die Standardeinstellung. Dieses Gedüdel mit padding, margin und Float-Drops (so nennt man das, was du mit "jetzt steht er darunter" bezeichnet hast) ist einer der Hauptnachteile von vielen gridbasierten CSS-Layouts.

Erst, wenn ich

#main .inside {
margin-left:-10px;
}

setze, ist der Kallender wieder neben dem grid6 Artikel. Vielleicht muss das so sein. Jedenfalls läuft das so.

Es gibt Alternativen:

1. Traditionelle Lösung: Du hast die Klasse grid3 ja wahrscheinlich an div.mod_calendar vergeben. Statt diesem Element ein padding zu geben, könntest du auch dem Kindelement table.calendar ein margin geben, ohne dass sich die Breite von div.mod_calendar dadurch ändert.
2. Moderne Lösung: Du könntest div.mod_calendar sagen, dass es das padding von der Breite abziehen soll. Die CSS-Anweisung zur Änderung des Box-Modells heißt box-sizing: border-box; .

Probiere es einfach einmal aus.

[Georgi]

@pmmueller

P.S.
Eigentlich hättest du besser einen eigenen Thread eröffnen sollen, denn dieser hier ist ja für Probleme/Lösung-Beiträge gedacht, und nicht zum Posten von Problemen

Vielleicht kann der Thread ja verschoben werden.

Danke: box-sizing: border-box; hat's gebracht. Leo's Kommentar verinnerlicht, aber ich muss jetzt mit

#main .inside {
margin-left:0;
}
gegensteuern, damit beide etwas nach links verschoben werden, um nebeneinander angezeigt zu werden.

Vielleicht liegt das daran, dass der Layout-Builder #left{right:210px}#main .inside{margin-left:30px;margin-right:10px} setzt.

(verantwortlich fe_page - Zeile 12 - <?php echo $this->framework; ?>)


Gruß Georgi

[Nina]

Ich habe die Diskussionen in eigene Threads ausgelagert, damit das ursprüngliche Sammelthread sauber bleibt. Diskussionen also bitte in den jeweiligen Themen.

[Georgi]

Ich habe das Problem auch in folgender Anordnung:

2-Spalten-Layout mit Layout-Builder und responsive grid; Linke Spalte (left) 220px. 2 reine Text-Elemente grid6 und grid3 und ohne Stylesheet (also "nackt"). Dann steht grid3 unter grid6 und nicht - wie ich es will - rechts neben grid6.

So, ein Stylesheet (test.css) mit der einzigen Anweisung, also auch KEIN Padding:

#main .inside {
margin-left:0;
}

erstellt und im Layout eingebunden: Dann steht gird3 rechts neben grid6.

Ich vermute nach wie vor den Layout-Builder, dazu habe ich den Quellcode aus meiner HP mal rauskopiert:

<meta name="generator" content="Contao Open Source CMS">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>#wrapper{width:960px;margin:0 auto}#header{height:165px}#left{width:220px;right: 220px}#container{padding-left:220px}#footer{height:35px}#left{right:210px}
#main .inside{margin-left:30px;margin-right:10px}</style>
<link rel="stylesheet" .....

Gruß Georgi

[Nina]

So aus dem Zusammenhang gerissen bringt das wirklich wenig. Mit einem Link zur Website könnten wir die Situation hingegen dank Firebug und Co schnell prüfen.

[Georgi]

@nina

Dann schau mal hier: URL gelöscht, da nur Testinstallation.

Gruß Georgi (und gute Besserung)

[Nina]

Auf welcher Seite finde ich denn den zuletzt von dir geschilderten Fall? *rumwühl*

Danke für die Genesungswünsche

[Georgi]

@Nina

Nur auf der Startseite. Da brauche ich den Artikel grid6 und das Nachrichten-Modul und darunter den Minikalender mit grid3. Aber schau mal in den Quelltext. Da wird der Layout-Bilder definiert. Und der bekommt ein margin von 30. Ich steuere mit 0 bzw. Mit -10px gegen, damit es auch im ie8 klappt.
Gruß G.

[Nina]

Jetzt verstehe ich dein Problem.

Ich kann ebenfalls nicht verstehen, weshalb Contao von sich aus die Anweisung #main .inside { margin-left: 30px; margin-right: 10px; } in die Seite schreibt. Auch meiner Meinung nach kann das Grid-System so nicht funktionieren. Ich mache dazu mal ein Ticket auf. Entweder es ist ein Bug, oder wir kennen da ein "Feature" noch nicht.

PS:
Abgesehen davon darfst du #container keine Border-Anweisungen für die linke/rechte Seite geben, da dadurch die verfügbare Breite verminderst.

Entferne außerdem deine Anweisung #main .inside{margin-left:-5px} und
schreib stattdessen #main .inside { margin-left: 0px !important; margin-right: 0px !important; } um die margin-Anweisung von Contao zu überschreiben.

[pmmueller]

Ohne das genauer analysiert zu haben, liegt die Vermutung nahe, dass da die beiden 10px-margins der dritten Spalte noch zugerechnet werden, obwohl die Spalte selbst gar nicht da ist. Kann das sein?

Edit:
Ich habe im Ticket noch den Link zu diesem Thread hinzugefügt.

[Georgi]

... ich dachte schon, es liegt an mir: Grenzen erreicht .

... übrigens läuft das auch nicht, wenn ich auf die linke Spalte im Layout verzichte und 3 Artikel grid3 - grid 6 - grid3 setze. Dann wird der rechte grid3 nicht neben grid6, sondern darunter. Erst bei #main .inside { margin-left: 0px !important; margin-right: 0px !important; } läuft es richtig.

@Nina und @pmmueller:
Ohne die Linke Spalte gibt es die Anweisung #main .inside { margin-left: 30px; margin-right: 10px; } nicht.

Beim Layout Haupt-Spalte und rechte Spalte setzt der Layout-Builder: #main .inside{margin-left:10px;margin-right:20px}.


Dann warten wir mal auf eine Lösung.

Gruß Georgi

Abgesehen davon darfst du #container keine Border-Anweisungen für die linke/rechte Seite geben, da dadurch die verfügbare Breite verminderst.

Danke, gemacht (ich hing noch am alten Design, sieht aber so besser aus.)

Entferne außerdem deine Anweisung #main .inside{margin-left:-5px} und
schreib stattdessen #main .inside { margin-left: 0px !important; margin-right: 0px !important; } um die margin-Anweisung von Contao zu überschreiben.

Gemacht und funktioniert.

[Georgi]

Laut https://github.com/contao/core/issue...mment-11577478 gibt es eine Lösung.

Aber da wird immer noch ein margin für den linken Rand bei inside main gesetzt. ME kann das nicht mit dem grid-System harmonieren.

Ich habe einen grid-Hintergrundbild angelegt: 10-60-10px und das ganze über #left und #main gelegt. Wenn man jetzt Nina#'s Anweisung #main .inside { margin-left: 0px !important; margin-right: 0px !important; } setzt und im Seitenlayout die linke Spalte auf 240px = grid3 (10-220-10) setzt, ist alles ok.

Naja, ich warte mal das offizielle Update ab.

Gruß G.

[BugBuster]

Da gabs auf GitHub gerade nochmal ne Anpassung, das geht in die Richtung.

[Georgi]

Das funktioniert!

Jetzt kann man mit #left {padding-left:10px;} zB ein Menü sauber einpassen.