Product Image & Description Position!!

[frontier2002]

You appear to have added a bunch of blank lines to your description to get the text below the image. You don't actually need to use this trick or edit any PHP files; just add to your stylesheet:

#productDescription {clear: both;}

and then delete the extra lines in your description.

Now i have place that code inside my stylesheet. Nothing change. The description and image still seem to stick together

The description should be going to the bottom of the image but nothing happen

[gjh42]

Find this in your stylesheet_main.css:

/*  ----------------------- PRODUCT INFO -----------------------  */

.categoryIcon {margin:10px;}
.categoryIcon a {color:#C70E06; font-weight:bold; text-decoration:none; font-size:13px; line-height:normal; font-weight:normal;}

.navNextPrevWrapper {margin:0px 10px; padding:10px 0px;}

#productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage {
	margin:10px; text-align:center; line-height:20px;
}
#productMainImage a, #reviewsInfoDefaultProductImage a, #productReviewsDefaultProductImage a, #reviewWriteMainImage a {
	color:#C70E06; font-weight:bold; text-decoration:none;
}

#productName {background:#8AC6E3 url(../images/h_bg.gif) top repeat-x; padding:8px 0 8px 15px; border-bottom:2px solid #FFFFFF; font-family:tahoma; color:#095082; text-decoration:none; font-size:11px; line-height:normal; font-weight:bold; text-transform:uppercase; margin:0 -13px;}
#productPrices {color:#C70E06; font-family:tahoma; font-size:13px; line-height:normal; font-weight:bold;}
#productDescription {margin:0px 10px; padding:0;}

and add clear: both; to get

#productDescription {margin:0px 10px; padding:0; clear: both;}

Tested on your site and verified to work.

[frontier2002]

Find this in your stylesheet_main.css:

/*  ----------------------- PRODUCT INFO -----------------------  */

.categoryIcon {margin:10px;}
.categoryIcon a {color:#C70E06; font-weight:bold; text-decoration:none; font-size:13px; line-height:normal; font-weight:normal;}

.navNextPrevWrapper {margin:0px 10px; padding:10px 0px;}

#productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage {
	margin:10px; text-align:center; line-height:20px;
}
#productMainImage a, #reviewsInfoDefaultProductImage a, #productReviewsDefaultProductImage a, #reviewWriteMainImage a {
	color:#C70E06; font-weight:bold; text-decoration:none;
}

#productName {background:#8AC6E3 url(../images/h_bg.gif) top repeat-x; padding:8px 0 8px 15px; border-bottom:2px solid #FFFFFF; font-family:tahoma; color:#095082; text-decoration:none; font-size:11px; line-height:normal; font-weight:bold; text-transform:uppercase; margin:0 -13px;}
#productPrices {color:#C70E06; font-family:tahoma; font-size:13px; line-height:normal; font-weight:bold;}
#productDescription {margin:0px 10px; padding:0;}

and add clear: both; to get

#productDescription {margin:0px 10px; padding:0; clear: both;}

Tested on your site and verified to work.

Glenn thanks for helping but it still not working as you can see here:http://cheap-activation.com/index.ph...&products_id=2

The description still follow the image it should at the bottom of the image

[gjh42]

Then you are not doing exactly what I suggested. I know that it works when done correctly because I have seen it work on your site.

[frontier2002]

Then you are not doing exactly what I suggested. I know that it works when done correctly because I have seen it work on your site.

But i did it exactly as you instructed. see below

.categoryIcon {margin:10px;}
.categoryIcon a {color:#C70E06; font-weight:bold; text-decoration:none; font-size:13px; line-height:normal; font-weight:normal;}

.navNextPrevWrapper {margin:0px 10px; padding:10px 0px;}

#productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage {
margin:10px; text-align:center; line-height:20px;
}
#productMainImage a, #reviewsInfoDefaultProductImage a, #productReviewsDefaultProductImage a, #reviewWriteMainImage a {
color:#C70E06; font-weight:bold; text-decoration:none;
}

#productName {background:#8AC6E3 url(../images/h_bg.gif) top repeat-x; padding:8px 0 8px 15px; border-bottom:2px solid #FFFFFF; font-family:tahoma; color:#095082; text-decoration:none; font-size:11px; line-height:normal; font-weight:bold; text-transform:uppercase; margin:0 -13px;}
#productPrices {color:#C70E06; font-family:tahoma; font-size:13px; line-height:normal; font-weight:bold;}
#productDescription {margin:0px 10px; padding:0; clear; both;}

[frontier2002]

Then you are not doing exactly what I suggested. I know that it works when done correctly because I have seen it work on your site.

Glenn you are right lol...i must thank you so much for little problem that cause me headache ...i should have put colon instead of semi-colon after the clear

Thank YOU

[gjh42]

Glad you found the hang-up and got it working!

[frontier2002]

Glad you found the hang-up and got it working!

May thanks you are real good on this . By the way i saw many zen cart template (template monster) with the author name Glenn is that you?? lol.

[Redcinamn]

I have a whole new question is it possible to align the extra images (from bottom) to the left of the main image?

Seen here: http://www.melijoe.com/63719-silhoue...wing-city.html


working on this page: http://www.tylerandtallulah.com/shop...-winter-p-1256


Thanks in advance!!

~Red

[gjh42]

I would never have anything to do with the TM way of doing things, so no, it's not me.