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,

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 .

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/

Gruß,
Siggi

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

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

/*
 * css für mg-pictures.de
 * 
 */




/* Definition der benötigten IDs für Header, Navigation, Body, Footer 
 * werden als ID definiert, da sie jeweils nur einmal vorkommen
 */




#myHead {
	margin-left: 20px;
	max-width: 100%; 
}




/* Logo auf Bildschirmgröße (runter-) skalieren, wenn weniger als 500px vorhanden sind, sonst max 500px Größe */
#myLogo{
	width: 100%;
	max-width:500px;
}




#myNavLeft{
	float: left;
	padding-left: 10px;
	margin-top: 20px;
	margin-bottom: 20px;
	background-color: #fff;
	max-width: 100%; 
	height: auto;
}
#myNavRight{
	float: right;
	padding-right: 20px;
	margin-top: 20px;
	margin-bottom: 20px;
	background-color: #fff;
	max-width: 100%; 
	height: auto;
	font-weight:bold;
}




#myTextColumn{
	clear: left;
	clear: right;
	margin-left: 5px;
	text-align:left;  
	width: 98%;
	background-color: #fff;
	height: auto;
}




#myImgColumn{
	clear: left;
	clear: right;
	margin-left: 5px;
	text-align:left;  
	width: 98%;
	background-color: #ccc;
	height: auto;
}




#myFooter {
	clear: left;
	width: 100%;
	margin-left: 20px;
	background-color: #fff;
	max-width: 100%; 
	height: auto;
}

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

<!DOCTYPE html>
<html lang="en">
  <head>
	<title>MG-Pictures, Fotograf aus Lollar</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
	<link rel="shortcut icon" href="../favicon.ico"/>
	<link rel="stylesheet" type="text/css" href="css/minitest.css"/>
  </head>
  <body>
	<div id="myHead">
	<a href="index.html"><img id="myLogo" alt="" src="images/banner.jpg"></a>
	</div> <!-- myHead -->
	<div id="myNavLeft">
		<a href="index.html">&laquo; Home&nbsp;&nbsp; &nbsp;</a> 
		<a href="architektur%20fotografie.html"><span>&laquo;Architektur&nbsp;&nbsp; &nbsp;</span></a> 
	</div>
	<div id="myNavRight">
	  <a href="&raquo;Referenzen.html" target="_blank">&raquo; Referenzen  -</a>
	</div> 

	<div id="myTextColumn"> 
	  MG-Pictures bietet ihnen professionelle Fotografie in den Bereichen:
	  <ul><li>- Architektur</li><li>- Event</li><li>- Image</><li>- Produkt</li>- Portrait</li></ul>
	  F&uuml;r Preisanfragen, allgemeine Informationen zu fotografischen Dienstleistungen und sonstige Anliegen nutzen Sie bitte das Kontaktformular,
	  schreiben Sie eine E-Mail oder rufen Sie mich an, ich werde mich schnellst m&ouml;glich um ihr Anliegen k&uuml;mmern.   
	</div> 




	<div id="myImgColumn" >
		<div class="imgWrap" > 
		  <a href="http://mg-pictures.de/architektur%20fotografie.html" class="img">
		  <img src="images/index/architektur_n_medium.jpg" class="grayscale" alt="" ></a>
		  <p class="imgDescription">ARCHITEKTUR</p>
		</div>
	</div>
	<div id="myFooter"> 
	  <p> Marvin Glodek</p>
	  <p> Fotograf </p>
		  mail: &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;<a href="mailto:info@mg-pictures.de">info@mg-pictures.de</a> <br>
		  mobil:&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; 0160/3787499 <br>
		  adresse:&nbsp;&nbsp; &nbsp; Kirchstra&szlig;e 33; 35457 Lollar<br>
		<br>
	  c) Marvin Glodek
	</div>




  </body>
</html>

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

Siggi

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