Hallo Zusammen, leider komme ich nicht weiter. Mein Problem ist, dass sich zwei Bilder verschieben anstatt einfach in der zweiten Reihe zu bleiben. Vielleicht könnte mir jemand mit dem Codeschnippsel helfen. Ein Screenshot wie es aussieht habe ich auch hinterlegt. Die Artikel unter "Unter derzeitige Empfehlungen" sollten natürlich unter der Image Gelerry angezeigt werden. Code: <style type="text/css">div.img { margin: 12px; border: 0px solid #ccc; float: left; width: 270px; } div.img:hover { border: 0px solid #777; } div.img img { width: 100%; height: auto; } div.desc { padding: 15px; text-align: center; } </style> <div class="img"><a href="http://www.fahrrad-sale.de/images/categories/ebike-damen.jpg" target="_blank"><img alt="E-Bike" height="200" src="/images/categories/ebike-damen.jpg" width="300" /> </a> <div class="desc">E-Bike</div> </div> <div class="img"><a href="http://www.fahrrad-sale.de/Fahrrad/Trekking/" target="_blank"><img alt="Trekking" height="200" src="/images/categories/trekking.jpg" width="300" /> </a> <div class="desc">Trekking</div> </div> <div class="img"><a href="http://www.fahrrad-sale.de/images/categories/city.jpg" target="_blank"><img alt="Cityfahrrad" height="200" src="/images/categories/city.jpg" width="300" /> </a> <div class="desc">Cityfahrrad</div> </div> <div class="img"><a href="/images/categories/Crossbike.jpg" target="_blank"><img alt="Crossbikes" height="200" src="/images/categories/crossbikes.jpg" width="300" /> </a> <div class="desc">Crossbike</div> </div> <div class="img"><a href="http://www.fahrrad-sale.de/images/categories/atb-jugend.jpg" target="_blank"><img alt="Jugendrad" height="200" src="/images/categories/atb-jugend.jpg" width="300" /> </a> <div class="desc">Jugendrad</div> </div> <div class="img"><a href="http://www.fahrrad-sale.de/images/categories/mountainbike.jpg" target="_blank"><img alt="Mountainbike" height="200" src="/images/categories/mountainbike.jpg" width="300" /> </a> <div class="desc">Mountainbike</div> </div> <div class="img"><a href="http://www.fahrrad-sale.de/images/categories/rennrad.jpg" target="_blank"><img alt="Rennrad" height="200" src="/images/categories/rennrad.jpg" width="300" /> </a> <div class="desc">Rennrad</div> </div> <div class="img"><a href="http://www.fahrrad-sale.de/images/categories/faltrad.jpg" target="_blank"><img alt="Faltrad" height="200" src="/images/categories/faltrad.jpg" width="300" /> </a> <div class="desc">Faltrad</div> </div>
Ich rate mal ins Blaue: die Bilder 1 und 2 der ersten reihe sind ein Pixel höher als die Bilder 3 und 4. dadurch entsteht in der 2. Reihe eine Lücke unter den Bildern 1 und 2.
Sie haben recht, jetzt sehe ich es. Diese werden automatisch skaliert oder nícht? Wenn ich die Größe der beiden Bilder manuell verändere, werden Sie nicht mehr responsive angezeigt. Wie wäre dann der Code richtig?
Die werden auf die Breite skaliert, aber nciht auf die Höhe. In dem Moment, wo im Code eine feste Größe angegeben wird, ist es mit responsive vorbei. . In Deinem Code steht jetzt oben ...width: 270px....width: auto...height: auto und dann im Div height 200px width: 300px Ohne einen Blick auf die Seite (und in den css-Code) werfen zu können, bleibe ich beim Raten: der obere Code überschreibt das was im div steht. Die Bilder sollten alle in der selben Größe hochgeladen werden, dann passieren solche Verschiebungen nicht. Und ich würde statt der festen Größen im Div ein respnsive rein schreiben HTML: <div class="img"><a href="http://www.fahrrad-sale.de/images/categories/ebike-damen.jpg" target="_blank"><img alt="E-Bike" class="img-responsive" src="/images/categories/ebike-damen.jpg" /> </a> <div class="desc">E-Bike</div> </div> Die Größe hast Du ja schon davor festgelegt. Wobei ich das css in eine eigene Datei schreiben würde und nicht ins html. Gegebenenfalls auch für die einzelnen Bildschirm-Auflösungen angepasst.
Du hast unterschiedlich hohe Bilder. Könntest beheben indem du dem DIV eine Min. höhe gibst, Code: .subcategories-listing-container .subcategories-listing .subcategory-item { min-height: 230px; } oder eine max-height: 220px; damit sorgst dafür das der Container um das Bild gleich hoch wird und daher nicht an den Ecken anstößt wenn das nciht der Fall ist Viel einfacher ist aber gleich die Bilder einheitlich zu machen vor dem Upload
Besten Dank euch beiden! Hab jetzt alle Bilder in der selben größe hochgeladen. Taaadaaaa es ist so wie ich es wollte.