Produktliste

[bernd.eiseler]

Hallo zusammen,

ich habe ein kleines Darstellungsproblem und komme nicht wirklich weiter bzw. finde den Fehler nicht.

Es werden drei Produkte nebeneinander angezeigt - nur teilweise zeigt das System nur einen Artikel pro Reihe an. Warum auch immer...

http://eshop.place-of-passion.com/in...igh-Heels.html

Hoffe, es kann jmd helfen.

Dank im Voraus,

Gruß Bernd

[MacKP]

Hallo bernd.eiseler,
das liegt ganz einfach an deinem float, was du nicht clearst.
Damit du auch die passende Stelle nimmst beim clear, kannst du entweder die Klassen nehmen, die du da schon hast oder du nimmst sowas:
https://css-tricks.com/almanac/selectors/n/nth-child/
oder
https://css-tricks.com/almanac/selectors/n/nth-of-type/

Und hier noch eine kurze Info zu clear: http://www.css4you.de/clear.html

Viele Grüße

[soweit_ok]

Anders gesagt liegt es daran, dass die DIV-Elemente eine unterschiedliche Höhe haben. Falls das so gewollt ist, wie MacKP schrieb, mit clear + nth-child. Falls Du für gleiche Elementhöhe sorgst, brauchst Du hingegen kein clear.

Eine andere verbesserungsfähige Sache wäre ansonsten die Verteilung der Elemente in den Zeilen. Da gibst Du width:30% und margin-right:20px. Ist so nicht optimal, weil dadurch immer rechts ein Stück zur Nutzung der gesamten Wrapper-Breite fehlt. Vor allem responsiv geht das so nicht. Besser wäre ein Prozentwert für margin und mit nth-child dem jeweils rechten Element margin:0 geben. Und nth-child auch für alle Breakpoints anpassen, dementsprechend wieviele Elemente in die Viewportbreite passen.

[bernd.eiseler]

Hallo zusammen,

vielen Dank für die Tipps.

Leider funktioniert es nicht, wie gewollt.
Wenn ich die clear Funktion benutze wird nur noch ein Produkt pro Zeile angezeigt.

Bei der child-Funktion verändert sich nichts.
Entweder ich schreibe die "Clear" Funktion an eine falsche Stellen oder...

Hier der momentane CSS-Code:
.product_list > div {
margin-right:20px;
float: left;
width: 30%;
}

Danke im Voraus

[MacKP]

Es wäre schöner, wenn du uns deinen Stand zeigen würdest, den du selbst versucht hattest. Dann kann man sehen wo deine Probleme sind...
So kann ich dir nur ein klein wenig Code geben und ich weiß nicht ob du irgendwas dabei gelernt hast... naja, eventuell ja beim nächsten mal.

Hier mal eine Variante:

.col_first {
    clear: left;
}

Du hast ja schon jede nur erdenkliche Klasse in dem HTML. Das kannst du dann auch nutzen. Ist nur noch nicht responsive das ganze. Dazu nehme ich dann lieber andere Methoden. Aber ich hab jetzt keine Lust, dir deinen CSS Code zu schreiben ;-)
Damit kannst du ja schon mal rumspielen und gucken, was das macht und wie du das weiter anwenden kannst.

Viele Grüße

[bernd.eiseler]

Vielen Dank.

Ich werde es mit ins CSS einbauen.