Hallo,
Ich bin gerade am verzweifeln^^
Ich habe einen Rahmen, in welchen sich überlappende Grafiken befinden (ähnlich wie hier die Karten: http://de.html.net/tutorials/css/lesson15.php )
Jetzt will ich natürlich das gesamte Design des Projekt gleich responsiv machen was ja kein Problem ist (alles andere funktioniert ja auch)
Im Headbereich sämtlicher Quatsch drin.. <meta name="viewport" content="width=device-width, initial-scale=1.0"> usw..
img { width: auto; max-width: 100%; height: auto; }
#wrapper {
position: relative;
max-width: 100%;
border:1px #000000 solid; }
#grafik1 {
position: absolute;
left: 50px;
top 50px;
z-index: 1; }
#grafik2 {
position: absolute;
left:75px;
top 75px;
z-index: 2; }usw.
HTML:
<div id="wrapper">
<div id="grafik1"><img src="a1.jpg"></div>
<div id="grafik2"><img src="a2.jpg"></div>
</div>
Jetzt ist es so, das diese Div's (#grafik1, #grafik2 usw.) mit den Grafiken drin, sich bei kleineren Bildschirmen nicht verkleinern---die bleiben stur auf ihrer Größe/Breite.
Liegt es daran, das diese eine left und top Angabe haben? Geht das dann überhaupt responsiv? Das wäre schlecht weil alle Grafiken nebeneinander eine Breite von über 1600px hätten...
Bei anderen Elementen auf der Seite funktionert alles ohne Probleme bis auf die Sachen mit den z-index...?
