Responsive Layout mit Bildern und Text

  • Hi,
    ich versuche nun seit 2 Tagen ein Layout für die Website meines Sohnes hinzubekommen und verzweifle langsam :-(.


    Der Aufbau soll wie folgt sein:

    • es gibt 6 Bilder und zwei Textabschnitte
    • Je nach Auflösung des Browsers (Handy, Tablet, PC mit geringer Auflösung, PC mit hoher Auflösung) soll die Anordnung wie folgt wechseln:

    Handy:
    Text1
    Bild1
    Bild2
    Bild3
    Bild4
    Bild5
    Bild6
    Text2


    Anordnung nächste Auflösungsstufe:
    Bild1 Text1
    Bild2 Text2
    Bild3
    Bild4
    Bild5
    Bild6


    Anorndung nächste Auflösungsstufe:
    Bild1 Bild2 Text1
    Bild3 Bild4 Text2
    Bild5 Bild6


    Anordnung höchste Auflösung:
    Bild1 Bild2 Bild3 Text1
    Bild4 Bild5 Bild6 Text2


    Ich habe das so nach mehreren Versuchen zwei Versionen in denen entweder die eine oder die andere Darstellung funktionier, aber nie alle :-).


    Lösung 1: unter http://mg-pictures.de/testseite_mg_pictures.html zu sehen. Dabei kann ich aber Text1 und Text2 nicht trennen (habe erst mal alles zusammengefasst) und das Spaltenlayout für die Bilder klappt auch nicht ganz so wie es soll. Idee dabei: links ein div für die Bilder, rechts ein div für die Texte. Aber links klappt dann der Wechsel von einspaltig zu zweispaltig zu dreispaltig nicht und den Text rechts muss ich mit einer width-Angabe in px versehen, was dann aber je nach Auflösung entweder zu schmal oder zu breit ist.


    Lösung 2: ein table-layout wie bei http://mg-pictures.de/testseite_grid.html. Dabei rutscht mir aber der Text in der rechten Spalte ganz nach unten und fängt erst da an, wo die Bilder in der linken Spalte aufhören. Setze ich links probeweise auch nur Text, steht der Text in der rechten Spalte auch ganz oben - warum beginnt der mit Bildern in der linken Spalte erst unterhalb der Bilder? Immerhin klappt hier der Umbruch der Bilder in 1.2 bzw. 3 Spalten. Ich vermute, das der Anstaz über Table noch am besten möglich ist. Wenn das erst mal generell funktioniert (Text beginnt in seiner Spalte ganz oben), könnte ich wohl über @media screen and (min-width: ...) für unterschiedliche Auflösungen die table-Elemente unterschiedlich definieren und damit das gewünschte Layout erreichen - oder???


    Da ich etwas dazu lernen möchte sind mir Tipps, Erklärungen oder ein Verweis auf ein Tutorial lieber als fertige Lösungen. Die funktionieren dann zwar, aber bei der nächsten Änderung weiß ich wieder nicht warum sie funktionieren und wo ich für die Anpassung ansetzen muss. Tutorials zu "mehrspaltigem Layout mit CSS" habe ich bestimmt schon mehr als 20 gelesen. Die funktionieren auch prima, so lange man nur Text verwendet - aber mit den Bildern zusammen hat keiner dieser Ansätze mich wirklich weiter gebracht.


    VIelen Dank schon mal im Voraus
    Siggi

  • Hallo


    Das wird leider schwierig.


    Du willst eine aktuelle responsive Seite, verwendest aber eine alte HTML-Version und die verwendeten Elemente wie zum Beispiel font oder big sind teilweise bereits in dieser veralteten HTML-Version veraltet.


    Zudem erschwert das verwendete Inline-CSS Anpassungen.


    Deine Wünsche sind mit aktuellem HTML5 und CSS3 problemlos umsetzbar. Dazu muss der Quellcode aber komplett neu aufgesetzt werden. Die Frage ist ob du dazu bereit bist?


    Gruss


    MrMurphy

  • Hallo,


    die Seite ist ja derzeit alles andere als umfangreich und das neu Aufsetzen sollte weniger Arbeit sein, als die bisherige tagelange Suche nach einer Lösung, um den bisherigen Stand den mein Sohn aus diversen Vorlagen zusammenkopiert hat so hinzubekommen, wie es eigentlich sein soll. Ich komme eigentlich auch aus einer ganz anderen Ecke (Delphi und Datenbakentwicklung, Oracle, Firebird,...) und HTML und CSS sind für mich Techniken, für die man sich interessiert, aber sie mangels Zeit nicht beherrscht :( . Na ja, nun wird's Zeit das zu lernen - ich hoffe hier Hilfe zu finden und bin guter Dinge was das angeht :thumbup: .


    Wenn das gewünschte Layout mit HTML5 und CSS3 problemlos umsetzbar ist, bin ich gerne bereit, die ganze Seite von Grund auf neu zu erstellen. Wird aber immer nur Abends neben dem Job und am Wochenende möglich sein.


    Ich habe mal aus der Seite alle "Besonderheiten" entfernt und die Version unter http://mg-pictures.de/minitest.html ist so nah dran am gewünschten Ergebnis, wie ich es mit meinem Kenntnisstand hinbekomme. Hier fehlt mir der entscheidende Tipp, wie das gewünschte Layout mit der wechselnden Anzahl Spalten grundsätzlich hinzubekommen ist. Alles was dann "Formatierung" im Text angeht, lässt sich voraussichtlich recht einfach machen, wenn das zumindest für mich schwierige Thema "responsive Layout" mal gelöst ist. Für diese Punkte gibt es ja genügend Tutorials, unter anderem auch bei http://www.html-seminar.de/ :D


    Gruß,
    Siggi

  • Hallo


    Zitat

    Hier fehlt mir der entscheidende Tipp, wie das gewünschte Layout mit der wechselnden Anzahl Spalten grundsätzlich hinzubekommen ist.


    Der Tipp heißt Flexbox.Oder in Langform: Das Flexbox-Modell. Damit können heute die meisten Layouts erstellt werden. Auch zum Beispiel die Navigation.


    Gruss


    MrMurphy

  • Danke!


    bevor ich mich in unproduktivem Herumprobieren verlaufe habe ich noch eine kurze Rückfrage ob ich das Prinzip richtig verstanden habe und nach diesem Ansatz vorgehen sollte:

    • ich definiere für den Bereich, der die spaltenweise Darstellung haben soll, eine flexbox, genauer einen Container und 4 Spalten
    • ich gebe jeder Spalte neben anderen Eigenschaften auch die Eigenschaft "order" (damit ich im Handy-Layout die Reihenfolge beliebig festlegen kann)
    • über Media Query stelle ich fest, welche Auflösung der Client hat.
    • im einfachsten Fall unterscheide ich zwischen PC und Handy: PC-Darstellung mit flex-direction:row, Handy mit flex-direction:column

    Soweit sollte das passen.
    Wie erreiche ich dabei am besten, dass bei einer mittleren Auflösung statt 3 Bilder + Text (also 4 Spalten) nur 2 Bilder + Text (also 3 Spalten) angezeigt werden. Ich kann ja das Layout auch dabei über die per media query festgestellte Auflösung ändern. Aber sollte ich dann ggf. mehrere css-Dateien erstellen und je nach Auflösung die passende verwenden oder ist das übersichtlicher / besser (für diesen relativ kleinen Umfang) in einer css untergebracht? Das Projekt wird ja noch wachsen - ich würde also je Auflösungsbereich (vermutlich: Handy, Tablet und PC) eine css-Datei anlegen, die das Layout entsprechend festlegt. Wäre das der richtige Weg?


    Siggi

  • Hallo


    Zitat

    im einfachsten Fall unterscheide ich zwischen PC und Handy: PC-Darstellung mit flex-direction:row, Handy mit flex-direction:column


    Zitat

    vermutlich: Handy, Tablet und PC


    Nein. Diese Einteilung solltest du schnell und konsequent vergessen. Es gibt für Webseiten keine Handys, Smartphones, Tablets, Notebooks, PC und was auch immer.


    Wie sich eine Webseite visuell verhält hängt nur von der zur Verfügung stehen Fensterbreite ab, egal was für ein Gerät der Bildschirm ziert.


    Daraus folgt dann auch gleich


    Zitat

    Das Projekt wird ja noch wachsen - ich würde also je Auflösungsbereich (vermutlich: Handy, Tablet und PC) eine css-Datei anlegen, die das Layout entsprechend festlegt. Wäre das der richtige Weg?


    dass das der falsche Weg ist. Das CSS wird nicht nach Geräten oder der Fensterbreite unterteilt, sondern nach der Struktur der Webside und wiederkehrenden Darstellungen, folgt also dem Inhalt. Ansonsten landest du ganz schnell in Teufels Küche, nicht als Koch, sondern als Dessert.


    Ob das CSS in einer oder mehreren CSS-Dateien liegt ist dabei zweitrangig. Bei der Entwicklung des Layouts ist die Unterteilung auf mehrere CSS-Dateien durchaus sinnvoll, da so verschiedene Lösungen parallel entwickelt und schnell ein- und ausgebunden werden können.


    So entstehen auch viele Media Query-Blöcke, die direkt bei den jeweiligen Grundangaben stehen und leicht gepflegt und angepasst werden können. Das ist auch sinnvoll, da der Einsatz der Media Queries vom jeweiligen Inhalt bestimmt wird.


    Zitat

    ich definiere für den Bereich, der die spaltenweise Darstellung haben soll, eine flexbox, genauer einen Container und 4 Spalten


    Nein.


    Flexbox kann zwar viel, aber nicht alles.


    Alle Container, die mittels einer Flex-Anweisung gestaltet werden sollen (Flex-Items), müssen direkt in einem übergeordneten Container (Flex-Container) liegen. Flexbox verteilt dann den Leerraum, so dass die gewünschte Darstellung erzielt wird. Zusätzlich kann die Reihenfolge der Flex-Items unabhängig vom Quelltext bestimmt werden.


    Zitat

    Wie erreiche ich dabei am besten, dass bei einer mittleren Auflösung statt 3 Bilder + Text (also 4 Spalten) nur 2 Bilder + Text (also 3 Spalten) angezeigt werden.


    Es werden keine Spalten erstellt. Dadurch, dass alle übereinander stehenden Container jeder Zeile gleich breit sind erscheint nur die Illusion von Spalten, also eine Spaltenansicht. Denn


    Zitat

    ich definiere für den Bereich, der die spaltenweise Darstellung haben soll, eine flexbox, genauer einen Container und 4 Spalten


    durch konkrete Spalten könnte deren Inhalt nicht mehr frei angeordnet werden, so wie es dir vorschwebt.


    Die Spaltenansicht wird durch die Breite der Flex-Items erzeugt. Bei 25% passen vier Container nebeneinander, bei 33,33% drei. Wobei je nach Boxmodell noch padding, border und margin berücksichtigt werden müssen. Bei 25% Breite und einem Rahmen von 1px passen nur drei Container nebeneinander.


    Bei Flexbox empfiehlt sich aktuell das Content-Box-Modell, da einige noch relevante Browser dies bei Flexbox stur anwenden. Ansonsten müsste für diese Browser immer ein Fallback eingebaut werden.


    Am sinnvollsten und bewährtermaßen erstellst du zunächst das Layout für schmale Fenster ohne Flexbox. Wer immer noch die inzwischen unbegründete Sorge trägt, das Flexbox von den Browsern einigen / vielen seiner Besucher nicht unterstützt wird, hat damit gleich ein Fallback.


    Dann werden mit zunehmender Fensterbreite die Media Queries und Flexbox eingefügt und damit aktiviert. Diese Vorgehen wird mit dem Schlagwort Mobile First umschrieben.


    Gruss


    MrMurphy

  • Danke für die sehr ausführlichen HInwesie zum "falschen" Vorhaben.
    Ist es OK, wenn ich nach vermeintlich erfolgreicher Umsetzung eines weiteren Tipps wieder nachfrage, ob das so korrekt ist und wie es dann weitergehen kann?


    Ich habe jetzt ein "Mobile-first" Layout unter http://mg-pictures.de/minitest.html erstellt. Dabei habe ich für nur einmal verwendete Bereiche (Header, Logo, Navigation,...) jeweils IDs im CSS vergeben, für wiederkehrende Elemente (imgWrap) jeweils eine Klasse.


    Mal abgesehen davon, dass man das Layout sicher noch hübscher machen kann (das hat aber Zeit, aktuell ist als "aufhübschen" nur der hover-Effekt für die Bilder drin) geht es mir hier erst mal Schritt für Schritt um die grundsätzliche Struktur.


    Ist das erst mal so aufgebaut, wie es für ein responsive-Layout notwendig ist? Ist da grundsätzlich noch etwas dabei, was nicht dem richtgen Ansatz folgt?


    Wenn das passt, dann erste Frage zu einem für mich aktuell noch nicht lösbaren Vorhaben: der im HTML als myTextColumn und myFooter bezeichnete Text sollen bei ausreichender Auflösung / Bildschirmbreite nicht über und unter den Bildern stehen sondern beides rechts daneben.


    [Blockierte Grafik: http://www.mg-pictures.de/images/layout.gif]


    Mit einer Flexbox mit den Items myImgColumn, myTextColumn und myFooter und dazu definierter "order" sowie einer Änderung ja nach über @media erkannter Auflösung wäre das ja möglich, aber wenn ich den Kommentar im vorherigen Post richtig verstanden habe, ist das nicht der richtige Weg - oder doch??


    Anbei mal aktuelles CSS und HTML



    Der HTML-Code (vereinfacht auf einen Menüeintrag und ein Bild)


    vielen Dank von einem "Lerndenden" für die bisherige Hilfe


    Siggi

  • Hallo


    Zitat

    Ist es OK, wenn ich nach vermeintlich erfolgreicher Umsetzung eines weiteren Tipps wieder nachfrage, ob das so korrekt ist und wie es dann weitergehen kann?


    Klar.


    Zitat

    der im HTML als myTextColumn und myFooter bezeichnete Text sollen bei ausreichender Auflösung / Bildschirmbreite nicht über und unter den Bildern stehen sondern beides rechts daneben.


    Wie schon geschrieben wirst du ein paar Abstriche an deinen Layoutwünschen machen müssen. Das kommt aber später.


    Die Anordnung erscheint mir sinnvoll und ist mit Flexbox umsetzbar. Wie du aber wohl schon vermutest passt die Struktur deiner Seite noch nicht.


    Momentan hast du folgenden Aufbau



    Mit Flexbox können jedoch "nur" Container innerhalb eines übergeordneten Containers angeordnet werden. Für deine Wünsche benötigst du also folgende Struktur



    Nebenbei: Wobei id nur verwendet werden sollten, wenn sie sachlich erforderlich sind. Schöner und praxisgerechter wäre demnach



    Weiter zur Lösung:


    #myCardWrap wird dann zum Flex-Container und #myTextColumn, .imgWrap sowie #myFooter zu Flex-Items.


    Ich habe mal eine Testseite erstellt. Du kannst ja mal schauen ob das Verhalten deinen Vorstellungen entspricht. Nicht das wir die ganze Zeit aneinander vorbei schreiben:


    Testseite


    Wobei ich darauf geachtet habe die Regeln von HTML5/CSS3 einzuhalten, auf besucherfreundlichkeit geachtet habe und die aktuelle und zukünftige Entwicklung berücksichtigt habe. hover-Effekte zum Beispiel machen in Zeiten von um sich greifenden Touchscreens nur noch wenig Sinn.


    Gruss


    MrMurphy

  • Hallo MrMurphy,


    die von Dir erstellte Testseite passt sehr gut zu meinen Vorstellungen. Ich muss jetzt mal was für die Familie kochen und werde mir das gleich nach dem Abendessen als "Lehrstück" vornehmen und meine Seite entsprechend anpassen.


    Mit Verständnis-Fragen komme ich dann wieder hierher zurück, aber ich glaube nach einem ersten Blick auf den Sourcecode werden das nicht allzu viele sein.


    Vielen Dank schon mal!


    Die nächsten zwei Tage bin ich beruflich unterwegs, voraussichtlich werde ich erst Freitag/Samstag wieder mehr Zeit haben. Du hast jetzt also erst mal etwas Ruhe vor meinen Fragen ;) .


    Viele Grüße,
    Siggi

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!