Darstellung Bilder

[Faiint.]

Hallo zusammen

Versuche gerade die Firmenseite Responsive zu machen.
Bin auch schon relativ weit, aber es fehlen mir noch die Bilder.

Diese sollten zuerst nebeneinander dargestellt werden:

XX BILD XX XX BILD XX XX BILD XX
XX BILD XX XX BILD XX XX BILD XX

Wenn der Bildschirm aber kleiner wird, z.B. auf einem iPhone dann sollten die Bilder untereinander dargestellt werden:

XX BILD XX
XX BILD XX

XX BILD XX
XX BILD XX

XX BILD XX
XX BILD XX

Könnt ihr mir da weiter helfen? Habe es schon mit DIV's versucht, leider ohne Erfolg.

 

[bdt600]

Habe es schon mit DIV's versucht, leider ohne Erfolg.

Dann zeige uns doch mal deinen erfolglosen Versuch, damit wir diesen korrigieren können

 

[Faiint.]

Hallo bdt600

Zur Zeit sieht es so aus:

<div id="1">
<a href="produkte/softwaremodule.php"><img src="../img/softwaremodule.jpg" style="height:auto; max-width:100%; width:300px" /></a>

<p><strong>Unsere Softwaremodule</strong></p>
</div>

<div class="2">
<a href="about/team.php"><img src="../img/team.png" style="height:auto; max-width:100%; width:300px" /></a>

<p><strong>Unser Team</strong></p>
</div>

<div class="3">
<a href="produkte/dienstleistungen.php"><img src="../img/dienstleistung.jpg" style="height:auto; max-width:100%; width:300px" /></a>

<p><strong>Unsere Dienstleistungen</strong></p>
</div>

Hab es schon mit float versucht, habs aber nicht geschafft.

 

[threadi]

Verwende display: inline-block oder flex (Anleitungen findet man im Netz).

 

[Tronjer]

Das ist sowohl vom Markup als auch CSS her falsch.

Klassen und IDs werden nicht mit einer Ziffer eingeleitet, Inline-Styles sollte man nie verwenden und anstatt max-width:100%, width: XXpx macht man es bei responsiven Source Images genau umgekehrt. Bei einem einfachen statischen Layout würden die Links in eine UL gehören und die Listenelemente mit float oder inline-block positioniert werden. Für eine responsive Seite bietet sich ein gridbasiertes Framework wie Bootstrap an. Wenn jedes Bild über 4 columns geht, klappt es auch mit der Responsivität.

 

[threadi]

Klassen und IDs werden nicht mit einer Ziffer eingeleitet

Dachte ich auch bis vor kurzem. Aber bei HTML5 ist es möglich ^^ http://www.w3.org/TR/html-markup/global-attributes.html

 

[Faiint.]

Verwende display: inline-block oder flex (Anleitungen findet man im Netz).

Werd das mir mal ansehen :) Danke!

 

[Faiint.]

Hat geholfen :)
Hab es mit display: inline-block gemacht ;)

Vielen Dank!