Moving Description Under Product Image
 

Trying to move the description, add to cart, etc. under the product image. We managed to get the add to cart etc. under and it is mostly staying in it's spot, but having a hard time with the description. On products with thumbnails it goes under but on products without it still sits beside it. Here is the link to the SHOP. (this link should work)

Also when we click 'add to cart' the description will move inline on the side.. then you refresh and it goes back. It does the same thing if you remove the item from the cart. Any ideas on how to get the description to stay put under the product image?

Here are several examples:

on most products with thumbnail images, the description and such shows up like below:
http://i194.photobucket.com/albums/z137/h_griego/xex1.jpg

THen, if you add that product to the cart, the description suddenly goes into a long line (this is similar to the problem we were having w/ the description being on the side in the first place and one of the reasons we need the text under the image because there is not space on the side).

http://i194.photobucket.com/albums/z137/h_griego/xex2.jpg

Then, if you refresh the page, it goes back to this:
http://i194.photobucket.com/albums/z137/h_griego/xex1.jpg


And on products without thumbnails, the description is showing up like so (two examples below):

http://i194.photobucket.com/albums/z137/h_griego/ex1.jpg

http://i194.photobucket.com/albums/z137/h_griego/xex3.jpg

And on those products without thumbs, the description doesn't turn into a long line when you add to cart, it simply appears to shift the description and 'add to cart' buttons etc. a little bit upward.

Then, on a few products, the text is running up over the image (this doesn't seem to have any relation to the number of thumbs below the main image however):

http://i194.photobucket.com/albums/z137/h_griego/ex2-1.jpg
http://i194.photobucket.com/albums/z137/h_griego/xex4.jpg

We tried increasing the size of the main image to see what effect that would have, and the image simply overlaped the text (the text went over the image). It seems that the the description and such is somehow disconnected and subject to float, kwim? Like it isn't 'locked' into place.



Any help, advice, direction would be immensely appreciated!! Thanks for looking!

Re: Moving Description Under Product Image
 

The store is closed..

Re: Moving Description Under Product Image
 

sorry about that! I updated my original post with photo examples of the problem

Re: Moving Description Under Product Image
 

If it helps to know, we used information from these two threads for guidance on how to move the description from the right side, to under the image

http://forum.x-cart.com/showthread.php?t=51475&highlight=product+descripti on+underneath+image

http://forum.x-cart.com/showthread.php?t=33781&highlight=product+descripti on+underneath+image

Re: Moving Description Under Product Image
 

Ok, so playing around with it some more, it I noticed a few things.

-If the person doesn't have any description written for their product, that seems to be what causes the text to overlap like this:
http://i194.photobucket.com/albums/z137/h_griego/ex2-1.jpg

HOWever, I went and added some description to that product, and it didn't overlap suddenly:

http://i194.photobucket.com/albums/z137/h_griego/xex5.jpg

Also, it seems like it won't overlap until you get more than two rows of thumbnails below the image. Then the thumbs start running into the text.

SO I don't know if it is the text we need to 'lock in place' or the image actually. It seems like they are not 'connected', kwim? Like if you make the image larger, the text doesn't move to compensate, etc. Sorry, hope I'm making sense.

Re: Moving Description Under Product Image
 

1) Take your shop out of closure for like 20 seconds. Once its open to public, go to http://validator.w3.org/ and fix the errors regarding normal code like missing selectors, expecting certain things... That may clear up alot of issues.

2) .product-details .image has a float: left; property. Removing that will put the description and such below.

3) .product-details .details .descr has a padding-top: 130px; property. That will remove a huge amount of white space.

4) For multiple image rows, you can put a height property on the div class Image

Enjoy.

Re: Moving Description Under Product Image
 

Thanks so much Tal! Will give it a go!

Re: Moving Description Under Product Image
 

Okay we got the description to go under the image! Thanks for that!

Now the issue is.. if we set a height to the div we can get it to go under the thumbnails fine. But for images with a lot of thumbs we had to set the height larger to allow room for them all and because of this products with no thumbs or a few thumbs has a larger space. Is there away to have the description etc below the thumbs move up if there is no thumbs or a few thumbs and go down to allow room for those with a lot of thumbs. Like to make it self adjust... or automatically move up or down depending on the amount of thumbs there.

Thanks!

Re: Moving Description Under Product Image
 

Don't set height for this div. If the div before description has float you need to clear it before the description

Re: Moving Description Under Product Image
 

I am not seeing a float before the div. Not sure what else do try.

Re: Moving Description Under Product Image
 

There are heights being set in a couple of divs around your image - all those need to be cleared. If you remove those height settings, and your description still moves up over the image - set clear:both in the description's div.

Re: Moving Description Under Product Image
 

Thanks! When I look at it in Firebug.. I can see the image and image box divs are set with a width and height.. when I remove these in Firebug and add the clear: both it all seems to line up okay. But when I look into the product.tpl file I know where the height setting is for the image div since we added that there but for the image box div I am not seeing where the height setting is at to remove it. This is the code that is for the image box div in the product.tpl file...


I have looked around everywhere but I am not seeing where the height setting is for the image box div.

Re: Moving Description Under Product Image
 

You can use webmaster mode to find the template where the image-box div is set. In this case, when you hover over the template names in webmaster mode, I suspect it will point you to the modules/Detailed_Product_Images/popup_image.tpl
If so - delete or comment out the height setting. You do have to execute care when doing this. If all your detailed images are the same height or less than the product thumb, you should be okay. If any are taller - you need to modify the css to allow for the height when you use the mouse-over of the detailed image thumbs. That is why QT coded this height into the template.

Re: Moving Description Under Product Image
 

Thank you! This seems to have worked! We appreciate your help in this!

Re: Moving Description Under Product Image
 

You are welcome.

One more thing I noticed on your site - the method you are using for the background image can become problematic when the browser window is narrow. If you make the browser narrower than how you normally view it - you can see that the divs inside your page-container can be outside of the white space you are using to define the center area in your background image.

One possible solution you can try and see if it still meets the requirements of your design is to set the background-color of #page-container to #ffffff.