zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden 3 Spalten Layout linearisieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 05.06.2012, 20:43
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.10.2011
Beiträge: 37
helloworld befindet sich auf einem aufstrebenden Ast
Standard 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.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 05.06.2012, 22:50
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.867
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Ein Selbstgänger wäre das Ganze mit media queries - ohne dagegen relativ aufwendig, da Du ja nicht nur Float-Drops willst, sondern auch weitere Features wie gleich hohe Spalten etc.

Wenn es bei letzteren allerdings nur um eine simple border zwischen den Spalten geht (wie Du geschrieben hast), wäre der Aufwand ohne media queries dagegen schon wieder relativ gering.
__________________
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.)

Geändert von heiko_rs (05.06.2012 um 22:58 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 07.06.2012, 22:21
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.10.2011
Beiträge: 37
helloworld befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Ein Selbstgänger wäre das Ganze mit media queries
Die setze ich ein, wie genau soll das aber funktionieren? (die Funktionsweise von Media Queries allgemein ist mir bekannt, meine diesen konkreten Fall)
Schließlich kann ich mit Media Queries nur die CSS Eigenschaften ändern, nicht aber etwa die Elementreihenfolge im HTML Code.
Mit Zitat antworten
  #4 (permalink)  
Alt 08.06.2012, 00:27
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.867
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von helloworld Beitrag anzeigen
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.)
Mit Zitat antworten
  #5 (permalink)  
Alt 08.06.2012, 09:27
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.10.2011
Beiträge: 37
helloworld befindet sich auf einem aufstrebenden Ast
Standard

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 09:31 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 08.06.2012, 11:54
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.867
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von helloworld Beitrag anzeigen
Das Problem ist aber, dass ich die rechte Spalte nicht die letzte sein kann
Aber sie ist doch eh bereits die letzte der 3, also alles kein Problem.

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.)
Mit Zitat antworten
  #7 (permalink)  
Alt 09.06.2012, 08:26
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.10.2011
Beiträge: 37
helloworld befindet sich auf einem aufstrebenden Ast
Standard

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).
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
2 Spalten Layout INKL. 1 Spalten Layout miedsegadse CSS 20 14.04.2011 00:02
Layout: 2 Spalten gleich langer Höhe Boof CSS 1 05.03.2010 10:50
3 Spalten fixed width css layout sharepointkb CSS 9 28.02.2010 20:00
3 Spalten Layout, mal anders Sushimeister CSS 2 05.03.2007 11:15
3 Spalten Layout in CSS sisa CSS 1 22.09.2006 09:28


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:43 Uhr.