Seitenstruktur>mehrere bearbeiten - fehlerhaft?

[Legaziofunk]

Hallo Leute,

ich bin sehr frustriert, dass selbst das Einrichten der Beginner-Website bei mir nicht zufriedenstellend abgeschlossen werden konnte.

Ich habe aus den Artiken im Wiki die Schritte wie beschrieben vollzogen - und mich da an eigene Interpretationen gehalten, wo nötig, weil sich das Beispiel nicht auf 3.5.x bezieht.
Im Ergebnis habe ich nun ein zweispaltiges Layout, welches aber eine Navigation in der linken Spalte hat, welche

• links weit eingerückt ist,
• an deren rechten Seite in den Haupbereich hineinragt

und danaben aiuch der Hauptbereich etwas nach rechts gerückt ist.
Kurzum: Header, Navi, Artikel und Footer sind Nicht korrekt ausgerichtet.

Ich suche mich inzwischen dämlich, den Grund dafür zu finden.

Dabei bin ich darauf gestoßen, dass ich manchen Artikeln kein Layout zugewiesen hatte. Contao hat es mir per Fehlermedlung mitgeteilt beim Klick durch die FE-Vorschau.

Sodann dachte ich: Bevor ich mich nun durch die ganzen Artikel klicke und jeweils individuell auf "Layout zuweisen" klicke, nutze ich die "mehrere Bearbeiten"-Funktion oben rechts.

Das ging zunächst soweit ganz gut, indem mich das BE per sehr lnger Liste dazu aufgefordert hat, auszuwählen, welche Einstellung ich eigentlich bearbeiten möchte. Also setzte ich den Haken bei "Layout zuweisen".

Danach kam eine Seite, auf welcher ebensooft "Layout zuweisen" stand und ein Haken gemacht werden konnte, wie ich vorher Artikel zum bearbeiten ausgewählt hatte. Außer, dass nicht explizit erkenntlich war, welcher Artikel jeweils "gemeint" war. Aber egal, die sollten ja alle "Layout zuweisen" bekommen.

Danach war aber Schluss, denn anstatt das Dropdownmenü mit den zur Verfügung stehenden Layouts anzuzeigen, beendete das BE den Vorgang und es ging zurück zur Übersicht.

Beim erneuten Check auf dem FE war aber keine der Änderungen aktiv. Die Fehlermeldung kam weiterhin.

Was ist da los?

Und was ist mit meinen verschobenen Spalten los?

Ich verzweifle...



CHECK: Hatte eben mal per "Check" die Installation geprüft - es kam keine Fehlermeldung. Dies nur zur Info...

[BugBuster]

Muss auch nicht in allen Seiten definiert sein.
Das Layout welches du im Startpunkt einstellst, wird an den Unterseiten vererbt, somit an allen Seiten.
In den einzelnen Seiten selbst kannst du das dann wieder überschreiben mit einem anderem Seitenlayout. (wenn du mehrere hast und beispielsweise nur eine anders definieren willst.)

[Legaziofunk]

Muss auch nicht in allen Seiten definiert sein.
Das Layout welches du im Startpunkt einstellst, wird an den Unterseiten vererbt, somit an allen Seiten.
In den einzelnen Seiten selbst kannst du das dann wieder überschreiben mit einem anderem Seitenlayout. (wenn du mehrere hast und beispielsweise nur eine anders definieren willst.)

Danke!
Wieder was gelernt, beantwortet aber meine Frage(n) nicht.

[tab]

