DIVs anordnen in responsivem Webdesign

[beyou]

Moin mitanand,

folgendes Problem:

Layout für den Mac sieht DIV 1 links neben DIV 2 -> das klappt, sieht gut aus.

Layout für Tablet soll DIV 2 ÜBER DIV 1 darstellen -> die DIVs über die ganze Breite zu ziehen, hat schon geklappt, aber wie ändere ich die Reihenfolge?

Gibts da irgendwas in CSS? Oder klappt das nur über Javascript?

Herzliche Grüße,

beyou

 

[Bertram_Heinrichs]

AW: DIVs anordnen in responsivem Webdesign

Warum DIVs? HTML 5!!! DIV-Suppen sind grauenvoll. Das ist retro und macht man heute nicht mehr:
http://www.peterkroener.de/ueberlegungen-zur-html5-umstellung-von-webseiten/

 

[beyou]

AW: DIVs anordnen in responsivem Webdesign

... weil das ein Projekt ist, an dem die Firma mit mehreren Mitarbeitern schon seit geraumer Zeit sitzt und ich nicht alles umwerfen kann. Danke für den Tip, aber grundsätzlich diskutieren kann ich das in der Kürze der Zeit hier leider nicht.

 

[vincitore]

AW: DIVs anordnen in responsivem Webdesign

wenn du mit floats arbeitest:
dreh einfach im Ursprungscode DIV1 und DIV2 und setz bei DIV2 float: right; statt beim ersten float: left;

wenn nicht, gehts ohne den verwendeten Quellcode mehr schlecht als recht

 

[Myhar]

AW: DIVs anordnen in responsivem Webdesign

Du wirst, wenn du möglichst viele Browser ansprechen willst, um den Einsatz von JS nicht herum kommen. Außer, du kannst die Elemente mit floats so steuern, wie du willst (Das kann man dir ohne dazugehörigen Code nicht sagen)
Eine CSS3 Lösung für dein Problem bietet die Flex-Box, da kannst du auch die Reihenfolge von Elementen verändern.

 

[beyou]

AW: DIVs anordnen in responsivem Webdesign

Danke für den Tip, Sache hat sich folgendermaßen erledigt:

mit position: relative und der Auszeichnung top: konnte ich die beiden DIVs vertauschen.

 

[Pixelverwender]

AW: DIVs anordnen in responsivem Webdesign

DIV-Suppen sind grauenvoll. Das ist retro und macht man heute nicht mehr/

Wer behauptet denn sowas? HTML5 steckt nach wie vor in den Kinderschuhen und bietet diesbezüglich kaum Verbesserungen.
Nebenbei ein Zitat aus dem von Dir geposteten Link: „...neben den in die neuen Elemente eingebauten WAI-ARIA-Features unterscheidet eine HTML5-Struktur so gut wie nichts von einer herkömmlichen Div-Suppe.“

 

[beyou]

AW: DIVs anordnen in responsivem Webdesign

Viel Spaß beim Grundsätzlich-Diskutieren ;-)

 

[Duddle]

AW: DIVs anordnen in responsivem Webdesign

Eine Liste mit grundsätzlichen Mustern zur Umsetzung bestimmter responsiver Layouts ist hier: http://bradfrost.github.io/this-is-responsive/patterns.html
In den jeweils verlinkten CodePens kann man links unten auf "Edit" drücken für den Quellcode.


Duddle

 

[Bertram_Heinrichs]

AW: DIVs anordnen in responsivem Webdesign

Wer behauptet denn sowas? HTML5 steckt nach wie vor in den Kinderschuhen und bietet diesbezüglich kaum Verbesserungen.
Nebenbei ein Zitat aus dem von Dir geposteten Link: „...neben den in die neuen Elemente eingebauten WAI-ARIA-Features unterscheidet eine HTML5-Struktur so gut wie nichts von einer herkömmlichen Div-Suppe.“

Pixelverwender, die Struktur underscheidet sich zwar nicht sehr, ABER... wenn man die künftigen bzw jetzt schon existierenden Eigenheiten der mobilen Endgeräte in Betracht zieht, dann macht es sehr viel Sinn, von den namenlosen Divs abzurücken. Denn die Umsetzung, welche diese Endgeräte aus den neuen Tags automatisch machen, ist der gravierende Unterschied. Es ist schlicht unmöglich, die einzelnen mobilen Endgeräte einzeln zu unterstützen. Und da ist HTML 5 unschlagbar. HTML 4 war auch ewig nicht fertig und man hatte es schon früh verwendet.