min-height/ min-width thumbnail

[jarikbiz]

Beste forumleden,

Ik ben al een tijdje bezig met het proberen van het volgende;

Ik wil op mijn productpagina dezelfde layout voor elk product krijgen. Het probleem is momenteel dat de thumbnails van de productfoto's automatisch worden verkleind. Ze blijven zo in proportie en dat is goed. Maar wat niet goed is, is dat hierdoor de buttons (zie foto) hierdoor verschuiven.

Mijn idee: het plaatsen van een table om de thumbnail en deze een minimum hoogte en breedte geven. Het gekke is dat dit niet door de browser wordt geaccepteerd:


PHP:

<?php // Product Image ?>
<div class="product-image">
<table class="product-image">
<tr>
<td class="jake">
	<a title="<?php echo $product_name; ?>" href="<?php echo $product_flypage; ?>"><?php echo ps_product::image_tag( urldecode($product_thumb_image), 'class="product-image" border="0" title="'.$product_name.'" alt="'.$product_name .'"' ) ?></a>
</td></tr></table>
</div>

CSS:

/* Product Image */
.browse-centered-view .row .product .spacer .product-image {text-align: center;}
.browse-centered-view .row .product .spacer .product-image {padding-right: 6px;}
.browse-centered-view .row .product .spacer .product-image img.product-image {max-width: 100%;width: auto;height: auto;padding: 0px 0px 12px 0px;}
.browse-centered-view .row-highlight .product .spacer .product-image .jake {min-height: 145px; min-width: 200px;}
/* Product Image -HIGHLIGHT */
.browse-centered-view .row-highlight .product .spacer .product-image {text-align: center;}
.browse-centered-view .row-highlight .product .spacer .product-image {padding-right: 6px;}
.browse-centered-view .row-highlight .product .spacer .product-image img.product-image {max-width: 100%;width: auto;height: auto;padding: 0px 0px 12px 0px;}
.browse-centered-view .row-highlight .product .spacer .product-image .jake {min-height: 200px; min-width: 200px;}

Kan iemand mij helpen ervoor te zorgen dat er een tabel ontstaat rondom de thumbnail met: min-height: 200px; min-width: 200px; ? Als ik deze rechtstreeks in de td tags plaats heeft het ook geen effect.

voorbeeld productpagina http://bit.ly/10ydK1T

 

[quintoo]

wat nou als je om die <div class="product-image"> nog een div omheen zet en die de minheight + min width te geven?

dus gewoon

<?php // Product Image ?>
<div class="product-canvas">
<div class="product-image">
<table class="product-image">
<tr>
<td class="jake">
    <a title="<?php echo $product_name; ?>" href="<?php echo $product_flypage; ?>"><?php echo ps_product::image_tag( urldecode($product_thumb_image), 'class="product-image" border="0" title="'.$product_name.'" alt="'.$product_name .'"' ) ?></a>
</td></tr></table>
</div>
</div>

.product-canvas {min-width:200px;min-height:200px;}
::eventueel zoals het andere ook omschreven is in je css
.browse-centered-view .row .product .spacer .product-canvas {min-width:200px;min-height:200px;}

& dan de rest dat in product-canvas zit ::::
.browse-centered-view .row .product .spacer .product-canvas .product-image {text-align: center;}
.browse-centered-view .row .product .spacer .product-canvas .product-image {padding-right: 6px;}
.browse-centered-view .row .product .spacer .product-canvas .product-image img.product-image {max-width: 100%;width: auto;height: auto;padding: 0px 0px 12px 0px;}
.browse-centered-view .row-highlight .product .spacer .product-canvas .product-image .jake {min-height: 145px; min-width: 200px;}
/* Product Image -HIGHLIGHT */
.browse-centered-view .row-highlight .product .spacer .product-canvas .product-image {text-align: center;}
.browse-centered-view .row-highlight .product .spacer .product-canvas .product-image {padding-right: 6px;}
.browse-centered-view .row-highlight .product .spacer .product-canvas .product-image img.product-image {max-width: 100%;width: auto;height: auto;padding: 0px 0px 12px 0px;}
.browse-centered-view .row-highlight .product .spacer .product-canvas .product-image .jake {min-height: 200px; min-width: 200px;}