Also, dann schauen wir mal. Zunächst mal die Geschichte mit dem "Mehrere Bearbeiten". Prinzipiell funktioniert das so, wie du es gemacht hast. Allerdings hattest du nur "Layout zuweisen" ausgewählt, also die Checkbox, die bedeutet, dass hier ein Layout zugewiesen werden soll. Per Default ist dann eben wohl das selbe Layout ausgewählt was schon vorher zugewiesen war. Was passiert, wenn das gar keins war weiss ich momentan auch nicht. Ob dann das erste genommen wird in der Liste oder keine zugewiesen bleibt. Du hättest zusätzlich noch "Seitenlayout" auswählen sollen, dann hättest du direkt ein Layout zuweisen können. Edit: Um die Seiten den Datensätzen besser zuordnen zu können, einfach den Seitennamen mit auswählen. Aber, vielleicht brauchst du das gar nicht. Wenn einer Seite kein Layout explizit zugewiesen ist, dann "erbt" sie das von ihrer "Elternseite". Normalerweise weist man deshalb dem Startpunkt der Website das "Default-Layout" zu. Normalerweise das, was die meisten Unterseiten haben sollen. Denn dann muss man denen schon mal nichts mehr zuweisen. Hat man überhaupt auf allen Seiten nur das eine Layout, ist man nach dem Zuweisen an den Startpunkt also schon fertig und muss den anderen Seiten nichts mehr zuweisen.

Verschobene Spalten? Probier mal im entsprechenden Seitenlayout das Layoutbuilder CSS zu aktivieren. Wie sind denn deine Spalten definiert im Seitenlayout? Hast du jetzt ein fertiges Theme genommen oder selbst eins aufgebaut? Oder hast du das Teil irgendwo online, dass man sich das Frontend mal mit den Entwickler-Tools des Browsers anschauen kann?

[Legaziofunk]

[...] Allerdings hattest du nur "Layout zuweisen" ausgewählt, also die Checkbox, die bedeutet, dass hier ein Layout zugewiesen werden soll. Per Default ist dann eben wohl das selbe Layout ausgewählt was schon vorher zugewiesen war. Was passiert, wenn das gar keins war weiss ich momentan auch nicht. Ob dann das erste genommen wird in der Liste oder keine zugewiesen bleibt. Du hättest zusätzlich noch "Seitenlayout" auswählen sollen, dann hättest du direkt ein Layout zuweisen können.

Na klar! Danke! Ich war davon ausgegangen, dass sozusagen der "Unterpunkt" "Seitenlayout" automatisch kommt - immerhin schließt das ja logisch an... na ja... kapiert...

Edit: Um die Seiten den Datensätzen besser zuordnen zu können, einfach den Seitennamen mit auswählen. Aber, vielleicht brauchst du das gar nicht. [...]

Das verstehe ich nicht. Den Rest, Vererbung etc., hatte ja schon der Ninja geschrieben... das ist jetzt klar.

Verschobene Spalten? Probier mal im entsprechenden Seitenlayout das Layoutbuilder CSS zu aktivieren. Wie sind denn deine Spalten definiert im Seitenlayout? Hast du jetzt ein fertiges Theme genommen oder selbst eins aufgebaut? Oder hast du das Teil irgendwo online, dass man sich das Frontend mal mit den Entwickler-Tools des Browsers anschauen kann?

Sehr gerne:

http://wp12922522.server-he.de/contao/

Die Domain muss erst noch zugewiesen werden.

Bin gespannt, was das Ergebnis ist!

[tab]

Zwei Dinge, auf die schon sehr viele reingefallen sind.

1.) Seitenspalten mit prozentualer Breite funktionieren mit dem Layoutbuilder nicht richtig. Wenn du es wirklich so haben willst, dass die Gesamtbreite 900px und die linke Spalte 30% davon sind, dann mache aus den 30% besser gleich 270px, dann sollte es funktionieren - nachdem Punkt 2 auch geändert ist.

2.) die Bereiche selbst dürfen keine Margins oder Paddings gesetzt bekommen. Falls du welche brauchst, weise diese statt #main, #left, #right, #header oder #footer den darin enthaltenen div's mit Klasse inside zu, also am Beispiel von #main

#main .inside {
   margin: 2px;
   padding: 5px
}

Ansonsten vergrößert sich dadurch der Platzbedarf der Bereiche und dein Layout passt nicht mehr.

