Hauptspalte unterteilen

[decrow]

Schönen guten Morgen,

ich hoffe ich bekomme hier meine heißersehnte Antwort auf das o.g. "Problem". Und zwar habe ich nun mehrere Seiten durchforstet, aber nie eine konkrete Lösung gefunden.

Mein Layout soll folgendermaßen aussehen:

skizze.png

Das drumherum ist erstmal nebensächlich, konkret geht es um die Hauptspalte in der Mitte die nochmal, seitenübergreifend, unterteilt werden soll - nach dem Prinzip Hauptspalte in Navigation (links) und Artikel (rechts) unterteilen.

Ich hoffe meine Problematik gut skizziert zu haben, damit mir jemand weiterhelfen kann.

Gruß!

[fiedsch]

Ich hoffe, ich verstehe Dich nicht falsch, aber genau das kannst Du doch im Seitenlayout einstellen.

[decrow]

Ich bin recht neu was contao angeht - habe mich grade am Tutorial für die erste Seite langgehangelt. Deshalb frage ich mal, wo genau ich das denn einstellen könnte.

Ich habe es bereits mit einem eigenen Layout-Bereich versucht, das funktioniert auch gewissermaßen, allerdings wird der Content, gemäß Erwartung, untereinander angezeigt, also sprich: in Zeilen, nicht Spalten aufgeteilt.

[Fkhm]

Schau mal unter Themes->dein Theme. Ganz rechts der Punkt Layout. Dort dein Layout anlegen, mit keiner. Linker, rechter, oder links und rechts ( jeweils mit Main Spalte.)

[decrow]

Ja, soweit bin ich ja schon - wie auf der Skizze beschrieben habe ich alles eingerichtet AUßER eben die Teilung der Hauptspalte

[MacKP]

Ich glaub da liegt ein kleines verständniss Problem vor.
Deine Hauptspalte ist an sich nicht unterteilt. Du brauchst da nur eine Linke Spalte im Seitenlayout hinzufügen und gut ist. Du nutzt dann ein Zweispaltiges Layout und nicht einspaltig. Mehr ist das an sich nicht ;-)

Viele Grüße

[decrow]

Ja scheinbar hab ich mich hier sehr unverständlich ausgedrückt - ich versuch es nochmal mit einer hoffentlich genaueren Skizze:

Unbenannt-1.jpg

Hier sieht man es hoffentlich genauer. Die Hauptspalte ist nochmal unterteilt, da die linke Spalte als Designelement genutzt wird.

In diesem Zuge habe ich nochmal eine Frage, und zwar, weiß ich nicht wie ich die linke Spalte als reines 100%-Hohes Bild nutzen kann, es soll nur den Hintergrund beinhalten.

Entschuldigung für die schwere Erklärung aber ich gebe mir Mühe

Gruß

Nachtrag:
Eventuell hat ja schonmal jemand ein Template erstellt/gesehen welches den gleichen Aufbau hat - da hätte ich die Chance evtl. abzugucken

[Fkhm]

Steht in der linken Spalte Inhalt?

[decrow]

Ne, es soll lediglich ein "Hintergrund" sein

[Schneetiger]

Hallo,

ich bin auch ziemlich neu in Contao und deshalb mit Ratschlägen noch sehr sparsam, aber was haltet Ihr von dem Vorschlag, dem Wrapper mit margin-left einen linken Außenabstand zu geben. Auf den ersten Blick scheint mir dies das Problem zu lösen. Das Seitenlayout bleibt dabei zweispaltig, so wie auf der Skizze und nach links ist der gewünschte Außenabstand vorhanden.

Grüße
Schneetiger

[decrow]

Das klingt sehr gut und auch durchaus als Lösung, "Problem" hierbei wäre, dass insgesamt 100% Breite sind, die linke Spalte aber fix 92px sein soll. Wäre das möglich ohne dass sich das gesamte Template 92px nach rehcts verschiebt?

[Fkhm]

Ich hätte dem Wrapper eine breite von sagen wir 80% gegeben und dann an den rechten Rand geschoben.

