Overlapping images on product page

I uploaded 6 images for a product. The images are between 550x350 and 350x170 pixels large.
On the store product page, the 6 thumb images overlap a large imgage and also reach off the page to the right. Also the short product desccription is on top of the large image.

I took a screen shot, but it's really complicated to add an image here. I had to upload it to my website first.



Any idea how to get the images display correctly?

Thanks

gmm

The issue with the main product image can be resolved by specifying a size for the image (currently the Product will just display the full size image).

In ProductInfo.ascx.cs change defaultImage.ImageUrl setting to:

defaultImage.ImageUrl = PictureManager.GetPictureUrl(productPictures[0].PictureID, 300, 300);

this will resize image to 300px.

As for the thumb images, it is because they are all rendered as td elements. Best thing would be to replace the Repeater control in ProductInfo.ascx to a ListView and use a GroupTemplate to only have two <td> elements per row.

There is an example of this at: http://www.4guysfromrolla.com/articles/010208-1.aspx

Or you can render as a unordered floated list.

Hope this helps,

Ben

Thank you for your help.

I added the width and height (300,300) as you suggested. This fixed the main image not overlaping with the short product description.

I also moved the repeater ID+"rptProductPictures" out of the <div class="overview". This was done in the /Modules/ProductInfo.ascx page. This puts the additional images below the main image.
This is probably not the ideal solution, but it is a quick fix. This allows me to add up to 7 additional images to the product and they are nicely in a row below the main image.

Thanks agin

gmm


code]   <div class="overview">
        <h3 class="productname">
            <asp:Literal ID="lProductName" runat="server" />
        </h3>
        <br />
        <div class="shortdescription">
            <asp:Literal ID="lShortDescription" runat="server" />
        </div>
       [color=red]<!--
       the product pictures repeater was here before. I moved it out of the ,div class="overview"
       <asp:Repeater ID="rptProductPictures" runat="server">
       The repeater is now just below, outside the </div> tag.
        --> [/color]  
</div>
     [color=blue]<asp:Repeater ID="rptProductPictures" runat="server">
            <HeaderTemplate>
                <br style="line-height: 16px;" />
                <table>
                    <tr>
            </HeaderTemplate>
            <ItemTemplate>
                <td align="left">
                    <%-- <a href="javascript:UpdateMainImage('<%#PictureManager.GetPictureUrl((int)Eval("PictureID"))%>')"
                                onmouseover="javascript:UpdateMainImage('<%#PictureManager.GetPictureUrl((int)Eval("PictureID"))%>')">
                                <img src="<%#PictureManager.GetPictureUrl((int)Eval("PictureID"), 70, 70)%>" style="border: 0px;" /></a>--%>
                    <a href="<%#PictureManager.GetPictureUrl((int)Eval("PictureID"))%>" rel="lightbox-p"
                        title="<%= lProductName.Text%>">
                        <img src="<%#PictureManager.GetPictureUrl((int)Eval("PictureID"), 70, 70)%>" /></a>
                </td>
            </ItemTemplate>
            <FooterTemplate>
                </tr> </table>
            </FooterTemplate>
        </asp:Repeater>[/color]  
<div class="fulldescription">
        <asp:Literal ID="lFullDescription" runat="server" />
    </div>[/code]

Just replace the repeater section with the code below and it will show the pics in a list:

<asp:Repeater ID="rptProductPictures" runat="server">
<HeaderTemplate>
<br style="line-height: 16px;" />
<ul>
</HeaderTemplate>
<ItemTemplate>
<li>
<%-- <a href="javascript:UpdateMainImage('<%#PictureManager.GetPictureUrl((int)Eval("PictureID"))%>')"
                                onmouseover="javascript:UpdateMainImage('<%#PictureManager.GetPictureUrl((int)Eval("PictureID"))%>')">
<img src="<%#PictureManager.GetPictureUrl((int)Eval("PictureID"), 70, 70)%>" style="border: 0px;" /></a>--%>
<a href="<%#PictureManager.GetPictureUrl((int)Eval("PictureID"))%>" rel="lightbox-p"
                        title="<%= lProductName.Text%>">
<img src="<%#PictureManager.GetPictureUrl((int)Eval("PictureID"), 70, 70)%>" /></a>
</li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>

And add the following css to the App_themes/publicStore/style.css (.productDetailInfo .overview section)and alter for your needs.

.ProductDetailsInfo .overview ul{
margin:0px;
padding:0px;
position:relative;
}

.ProductDetailsInfo .overview  li{
position:relative;
border:1px solid #DFDFDF;
margin:3px;
padding:0px;
float:left;
display:block;
}