Fixing position of product description

Hi Zenners,

I'm trying to make my product pages a bit more uniform, and the first step in my grand scheme is to make sure the product descriptions stay below the product images.

At the moment, if there are no additional images, the description will shift up next to the image, and it generally looks messy.
Here's an example: http://www.the-ishop.co.uk/earmic-p-2.html

I want it to be like this (without the need for additional images):
http://www.the-ishop.co.uk/bumple-rim-protector-for-iphone-4-p-6.html

If anyone could advise me as the the best course of action, I'd be grateful.

Cheers

Tristan

https://www.zen-cart.com/tutorials/index.php?article=170 might help.

I checked that out, but didn't give me any joy unfortunately!

That tells me about the Product Info section in Admin>Configuration, but I think what I may need is something more to do with the actual PHP files.

From what I understand, I need to create a kind of layout limitation that keeps the description below the product image, as opposed to around it. I guess it's almost like the picture and text formatting in Microsoft Word.
At the moment, I have Square, but I want to have Top and Bottom (in this case, just bottom of course!)

I still can't get this sorted out - can anyone else help me out?

Well by looking at the layout in firefox with fire bug I see this:

https://www.zen-cart.com/tutorials/index.php?article=5

this is the one your like:> <div id="productMainImage" class="centeredContent back"><div id="productAdditionalImages">

<h2 id="productPrices" class="productGeneral"> £4.99</h2> <div id="cartAdd"> <div id="productDescription" class="productGeneral biggerText"> <br class="clearBoth"> <div id="productAttributes"> <div class="navNextPrevWrapper centeredContent"> <div id="productReviewLink" class="buttonRow back">

Simple so follow the tutorial above and move to match this setting...

Yes, that is what I have at the moment, but despite this layout, the description still manages to squeeze itself inbetween the product image and the add to cart button.
For example: http://www.the-ishop.co.uk/mipad-flame-case-p-12.html.
Is there not some piece of HTML or PHP code that creates a kind of barrier, to stop the description moving as high as it can? I would add the style="margin-top:NUMBERpx" to it, but that would shift it down even further when there are additional product images.

I hope I explained that properly!

you have to move the <div id="productAdditionalImages"> block of code below the main image is this what you have done too.

should look like this:

<!--bof Product Name--> <h1 id="productName" class="productGeneral"><?php echo $products_name; ?></h1> <!--eof Product Name--> <!--bof Additional Product Images --> <?php /** * display the products additional images */ require($template->get_template_dir('/tpl_modules_additional_images.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_additional_images.php'); ?> <!--eof Additional Product Images -->

Yes, I have.

Here's what I have at the moment:

• Main Image
• Additional Images
• Price
• Add to Cart
• Description
• Attributes
• Previous/Next Buttons
• Cross Sell Module
• Facebook Comments

I think i see what is happening it does not show up if you don't have an image...

Trying adding one one additional image and see what it does to the layout please

This will fix it...

Find this:

<!--bof Product Name--> <h1 id="productName" class="productGeneral"><?php echo $products_name; ?></h1> <!--eof Product Name-->

Change to this:

<!--bof Product Name--> <h1 id="productName" class="productGeneral"><?php echo $products_name; ?></h1> <!--eof Product Name--> <br class="clearBoth">

Right, did that, and for products without Additional Images, it works great. Thanks for that.

However, for products WITH Additional Images, the description is now pushed down -> http://www.the-ishop.co.uk/hybrid-armour-for-iphone-3gs-p-120.html
Is there a way that I can define an IF statement?
(The code is undoubtedly incorrect, but just to illustrate)
IF Additional Images = 0 then br class="clearBoth"
IF Additional Images = 1 then do nothing

Something like that, anyway

look at: includes/templates/theme393/css/stylesheet_main.css

#productName {
background: url("../images/title-bg.png") no-repeat scroll 18px 11px #545454;
clear: both;
color: #FFFFFF;
font-size: 14px;
font-weight: normal;
margin: 0 0 15px;
padding: 10px 10px 9px 40px;
position: relative;
text-transform: uppercase;
}The highlighed red font above is what you need to adjust

Right, as you may have noticed, that's been sorted out.
I realised that the product name would be better below the image, as it was out of the way, and when I moved it, it inadvertently acted as the barrier that I was hoping to add!

Thanks for the ideas!

Was post #12 the correct fix?

The main image and additional images are both floated left, so the description needed something to clear the float and keep it below the floated elements. The h1 does this:

stylesheet_main.css (line 178)

#productName {
background: url("../images/title-bg.png") no-repeat scroll 18px 11px #545454;
clear: both;
color: #FFFFFF;
font-size: 14px;
font-weight: normal;
margin: 0 0 15px;
padding: 10px 10px 9px 40px;
position: relative;
text-transform: uppercase;
}

It also would have worked to just add a clear: left; here:

stylesheet_main.css (line 180)

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

hi,
i want to add the ADD TO CART button in the ATTRIBUTES BOX itself.

can this be done, and how?

my website is: http://shopping.muteyaar.org/index.php?main_page=product_info&cPath=2&products_id=230

i want the attributes to be on the left hand side and teh add to cart button on the right hand side in the SAME BOX as of attributes.

kindly help me.