X-Cart forums

[h_griego]

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!

[Learner]

The store is closed..

[h_griego]

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

[h_griego]

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

[h_griego]

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.

[Shamun]

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.

[h_griego]

Thanks so much Tal! Will give it a go!

[h_griego]

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!

[cflsystems]

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

[h_griego]

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