Edit: Ansonsten hat das von dir gewählte Layout noch eine Nebenwirkung, die du so wohl nicht haben wolltest. ..
Contao gibt per Default die Hauptspalte vor den Seitenspalten aus, kannst du dir ja im Seitenquelltext anschauen. Das nennt sich Hoöy Grail Layout. Der Sinn dahinter ist, dass Suchmaschinen möglicherweise nur eine bestimmte Anzahl Zeichen indexieren und auch in den Suchergebnissen oft einfach die ersten x Textzeichen ausgeben, zumindest war es wohl mal so. Und das sollte dann eben in der Regel eher der Text aus der Hauptspalte sein und nicht aus der Seitenspalte. Das die linke Spalte trotzdem links von der Hauptspalte steht, wird durch CSS realisiert. Mit all den Risiken und Nebenwirkungen die ich oben beschrieben habe. Und jetzt kommt eben noch eine hinzu. Bei einer Fensterbreite von 767px und kleiner werden die ganzen Bereiche auf 100% Breite gesetzt (was tut man nicht alles für die Benutzer von kleinen Displays ) und stehen dann einfach untereinander. Dadurch rutscht jetzt deine linke Spalte mit der Navigation unter den Inhalt der Hauptspalte, was natürlich ungünstig ist, weil man die Navigation erst sieht, wenn man ganz nach unten scrollt.

Also entweder die Navigation in den Header oder an den Anfang der Hauptspalte setzen. Oder, wenn man es halt wirklich unbedingt so haben will wie du, Navi links, Text rechts, schweren Herzens auf den Layoutbuilder verzichten und alles komplett selbst machen. Also die Ausgabe der Bereiche im Seitentemplate (fe_page) ändern, so dass die linke Spalte wieder vor der Hauptspalte ausgegeben wird.

[mlweb]

Du wirst Dich wohl oder übel mit HTML und CSS beschäftigen müssen. Dazu gibt es eine Menge Literatur und das hat auch nichts mit dem CMS selbst zu tun. Ich empfehle mal das Lesen der Reihe Little Boxes von Peter Müller - das ist gerade in diesem Bereich einen Klassiker (gibt es auch als Video).
Gerade wie man solche Blocks sauber nebeneinander bekommt dafür gibt es x-verschiedene Techniken. Welche man einsetzt hängt von einer Menge Aspeken ab.

• moderne CSS-Techniken oder Notwendigkeit alte Browser zu unterstützen
• Reihenfolge der Darstellung auf mobilen Geräten, sprich was ist der Inhalt und wo soll dieser bei kleinen Bildschirmen angezeigt werden
• wie passt die eingesetzte Technik zur Umsetzung des Gesamtlayouts
• welche persönlichen Vorlieben sind vorhanden

Ich vermute Du hast das Contao-Framework eingeschaltet, welches Holy-Grail-Layout als eine der Möglichkeiten einsetzt. Mag ich zum Beispiel überhaupt nicht. Aber natürlich kann man damit arbeiten.
Dazu muss man sich aber damit beschäftigen, was der Bezugspunkt für die 30% ist.
Dein #container hat eine Breite von 900px (aus dem #wrapper) abzgl. 270px padding links (30%). Das ergibt eine Containberbreite von 630px. Davon dann 30% als Breite für #left sind 189px. Das passt natürlich nicht zusammen. Den eigentlich sollten ja die kompletten 270px mit #left ausgefüllt werden.
Die Verschiebung kommt dann deshalb Zustande weil Du #left und #main direkt padding, border und margin zuordnest. Die wären dann besser bei den jeweiligen .inside Elementen aufgehoben oder man könnte eventuell mit calc arbeiten. Habe ich aber nicht getestet.
Weil aber der Holygrail mit prozentualen Spaltenbreiten im Contao-Framework soweit ich weiss nicht oder zumindestens nicht ohne Anpassungen funktioniert (gibt es auch ein paar Threads zu), würde ich persönlich ihn nur einsetzen, wenn meine linke bzw. rechte Spalte in px oder rem angegeben werden soll. Setzt Du also dort wo Du 30% stehen hast z.B. 320px oder 20rem ein und nimmst padding, border und margin raus, dann klappt es auch. Ansonsten gibt es andere Lösungen um den gleichen Effekt zu erreichen. Manche mit und manche ohne Anpassungen des FE-Templates. Modeernste Möglichkeit wäre ccs-grid- wird aber noch von zu wenigen Browsern unterstützt so dass man mit Fallbacks arbeiten muss. Das führt aber an dieser Stelle zu weit.

