Layout mit CSS

Computer: Software & Programmierung HTML & CSS
1

Hallo,

ich stehe vor einem Problem und finde im Internet nur Teilstück-Hilfe, die mich nicht zum Ziel führt. Ich hoffe, dass ihr mir helfen könnt.

Das ist mein Website-Layout in der Desktop-Version:

LayoutWebsite
LayoutWebsite800×500 17.4 KB

Dabei sind die gleichen Farben inhaltlich zusammenhängende Teile. Das rote Bild erklärt den roten Text, etc. Der Text soll das Bild NICHT umfließen, und die Texte sind nicht gleich lang. Nur die Bilder haben fixe Pixelgrößen und sind kleiner als die vorgesehenen Zellen.
Am Ende soll das ganze in der mobilen Ansicht der Reihe nach angezeigt werden:

Layoutmobil
Layoutmobil196×800 4.12 KB

Mein aktueller Versuch sieht so aus:

<div style="margin: 0 auto; max-width: 960px;">
<div style="float: right; background-color:blue; width: 480px;">Bild 4 und Text 4</div>
<div>
<div style="float: left; background-color:red; width: 100px;">Bild 1</div>
<div style="background-color:#993300;">Text 1</div>
</div>
</div>

Dieser Anfang führt mich zwar zu dem dreispaltigen Layout mit flexiblem Dunkelrot-Bereich, aber ich kann keine weiteren Zeilen anfügen (die gehen dann unter das Layout auch unter blau) und wenn ich das Fenster schmaler mache, rutscht blau vor die anderen Farben statt danach.

Das letzte Mal, als ich mich mit dem Entwerfen von Websiten auseinander gesetzt habe, gab’s die mobile Herausforderung noch nicht, damals hat ging’s noch mit einer Tabelle :frowning:

Hat jemand von euch den rettenden Einfall, wie ich meine Seite strukturieren muss?
Ich bin für jeden Tipp dankbar!

Liebe Grüße
Andrea

2

Für so etwas kann man Framework namens Twitter Bootstrap verwenden. In einem Thread unter stackoverflow.com wurde auch eine Lösung zum Thema präsentiert…

3

…und zwar: http://stackoverflow.com/questions/20671303/bootstrap-3-changing-div-order-on-small-screens-only (funktioniert übrigens auch mit mit mehr Inhalten als A, B, logo)

4

Vielen Dank für die schnelle Antwort! Ich gebe zu, dass der Code auf der verlinkten Website für mich im Moment noch böhmische Dörfer sind - ich werde es mir noch ausführlicher angucken, um es wirklich zu verstehen. Es wirkt auf mich so, als wäre da das Problem beschrieben, dass aus der horizontalen Reihenfolge grün-rot-blau auf dem mobilen Screen die Anordnung links rot, recht grün-blau entsteht. Ich vermute, das zielt auf mein Problem ab, dass mein blau bei kleinem Screen nach oben rutscht?

Als ich das Layout gemacht habe, habe ich noch gedacht, das wäre ganz einfach. Eine Tabelle mit zwei Spalten, die mobil hintereinander angezeigt werden könnten. Und innerhalb einer Zelle das gleiche nochmal - jeweils pro Zeile wieder zwei Spalten, die auf dem Desktop nebeneinander und mobil untereinander angezeigt werden könnten.
Ist meine Vermutung richtig, dass diese „container-artige“ Denkweise für div-Layouts nicht anwendbar ist? Ich scheitere ja bereits daran, eine weitere Zeile auf die linke Seite zu bekommen…

5

Halloo !!!

Deratiges hilftmir bei sochen Problemen verlässlich weiter.

Struktur
Struktur636×745 53 KB

LG Pepppperl

6

Super, damit hab ich’s jetzt geschafft!
Vielen, vielen, vielen Dank für die Hilfe :smile:

Das ist mein Ergebnis. Die Farben hab ich hier zum Nachverfolgen noch drin gelassen. Die kommen jetzt raus :wink:

<div id="wrapper" style="margin: 0 auto; max-width: 960px;">
<div id="wrapper_bilder">
<div id="wrapper_links" style="float: left;">
<div id="wrapper_feature1">
<div style="float: left; min-width: 80px; max-width: 170px; background-color: red;">Bild 1</div>
<div style="float: right; max-width: 310px; background-color: darkred;">Text 1</div>
<div style="clear: both;"></div>
</div>
<div id="wrapper_feature2">
<div style="float: left; min-width: 80px; background-color: yellow;">Bild 2</div>
<div style="float: right; max-width: 310px; background-color: orange;">Text2</div>
<div style="clear: both;"></div>
</div>
<div id="wrapper_feature3">
<div style="float: left; min-width: 80px; background-color: green;">Bild 3</div>
<div style="float: right; max-width: 310px; background-color: darkgreen;">Text3</div>
<div style="clear: both;"></div>
</div>
<div style="clear: both;"></div>
</div>
<div id="wrapper_rechts" style="float: right;">
<div style="background-color: blue;">Bild 4</div>
<div>Text 4</div>
<div style="clear: both;"></div>
</div>
</div>
</div>
7

Das war ja ein Wettentwickeln sondergleichen:

meine Lösung schaut so aus :

http://www.josef-aichinger.at/andrea/

mfg Peppperl :sunny:

8

Absolut perfekt!! :smiley: