Image über 2 Spalten positionieren

[Thomasge]

Hallo zusammen,

ich stehe aktuell vor einem Problem und weiß nicht wie man es lösen kann.
Die Webseiten haben alle ein 3-Spalten Layout Links-Mitte-Rechts. Nun möchte ich an einer Stelle ein Image über 2 Spalten Mitte-Rechts positionieren. Alle meine Versuche sind fehlgeschlagen wie mit Z-Index oder Overflow.
Gibt es eine Möglichkeit dies zu realisieren? Im Augenblick fällt mir nur noch ein, dies mit einem zusätzlichen Seitenlayout zu verwirklichen. Dies möchte ich aber eigentlich nur ungern machen wollen.
Danke!

Gruß
Thomas

[mlweb]

Es gibt dazu eigentlich immer Möglichkeiten. Dazu müsste man aber den Code der Seite sehen.
Alos wie fast immer: bei CSS-Problemen Link zur Seite.

[dazzle89]

Um was für Spalten handelt es sich denn, z.b. eine Erweiterung oder sind es die Spalten, die im fe_page-Template definiert sind? Im letzten Fall, könnte man es ggf. mit einem eigenen Layoutbereich oder Seitenlayout lösen.

[Thoni]

Man könnte ggf. das Bild in den Header oder rechts einsetzen und mit position:absolute ausrichten.
z-index und overflow eventuell auch nutzen.
Responsive dürfte das dann aber nicht werden.

[amateur]

Bei einer älteren Seite hilft es möglicherweise nicht weiter – aber falls du noch in der Entwicklungsphase bist, vielleicht: Mit grid oder flex kannst Du flexibler positionieren als mit dem alten Spaltenlayout.

So long
Michael

[Thomasge]

Danke für die Antworten auf meine Frage. Die Webseiten sind alle konsequent mit Flexboxen umgesetzt bis auf das Seitenlayout, dort sind die 3 Spalten fest definiert.
Mein eigentliches Problem ist, dass beim Umsetzen von Media Queries unser Inhalt nicht bei kleineren Auflösungen in das 3-Spalten Layout gut reinpasst. Im Augenblick ist mir nichts besseres eingefallen als eine der 3 Spalten mit Inhalt zu überlappen was aber bekanntermaßen nicht funktioniert hat.
Optimal wäre es, wenn bei großen Auflösungen ein 3-Spalten Layout, bei mittleren Auflösungen ein 2-Spalten Layout und bei kleinen Auflösungen nur eine Spalte dargestellt wird. Im Prinzip müsste wie bei der Aktivierung von Responsive Webdesign ein 2. Punkt festgelegt werden können bei dem eine Spalte nach unten umbricht und dann bei 768px die 2. Spalte umbricht. Es sollte auch nicht erst bei 767px umbrechen sondern schon bei 768px. Damit könnte man dann unsere Inhalte optisch gut anzeigen.
Gibt es dafür eine Lösung? Andernfalls müsste man die Webseiten auf ein 2-Spalten Layout umstellen und sich mit dem Breakpoint bei 767px arrangieren. Anbei der Link zur Webseite https://www.musikverein-hirschzell.de/, damit man es sehen kann.
Danke!


Gruß
Thomas

[mlweb]

... bis auf das Seitenlayout, dort sind die 3 Spalten fest definiert.

Wenn ich es richtig verstehe, dann ist das der Fehler. Für in responsives Layout (idealerweise mobile first), werden die Inhalte für kleine Bildschirma einspaltig dargestellt und dann je nach Layoutvorstellungen und/oder Inhalt bei bestimmten Breakpoints dann zwei oder dreispaltig. Das geht natürlich auch mit den von Contao von Haus aus verwendeten Spalten.

[mlweb]

Optimal wäre es, wenn bei großen Auflösungen ein 3-Spalten Layout, bei mittleren Auflösungen ein 2-Spalten Layout und bei kleinen Auflösungen nur eine Spalte dargestellt wird. Im Prinzip müsste wie bei der Aktivierung von Responsive Webdesign ein 2. Punkt festgelegt werden können bei dem eine Spalte nach unten umbricht und dann bei 768px die 2. Spalte umbricht. Es sollte auch nicht erst bei 767px umbrechen sondern schon bei 768px. Damit könnte man dann unsere Inhalte optisch gut anzeigen.

Hier habe ich leichte Verständnisprobleme. Du kannst doch das vom Contao-Framework mitgelieferte "Responsives Layout" verwenden. Wenn Dir das nicht ausreichend ist, kannst Du das CSS unter Verwendung der dort vorhandenen Vorgaben einfach für Deine Zwecke anpassen. Alternativ schreibt man CSS völlig unabhängig vom Contao-Framework.

[Thomasge]

Danke für die Info. Also bei kleinen Bildschirmen habe ich keine Probleme, da diese ja eh einspaltig dargestellt bzw. die rechte und linke Spalte unter die mittlere Spalte verschoben werden.
Aber ich habe noch keine Möglichkeit gefunden wie man ein zweispaltiges und dreispaltiges Layout erstellt bei bestimmten Seitenbreiten. Bei einer Seitenbreite von 767 Pixel und weniger werden die rechte und linke Spalte nach unten verschoben und bei einer Breite von 768 Pixel und mehr ist das Layout dann dreispaltig, sofern Responive Layout im Seitenlayout aktiviert ist.
Ich möchte nun folgendes erreichen und weiß nicht wie man es realisieren könnte.