[mlweb]

@tab Du warst mal wieder schneller.

[tab]

Ja, aber dafür habe ich die Border vergessen zu erwähnen
Im vorliegenden Fall muss man halt überlegen, was an dem gewählten Layout wichtig ist. Die prozentuale Breite der linken Spalte macht für die Navigation als einzigen Inhalt wohl eh nicht viel Sinn. Zumal wenn die Gesamtbreite sowieso fix auf 900px steht. Wobei mir diese fixe Breite Geschichte eh nicht gefällt, weil man bei manchen Fensterbreiten horizontale Scrollbalken bekommt. Ganz abgesehen davon, dass es "out" ist.

[mlweb]

Es ist immer schwierig mit den Tips, wenn die absoluten Grundlagen fehlen. Wo fängt man an? Was setzt man voraus? Wo kann man mehr Eigeninitiative erwarten? Sollten hier in diesem Forum auch alle Grundlagen zu css bis in Detail erörtert werden, obwohl das gar keine spezifischen Contaoprobleme sind?
Wir können und wollen im Rahmen des Forums sicher keinen Kurs "Grundlagen css und Aufbau moderner Websites" geben.
Manchmal stelle ich mir die Frage ob es wirklich "förderlich" ist für die spätere Website, wenn sie auf solch einer Basis entsteht. Bei einer rein privaten Website sind solche Überlegungen obsolet, aber bei einem Verein...? Bei allem Verständnis für nicht oder wenig vorhandenes Geld - die Website ist doch ein der Aushängeschild. Sollte man da nicht professionell rangehen? Wenn ich mir so den Punkt "Mitglied werden" anschaue, dann scheint es ja auch Ziel der Seite zu sein neue Mitglieder zu gewinnen... .

[Legaziofunk]

Erst mal danke euch beiden, für eure schnellen Antworten!

Ich werde mich diesen in den nächsten Tagen ausführlich widmen.

An dieser Stelle nur ein Hinweis, der mir wichtig erscheint: ich hatte tatsächlich eine feste Pixel-Zahl für die linke Spalte und eine feste Pixel-Zahl für die Gesamtbreite eingeben, so wie es eben in der Anleitung zu "meine erste Website" enthalten ist.

Trotzdem gab es die Verschiebung!

Ränder, abstände und Farben hätte ich erst später eingegeben, um damit rumzuspielen... na ja, oder Dich nicht? Ist manchmal schwer, zu rekonstruieren, wann man was gemacht hatte....

[tab]

Der Quelltext deiner Website sagt:

<style>#wrapper{width:900px;margin:0 auto}#header{height:100px}#left{width:30%;right:30%}#container{padding-left:30%}#footer{height:100px}</style>

Das sind die Inline-Styles, die von Contao aus den beim Seitenlayout eingegebenen Werten generiert werden. Also egal was du eingegeben hast, das sind jedenfalls die aktuellen Werte, die zusammen mit den Margins, Paddings und Borders aus deinem eigenen CSS und Layoutbuilder-CSS das Layout so aussehen lassen wie es aussieht.

Ist ja nicht schlimm und leicht zu korrigieren. Margins, Paddings und Borders den jeweiligen inside-div's zuweisen, im Seitenlayout die 30% auf 270px (oder whatever) ändern und schon sollte es besser aussehen.