Produkt-Bilder an Box anpassen. Wie mach ich das?

Deutsches Forum
1

Hallo Forum

Die Bilder in den Produktansicht sind ja an eine feste Größe gebunden. Nun versuche ich ein etwas größeres Bild anzeigen zu lassen. Leider wird das größere Bild teilweise verdeckt
durch " mehr Info " und " vergleichen ". Im Admin habe ich auch eine größere Größe für die Bilder angegeben aber dies hatte auch keine Auswirkung darauf.

Es geht also darum " mehr Info und vergleichen " weiter nach rechts zu verschieben.

Kann mir jemand dabei behilflich sein?

2

Schau dir mal die CSS-Angaben zu:

#body .product.big {
und

#body .product.details .picture {

#body .product.big .picture {
an.

3

Danke Dir,

werde dass gleich probieren. Hoffe dass klappt damit .

4

Also, das Bild wird nun schon richtig angezeigt. Aber ich bekomme nicht den Text weiter nach rechts verschoben.

5

Dann nutz doch Firefox und das Addon Firebug. Damit lassen sich die CSS-Anpassungen relativ einfach machen.

6

Roland, FB hab ich drauf und arbeite auch damit. Aber wonach muss ich suchen damit ich den Text " vergleichen" und " mehr Info" nach rechts verschieben kann?Anbei mal das Bild dazu:

Auch wenn ich dass so mache dass das Bild korrekt angezeigt wird bleib dann aber der Text verdeckt.

So…bin nun einen Schritt weiter. Habe die Zeile 439 ergänzt mit: margin:100px; Nun wird der Terxt verschoben.
#body .product.thin tt {float: left;margin:100px;}

7

Funktioniert. So schaut das Ergebnis aus:

#body .product.thin{width:433px;height:173px; border-color: #555555;}
#body .product.head strong.h4{margin:0;background:#ffffff; padding:8px 5px 1px 7px;height:20px; position:absolute;top:-30px;left:-1px;border-top:1px solid #555555;border-left:8px solid #555555;border-right:1px solid #555555;width:259px;line-height:20px; font-size: 11px;font-weight: bold;color:#555555;}
#body .product.head strong.h4.thin{width: 549px;border-color:#555555;;color:#555555;background:#e2e2e2;padding:1px 5px 8px 7px;}
#body .product.thin .price {position:absolute; top:157px; right:175px;}
#body .product.thin .amount {position:absolute; bottom:25px; right:5px;}
#body .product.thin .tocart {position:absolute; bottom:5px; right:5px;}
#body .product.thin .moreinfo {position:absolute; bottom:5px; right:100px;}
#body .product.thin .moreinfo a {width: 135px;}
#body .product.thin .variants {position:absolute; bottom:25px; right:100px;}
#body .product.thin .actions {margin-left:100px;}
#body .product.thin tt {float: left;}
#body .product.thin .flag {float: left;margin-left:4px;}
#body .product.thin .picture{width: 155px;}
#body .product.thin .desc {color:#555555;font-size: 10px;margin-left:100px;}