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;
}
Alles anzeigen
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">« Home </a>
<a href="architektur%20fotografie.html"><span>«Architektur </span></a>
</div>
<div id="myNavRight">
<a href="»Referenzen.html" target="_blank">» 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ü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öglich um ihr Anliegen kü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: <a href="mailto:info@mg-pictures.de">info@mg-pictures.de</a> <br>
mobil: 0160/3787499 <br>
adresse: Kirchstraße 33; 35457 Lollar<br>
<br>
c) Marvin Glodek
</div>
</body>
</html>
Alles anzeigen
vielen Dank von einem "Lerndenden" für die bisherige Hilfe
Siggi
.
. Na ja, nun wird's Zeit das zu lernen - ich hoffe hier Hilfe zu finden und bin guter Dinge was das angeht 
.