Hallo,

ich habe ein Problem, bei dem ich leider nicht weiter weiß, da mir einfach das WIssen fehlt

Ich möchte in meinem Onlineshop auf der Startseite 3 Grafiken platzieren. Das habe ich nun über position:absolute gelöst, aber das Problem ist, dass z.B. auf einem Tablet sich alles verschiebt.

Die Conatiner sollen so aufgebaut werden, dass die Grafiken immer gleich aussehen - also eine variable Größe im Zusammenspiel aller 3 Dateien.

Das linke Bild hat eine Größe von 654px x 311px, die beiden rechten eine Größe von je 228px x 155px.

Wie kann ich das lösen?

Als Bild habe ich eingefügt, wie es aussehen soll:



Leider sieht es auf dem Handy z.B. so aus:



Hier der Laiencode

<style type="text/css">

}
#startwrap {
display: block;
padding-bottom: 311px;

}
#startlinks {
position: absolute; top:0px; left:0px;
}
#startrechts {
position: absolute; top:0px; left:654px;
}
#startrechts2 {
position: absolute; top:155px; left:654px;
}

</style>
<div id="startwrap">
<div id="startlinks"><a href="../navi.php?suchausdruck=backdra&JTLSHOP=698b0a3447fc 87d4c6d031a097ab6d6f" target="_self"><img alt="" src="http://backdra.com/mediafiles/Bilder/Startseite1.png" style="width: 654px"/></a>
</div>

<div id="startrechts">
<a href="../navi.php?suchausdruck=002&JTLSHOP=b8187e529663b85e 39c83249354e2010" target="_self"><img alt="" src="http://backdra.com/mediafiles/Bilder/Startseite2.png" style="max-width: 100%" /></a>
</div>

<div id="startrechts2">
<a href="../Jugendfeuerwehr-Line" target="_self"><img alt="" src="http://backdra.com/mediafiles/Bilder/Startseite3.png" style="max-width: 100%" /></a>
</div>


</div>



Wäre toll, wenn mir hier jemand helfen könnte.

Angehängte Grafiken

	forum.jpg (275,9 KB, 3x aufgerufen)
	forum2.jpg (142,9 KB, 1x aufgerufen)

Simple Lösung? Ohne position: absolute; arbeiten.

__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?

Danke erst einmal für deine Antwort.
Ich sagte ja, dass ich da nicht viel Ahnung habe. Deswegen bringt mich der Rat nicht weiter.
Ich habe die absolute positionen rausgenommen und nun schaut es ganz und gar komisch aus Siehe Anlage.

Code schaut jetzt so aus:

<style type="text/css">

}
#startwrap {
display: block;
padding-bottom: 311px;

}
#startlinks {
}
#startrechts {

}
#startrechts2 {

}

</style>
<div id="startwrap">
<div id="startlinks"><a href="../navi.php?suchausdruck=backdra&JTLSHOP=698b0a3447fc 87d4c6d031a097ab6d6f" target="_self"><img alt="" src="http://backdra.com/mediafiles/Bilder/Startseite1.png" style="width: 654px"/></a>
</div>

<div id="startrechts"></div>

<div id="startrechts2">
<a href="../Jugendfeuerwehr-Line" target="_self"><img alt="" src="http://backdra.com/mediafiles/Bilder/Startseite3.png" style="max-width: 100%" /></a>
</div>


</div>

Angehängte Grafiken

Unbenannt-2.jpg (144,7 KB, 3x aufgerufen)

Bei den „.hlist“-en („Neu im Sortiment“, „Unsere Bestseller“, …) hast Du bereits eine Formatierung (die Listenelementen floaten), die Du auch bei den drei (jetzt vier) Grafiken au der Startseite anwenden kannst.
Nur die Breiten sind eben anders. Beispielsweise bekommt dann #startlinks eine Breite von 80%, die #startrechts, #startrechts2 und #startrechts3 jeweils eine Breite von 20%.

Nachtrag:
Die Links und die Bilder selbst müssen dann natürlich genau so breit sein, wie die startlinks, startrechts DIVs – „width: 100%;“.

__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/