Dann ein margin-left: 92px; Hast du immer 92px; abstand zum linken rand.

[Schneetiger]

Dann ein margin-left: 92px; Hast du immer 92px; abstand zum linken rand.

Ja, genau so habe ich mir das vorgestellt. Das Problem sollte somit gelöst sein. Am besten einfach mal ausprobieren und Ergebnis hier wieder posten, das bringt uns allen was.

Gruß
Schneetiger

[decrow]

Prinzipiell funktioniert das, ABER nun ist, wie ich erwartet habe, der Scrollbalken da, da die Seite ja auf 100% Breite ausgelegt ist :/

[MiTsch]

Hallo decrow,

die Erweiterung [subcolumns] macht genau das was Du möchtest.

Viele Grüße
MiTsch

[Schneetiger]

Danke MiTsch,

wieder was dazugelernt.

Gruß Schneetiger

[willshedo]

Hi,

so wie ich das aus der Skizze ersehe, ist das kein Fall für Subcolumns. Das geht viel einfacher als da mit den Columns rumzuflicken, mit denen die alten Browser eh nicht klarkommen.

Stichwort 'Faux Columns' passt hier besser:
Der #wrapper bekommt {padding-left:92px; width:100%; overflow-x: none; }
Die 92px als padding halten den Rand innen und erhalten die 100% Breite. (margin: Aussenrand, verbreitert alles - padding: Innenrand, Breite bleibt erhalten.)
Dann kannst du dem wrapper noch das Hintergrundbild mit deinem 92px breiten Designelement auf der linken Seite zuweisen, und schon passt das alles.

Der Rest wird ganz normal in einem zweispaltigen Layout untergebracht: Navi linke Spalte, Artikel Hauptspalte, Header und Footer.
Fertig. ;-)

Den Footer vielleicht als 'Sticky Footer', da per CSS die Angabe 'height:100%' nicht so ohne weiteres funktioniert wie als Breite.

[MiTsch]

Hallo willshedo,

Stichwort 'Faux Columns' passt hier besser:

Dann ja doch wohl eher simple_columns

Viele Grüße
MiTsch

[MacKP]

Hi,

so wie ich das aus der Skizze ersehe, ist das kein Fall für Subcolumns. Das geht viel einfacher als da mit den Columns rumzuflicken, mit denen die alten Browser eh nicht klarkommen.

Wäre mir neu, das alte Browser damit nicht zurecht kommen würden. Hab ich keine Probleme mit gehabt bisher (und genau deswegen benutzte ich die so gerne). Man kann sogar gleich hohe Spalten damit Simulieren...

Zum Thema: ich glaube ich würde dafür einfach das fe_page Template anpassen und noch ein Div um die ganze Sache machen. Dann das Design Element diesem Div als Hintergrundbild zuweisen (geht auch über Klassen für jede Seite ein anderes in der Seitenstruktur) und gut ist. dem Div dann ein Padding von gewünschter größe fertig.

Viele Grüße

[decrow]

Hallo willshedo,

an der Stelle hast du mir geholfen - den Ansatz hatte ich im Kopf, die Umsetzung ist mir nicht geglückt (habe mit position absolute, left, etc. rumgewerkelt). Vielen Dank!

Trotzdem danke für die zahlreichen Antworten

Gruß!

Nachtrag: Ich experimentiere nicht gerne mit den aktuellsten CSS-"Hacks" oder Angaben aber da ich den horizontalen Scrollbalken auch mit overflow: hidden nicht wegbekam habe ich mal folgende Angabe eingefügt:

.calculated-width {
width: -moz-calc(100% - 100px);
width: -webkit-calc(100% - 100px);
width: calc(100% - 100px);
}​

Wird im IE 6 z.B. wahrscheinlich nicht hinhauen, aber das ist mir zur Zeit erstmal relativ, da es in der aktuellen Browserpalette unterstützt wird.

[willshedo]

Wenn der Scrollbalken nicht weg will, sitzt der vielleicht einfach in einem anderen container? In dem Fall das overflow-x:hidden mal dem body oder dem html zufügen, notfalls mit !important, dann sollte das eigentlich gehen....