need help with lay-out of image and text on product page

Hi,

http://mylittletoy.com/images/screenshot.jpg

On my product pages I have a picture of the item with a short description in bullets to the right of that image. If the text is longer than the height of the image, it continues below the image instead of on the right side.

Also, I would like for the image and the text to start at the same height (again, see screenshot please).

It would be greatly appreciated if anyone could point me in the right direction. My shop: http://www.mylittletoy.com/index.php

Quote:

---

Originally Posted by koenvandamme

Hi,

http://mylittletoy.com/images/screenshot.jpg

On my product pages I have a picture of the item with a short description in bullets to the right of that image. If the text is longer than the height of the image, it continues below the image instead of on the right side.

---

Ko,
Question 1

Edit your_template/ stylesheet.css

Locate this element #productDescription

If not there add to the sheet

#productDescription {margin-left: 13em;}

1. the red font highlighted above you will half to play with
2. But this is fun to learn how the stylesheet.css controls the web page functions
   

This is a problem that I always had with the stock product info page. My solution is to create 2 columns. In the tpl_product_info_display.php file of your template, you will need to wrap the main product image in a div and float it left, and then wrap the remaining items that you want to appear in the right column in another div, also floated left.

<div id="prodInfoLeft">
<!--bof Main Product Image -->
...
</div>

<div id="prodInfoRight">
<!--bof Product Price-->
...
<!--bof Product description -->
...
</div>

<br class="clearBoth" />


Then your stylesheet add.

#prodInfoLeft {
width: 250px;
float: left;
padding-top: 10px;
}

#prodInfoRight {
width: 300px;
float: left;
}

Adjust the widths to your needs and adjust the padding-top value of the left column until the main product image lines up with the text. Don't forget the clear at the end or you could cause your description to overlap your footer.

Quote:

---

Originally Posted by koenvandamme

Also, I would like for the image and the text to start at the same height (again, see screenshot please).

---

Ko,
Question 2,
Locate this:
includes/templates/theme079/css/stylesheet_main.css

#productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage {
line-height:20px;margin-bottom:80px;
margin-right:25px;
margin-top:36px;
text-align:center;
}

delete the highlighted red font above please


includes/templates/theme079/css/stylesheet.css Add the declaration below to the following existing element: a img {border: none;}

a img {border: none;
margin: 0em 1.9em 0em 0em; }

1. play with the red font above as you like

Thank you both. Your answers were very clear so I managed to figure it out.

Mind if I ask an other question? As you can see on the sceenshot, I added the 'recently viewed' module. However I would like to add some text between the image and the text. Do I also change this in the stylesheet somewhere?

Ko,
I will take a look

Ko,
You are welcome

Quote:

---

Originally Posted by pjb923

This is a problem that I always had with the stock product info page. My solution is to create 2 columns. In the tpl_product_info_display.php file of your template, you will need to wrap the main product image in a div and float it left, and then wrap the remaining items that you want to appear in the right column in another div, also floated left.

<div id="prodInfoLeft">
<!--bof Main Product Image -->
...
</div>

<div id="prodInfoRight">
<!--bof Product Price-->
...
<!--bof Product description -->
...
</div>

<br class="clearBoth" />


Then your stylesheet add.

#prodInfoLeft {
width: 250px;
float: left;
padding-top: 10px;
}

#prodInfoRight {
width: 300px;
float: left;
}

Adjust the widths to your needs and adjust the padding-top value of the left column until the main product image lines up with the text. Don't forget the clear at the end or you could cause your description to overlap your footer.

---

This worked so great! Thank you!