New Zenner
- Join Date:
- Sep 2010
- Posts:
- 19
- Plugin Contributions:
- 0
Styling Main Product Page
This is my first post, so let me say hello to everyone and thank all the posters who have helped me along so far.
I have been trying to style the main product page by modifying the stylesheet and tpl_product_info_display.php but I can't seem to get it right. What I have done is move around the elements in tpl_product_info_display.php and added a div, to make the main image, the additional images, and the name and info show up in three columns. I am also using a flash image swapper - swap_images_via_mouseover_or_click_v1-3-9f.
The problems are these large gaps I can't get rid of. One about 30px wide between the main image and the additional images, and one about 250px wide between the additional images and the name and other info. Here is the code (I deleted the code between the comments)
<div style="float:left;"> <!--bof Main Product Image --> <!--eof Main Product Image--> <!--bof Additional Product Images --> <!--eof Additional Product Images --> </div> <!--bof Product Name--> <!--eof Product Name--> <!--bof Product Price block --> <!--eof Product Price block --> <!--bof Product description --> <!--eof Product description --> <!--bof Attributes Module --> <!--eof Attributes Module -->And this is the css:
#productMainImage {padding:0; float:left; margin:0;}
/#productMainImage {text-align: center; }/
#productAdditionalImages {margin:0;}
#productAdditionalImages .additionalImages {padding:0; margin:0; vertical-align: top; text-align: center;}
#productAdditionalImages a {text-decoration:none;}
As you can see, I have been trying set the margins and padding to 0 but I still have these large gaps. I have a picture of the problem here http://i1238.photobucket.com/albums/ff492/dkervin/site-image.png
If anyone can point me in the right direction, I would greatly appreciate it. Please let me know if I need to post more information. Thanks!
