|
|||
3 Spalten Layout linearisieren
Ich such eine Möglichkeit, ein 3 Spalten Layout so zu linearisieren, dass zuerst die rechte Spalte nach unten rutscht und die anderen beiden vorerst nebeneinander bleiben, bei sehr kleinem Bildschirm sollen dann alle untereinadner angezeigt werden.
Wichtig ist außerdem, dass zwischen den 3 / 2 Spalten eine gleiche Höhe simuliert werden kann (für border Abtrennung). Ist das umsetzbar ohne JS, nur mit HTML und CSS? Habe bereits einige Varianten probiert, aber i-was funktionierte immer nicht, auch mit YAML nicht. |
Sponsored Links |
Sponsored Links |
|
|||
Zitat:
Schließlich kann ich mit Media Queries nur die CSS Eigenschaften ändern, nicht aber etwa die Elementreihenfolge im HTML Code. |
|
||||
Dein HTML muss es natürlich auch hergeben, aber wenn die rechte Spalte die letzte der 3 ist, rutscht sie auch als erste runter (was Du ja auch willst).
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.) |
|
|||
Das Problem ist aber, dass ich die rechte Spalte nicht die letzte sein kann, weil dann das clearing für die gleich hohen Spalten nicht mehr funktioniert.
Hier mein 1. Versuch: 3 Spalten Equal Height Layout - Versuch 1 und mein 2. Versuch 3 Spalten Equal Height Layout - Versuch 2 (Es wurde die YAML base.css eingebunden, muss aber nicht weiter stören, die Auswirkungen seht ihr ja in Firebug o.Ä.) Geändert von helloworld (08.06.2012 um 10:31 Uhr) |
|
||||
Zitat:
Und mit media queries musst Du keine automatisch funktionierende Lösung suchen, sondern kannst das CSS in Abhängigkeit von der Viewport-Breite komplett umschreiben, d.h. unbegrenzte Möglichkeiten.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.) |
|
|||
Richtig, ich kann das CSS beliebig umschreiben, nicht aber das HTML und ich schaffe es in dieser Anordnung nicht (wenn alle 3 Spalten nebeneinander sind) gleiche Spaltenhöhen zu erhalten.
Wie ist das möglich? Bei Versuch 1 ist das Umbrechen mit Media Query kein Problem, aber halt die gleichen Höhen. Bei Versuch 2 bekomme ich die 3. Spalte nicht rechts neben die anderen beiden, was mir aber auch logisch erscheint, weil ich in der 2. ja clearen muss (ein clearing in der 3. würde mir ja nichts helfen, da ich dann nur die rechte border anzeigen lassen kann). |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
2 Spalten Layout INKL. 1 Spalten Layout | miedsegadse | CSS | 20 | 14.04.2011 01:02 |
Layout: 2 Spalten gleich langer Höhe | Boof | CSS | 1 | 05.03.2010 11:50 |
3 Spalten fixed width css layout | sharepointkb | CSS | 9 | 28.02.2010 21:00 |
3 Spalten Layout, mal anders | Sushimeister | CSS | 2 | 05.03.2007 12:15 |
3 Spalten Layout in CSS | sisa | CSS | 1 | 22.09.2006 10:28 |