• bei 1023 Pixel und weniger soll das Layout einspaltig sein, linke und rechte Spalte unter dem Hauptteil
• von 1024 Pixel bis 1199 Pixel soll das Layout zusätzlich eine linke Spalte einblenden
• ab 1200 Pixel und mehr soll das Layout dreispaltig sein, eine linke und rechte Spalte einblenden

Ist es möglich dieses Vorhaben umzusetzen? Wenn ja, gibt es irgendwo eine gute Seite auf der diese Vorgehensweise erklärt wird.

[mlweb]

Es gibt diverse Infos mit mehr oder weniger viel Details zu responsivem Webdesign im Netz.
Eine Quelle für mich war immer auch der Blog von https://blog.kulturbanause.de/

Im Moment ist bei Dir gar nichts responsiv, wenn ich mir das im Browser anschaue.
Das fängt schon mit der festen Breite beim #wrapper an, geht weiter bei festen Breiten der Bilder auf der Startseite und einer festen Höhe des Headers was ein flex-wrap:wrap völlig sinnlos macht.

Die rechte Spalte nach unten zu bringen ist nicht das Problem, aber große Teile des Restes müsste man ja auch noch "in Ordnung" bringen, also responsiv machen.
Da hilft nichts. An dieses Layout muss man m.E. von Grund auf ran um es responsiv zu gestalten.

Abgesehen davon ist es nicht notwendig Flexbox überall einzusetzen, wo der normale Fluss genau das Gleiche erreicht.

[Thomasge]

Die Webseite mit dem Responsiv Design ist derzeit noch nicht online erreichbar, da sie noch bei mir lokal liegt. In den nächsten Tagen versuche ich sie auf unsere neue Subdomain zu bringen. Auch weiß ich, dass da noch einiges im Argen liegt, deshalb auch die Trennung.

[mlweb]

Ok, dann kurz skizziert, was man tun könnte um die rechte Spalte nach unten zu bringen.
Schau Dir die Datei responsive.css an (in contao 4.9 liegt diese im Ordner /assets/contao/css)
Du müsstest also den Breakpoint für diesen Code auf 1023px ändern. Das solltest du in Deinem eigenen CSS machen (Inhalt in eigenes CSS einarbeiten/kopieren), denn ich denke die Datei responsive.css wird bei einem Update überschrieben werden.

Wie man sieht wird im Contao Framework nicht mobile First gearbeitet.
Wenn Du das Framework nutzen willst, solltest Du auch Deine eigenen Anpassungen so machen.
Du brauchst jetzt noch einen Breakpoint für alles was maximal 1199 Pixel ist:

@media screen and (max-width:1199px) {
...
}

Man kann auch auf das Contao-Framework verzichten und mobile First arbeiten.

Wenn die rechte Spalte nicht mehr rechts sondern unten sein soll, darf sie nicht mehr gefloatet werden (clearen nicht vergessen - denn kein Float ohne Clear). Breite auf auto setzen und die entsprechenden Abstände müssen auf 0 gesetzt werden. Sieht man gut in der responsive.css - dort eben für alle Spalten. Im Wesentlichen ist es das schon, wenn der #wrapper keine feste Breite hat und auch alles andere nicht aus dem Layout ausbricht.

Alternativ baut man das Rahmenlayout vollkommen ohne Contao-Framwork auf (so mache ich das). Dabei musst Du dann das CSS-Framework etwas durchforsten und schauen was Du übernehmen musst in Dein eigenes Layout. Dann kann man z.B. das Rahmenlayout auch mit CSS-Grid umsetzen (eine mögliche Anregung findest du unter https://blog.kulturbanause.de/2013/1...dule/#chapter7).

[Thomasge]

Ok, dann kurz skizziert, was man tun könnte um die rechte Spalte nach unten zu bringen.
Schau Dir die Datei responsive.css an (in contao 4.9 liegt diese im Ordner /assets/contao/css)
Du müsstest also den Breakpoint für diesen Code auf 1023px ändern. Das solltest du in Deinem eigenen CSS machen (Inhalt in eigenes CSS einarbeiten/kopieren), denn ich denke die Datei responsive.css wird bei einem Update überschrieben werden.

Wie man sieht wird im Contao Framework nicht mobile First gearbeitet.
Wenn Du das Framework nutzen willst, solltest Du auch Deine eigenen Anpassungen so machen.
Du brauchst jetzt noch einen Breakpoint für alles was maximal 1199 Pixel ist:

@media screen and (max-width:1199px) {
...
}

Man kann auch auf das Contao-Framework verzichten und mobile First arbeiten.

Wenn die rechte Spalte nicht mehr rechts sondern unten sein soll, darf sie nicht mehr gefloatet werden (clearen nicht vergessen - denn kein Float ohne Clear). Breite auf auto setzen und die entsprechenden Abstände müssen auf 0 gesetzt werden. Sieht man gut in der responsive.css - dort eben für alle Spalten. Im Wesentlichen ist es das schon, wenn der #wrapper keine feste Breite hat und auch alles andere nicht aus dem Layout ausbricht.

Alternativ baut man das Rahmenlayout vollkommen ohne Contao-Framwork auf (so mache ich das). Dabei musst Du dann das CSS-Framework etwas durchforsten und schauen was Du übernehmen musst in Dein eigenes Layout. Dann kann man z.B. das Rahmenlayout auch mit CSS-Grid umsetzen (eine mögliche Anregung findest du unter https://blog.kulturbanause.de/2013/1...dule/#chapter7).

Danke für Deine gute Unterstützung, alle meine jetzigen Versuche zu diesem Thema haben einwandfrei geklappt.

Gruß
Thomas