Hallo liebe Gambianer, da ich seit 2 Tagen mit CSS arbeite, benötige ich Hilfe bei der allg. Darstellung der Produkte z.B. auf der Startseite in der "Empfohlen" Box. Kann mir ein Profi sagen, ob und wie ich die Anzeige der Preise wie auf dem Screenshot darstellen lassen kann? 1. Der Preis und der alte Preis sollten ruhig etwas in das Produktbild ragen. 2. Die Nachkommastellen sollten kleiner sein. 3. Unter dem Preis sollte der Produktname stehen. 4. Unter dem Produktnamen sollten die Sterne zu sehen sein. 5. Zum Schluss sollte das Rahmen wie auf dem Screenshot unten aussehen.. Sind die Punkte in etwa umsetzbar oder wg. dem Could Shop eher nicht? Info: Ich habe einen Gambio Cloud Shop. Ich denke, dass es wenn überhaupt mit CSS funktioniert. Ich habe bereits ein wenig mit CSS experimentiert und habe das Aussehen etwas geändert. So sieht die Preisanzeige aktuell bei mir aus: Für hilfreiche Tipps und Infos danke ich im Voraus! Freundliche Grüße O.C.
Mit einen negativem oberen Abstand wandert der Preis hoch... Ganz grob so... Code: .price-tax { margin-top: -150px; } Das wird so unspezifisch aber wahrscheinlich noch 1-2x an dann unerwünschten Stellen zuschlagen. Müsste man sich genauer reinfummeln.
Top vielen Dank! Hat genau so funktioniert wie ich es wollte. Das einzige Problem ist, dass der Preis beim Hovern an die ursprüngliche Stelle rutscht. Ich habe jetzt versucht den Code etwas umzubauen, aber komme nicht dahinter. Wenn ich mir den Seitenquelltext anschaue, sehe ich, dass 20x "price-tax" vorkommt, obwohl nur 10 Produkt auf der Seite angezeigt werden und denke, dass 10x price-tax für den Preis im "Hover-Modus" steht aber warum greift der Code nicht automatisch für alle price-tax Klassen?
@O.C. Versuche es mal bitte mit folgendem CSS, dazu musst du die CSS von Wilken und Babara wieder entfernen: Code: .price { position: absolute; top: 120px; right: 10px; left: 0px; }
@Till (Gambio) , besten Dank! Der Code ist fast perfekt, der Preis ist unter dem Produkt und bleibt beim Flyover auch dort, bringt aber doch zwei Nebenwirkungen mit sich. Nämlich wird der kleine Warenwert im Warenkorb-Flyover nach unten verschoben und der Artikelpreis in der "Bestseller-Box" genau so.
@O.C. Ändere das CSS bitte wie folgt ab: Code: .product-tile .price { position: absolute; top: 120px; right: 10px; left: 0px; }
@Till (Gambio) Leider einen Fehler gefunden, auf Mobilgeräten liegt der Preis genau auf dem Artikeltitel. Hab jetzt einiges probiert.. es will einfach nicht. Alles außer ".price-tax" in Verbindung mit "margin-top" macht Probleme. Ich glaube der Code von Wilken ist super, muss nur erweitert werden, dass auch beim Flyover der Preis dann oben bleibt. Ich habs jedenfalls nicht hinbekommen. Bedanke mich für weitere Hilfe..
Hallo O.C. man kann via CSS auch Anpassungen nur für bestimmte Bildschirmbreiten vornehmen. z. B. Mobil: @media (max-width: $screen-xs-max) {Code} Statt xs (Smartphone) gibt es noch sm (Tablet Porträt), md (Tablet Landscape) und lg (Deskop). Vielleicht hilft dir das weiter?
@Till (Gambio) Lösung gefunden. Ich habe jetzt den Code von Wilken und von dir kombiniert: .product-tile .price { margin-top: -155px; } Da aber bei dieser Variante im Flyover die Lieferzeit in den Artikeltitel verschoben wurde, habe ich den code wie folgt erweitert: .product-tile .price { margin-top: -155px; } .shipping-info-short { margin-top: 100px; } Jetzt passt alles. Auch auf mobil. Keine Nebenwirkungen. Vielen Dank an alle, die geholfen haben!!
Sieht prima aus. Vielleicht nützlich: Ich will nicht mäkelig sein, aber bei allen Preisen, die nicht rabattiert sind rutscht der Preis etwas höher - das sieht man bei den Empfehlungen. D.h. die Preise sind nicht alle auf einer Linie. Bestimmt lässt sich dafür auch eine Lösung finden. Viel Erfolg.