Zelf niet getest dus geen idee of het werkt maar qua logica zou ik denken van wel

Succes!

 

[csshunter]

Hoi jarikbiz,
De huidige productpagina heeft helemaal geen table's, en ik zou dat zo houden.

Wat je zou kunnen doen:

.product h2 { 
    min-height: 2em; /* ruimte maken voor eventueel 2 regels (= product-titels allemaal even hoog) */
    }
.product-image {
    height: 200px; /* containers van de images allemaal even hoog als hoogste img */
    }

Wat er onder komt (prijs / bestellen / meer info) komt dan ook automatisch op dezelfde hoogte.

• Nadeel: als er 3 kleine images op een rij staan, komt er onder wat overbodige witruimte.

Met vriendelijke groet,
CSShunter

 

[jarikbiz]

Hartstikke bedankt, het werkt. Ik heb nu dit in de css gezet:

/* Product Image */

.browse-centered-view .row .product .spacer h2 {font-size: 14px;margin: 0px 0px 6px 0px;padding: 0px;text-align: center; [B]min-height: 2em;[/B]}

/* Product Name -HIGHLIGHT */
.browse-centered-view .row-highlight .product .spacer h2 {font-size: 14px;margin: 0px 0px 6px 0px;padding: 0px;text-align: center; [B]min-height: 2em;[/B]}

.browse-centered-view .row .product .spacer .product-image {text-align: center;}
.browse-centered-view .row .product .spacer .product-image {padding-right: 6px;}
.browse-centered-view .row .product .spacer .product-image img.product-image {max-width: 100%;width: auto;height: auto;padding: 0px 0px 12px 0px; [B]min-height: 200px;[/B] }

/* Product Image -HIGHLIGHT */
.browse-centered-view .row-highlight .product .spacer .product-image {text-align: center;}
.browse-centered-view .row-highlight .product .spacer .product-image {padding-right: 6px;}
.browse-centered-view .row-highlight .product .spacer .product-image img.product-image {max-width: 100%;width: auto;height: auto;padding: 0px 0px 12px 0px; [B]min-height: 200px;[/B]}

Maar toch is dit niet de oplossing die ik zocht. Ik wil namelijk niet dat de afbeelding uit zijn verband wordt getrokken. Dit gebeurd wel indien ik een minimum hoogte van 200px invoer. Is er geen css code die de functie van de tabel kan vervullen, namelijk indien de afbeelding kleiner dan 200px hoog is dat dit wordt opgevuld door een transparant kader tot aan die 200px?

Voor alsnog bedank voor deze in ieder geval betere oplossing!

 

[csshunter]

Hoi jarikbiz,
Wat je gedaan hebt, is niet de image-container een (min-)hoogte gegeven, maar het image zelf. Dan gaat dat inderdaad uit z'n verhouding lopen.

Je kan dit eens proberen:

.browse-centered-view .row .product .spacer h2,
.browse-centered-view .row-highlight .product .spacer h2 {
    min-height: 2.5em;
}

.browse-centered-view .row .product .spacer .product-image img.product-image,
.browse-centered-view .row-highlight .product .spacer .product-image img.product-image {
    height: auto;
    max-width: 100%;
    padding: 0 0 12px;
    width: auto;
}

.browse-centered-view .row .product .spacer .product-image a,
.browse-centered-view .row-highlight .product .spacer .product-image a {
    display: block;
    height:  200px;
}

Toelichting:

• De h2 van 2em was toch net iets te klein voor gelijke hoogte bij twee regels: wordt 2.5em.
• Bij het "img.product-image"-verhaal moet de {min-height: 200px;} er helemaal uit! (die trekt ze uit hun verband) - Er zou eventueel juist wel een {max-height: 200px;} opgegeven kunnen worden voor als sommige images hoger zijn.
• De link <a> waar het image in zit is het blok dat steeds hetzelfde moet blijven, en krijgt een vaste hoogte. Binnen dat blok wordt het img dan in verhouding weergegeven.
• De {display: block;} is nodig om de hele opgegeven hoogte in beslag te nemen.

Met vriendelijke groet,
CSShunter