Layout on Product Detail page

[whitknits]

Hi,

I sell pattern books in my store and on the product detail page I have pictures of each pattern, perhaps 15 or so. I was having a problem with some of the pictures appearing on top of, not above, but over, and below the copyright info at the bottom of the screen. The line to indicate the bottom of the page would go right through the pictures. My developer made some adjustments but now everything is crowded together on the page and I am limited in how many pictures I can include before the problem starts again. Now that my store has been up and running I notice another problem. Once a customer purchases a pattern book Zen Cart includes information about what other folks have purchased who also purchased that book. Unfortunately, my additional pictures show up on top of and covering that information. It's impossible to see what is going on. You can see what it looks like here:

http://www.whitknits.com/index.php?m...products_id=89

Can anyone offer any insight into how to fix this? It almost seems that my overall page length is not long enough to allow all this information to fit.

Thanks,

Nancy

[gjh42]

Here's your problem:

#productAdditionalImages {
width: 650px;
position:absolute;
left:165px;
top:493px;	
}

The position:absolute; takes the images out of the page layout flow, so they don't affect where other elements end up, and places them at a specific distance from the top of the page.

That's fine if you know the size of the additional images block, and the sizes of the elements above it, so they can be firmly positioned and not run into each other.

This is obviously not the case here. You will have to use another method to get the images where you want them. They look fine to me just as they fall normally.

#productAdditionalImages {
width: 650px;/*delete this*/
position:absolute;/*delete this*/
left:165px;/*delete this*/
top:493px;/*delete this*/
}

.imgLinkAdditional {display: none;}/*add this to suppress the "larger image" text*/

#headerWrapper
{
	text-align: left;
	margin: 10px 0;/*add the 0 in two places as shown to keep width from pushing out the sides*/
	padding: 10px 0;
	background-image: url(http://www.whitknits.com/includes/templates/template_default/images/whitknits_shipping.jpg); background-repeat: no-repeat;
	background-position: 650px 0px;

}

Also, editing #headerWrapper as shown will make your page neater.

[whitknits]

Hi Glen,

Thanks so much for your reply. My developer made the changes that you recommended, but still everything looks like it is stacked one on top of another from my computer. It appears that it looks fine from my husband's Mac and kid's computer, from your computer and from my developer's computer. We have fiddled with the resolution and can't resolve this. I think I'm going to have to accept that there is an issue at my end, but not with the store. If you have any suggestions I am open to them. Thanks again for taking the time to respond. I really appreciate it and happy holidays!

Nancy

[gjh42]

It appears that you have undone all of the stylesheet changes I suggested, as none of them exist in your current active stylesheet.

When I apply them in Web Developer > CSS > Edit CSS, they work as intended. Are you sure the changes were made in the right place?

[whitknits]

Hi Glenn,

Thanks for your follow up. I don't know if they were applied as you suggested since I don't understand this and I'm having a developer do it. I can manage in the admin section, but I think you were referring to changing code which is not something I know. Frankly, I didn't even understand what you were suggesting. I will have to ask my developer to have another look at it and I'll let you know.

Thanks again and happy holidays!

Nancy

[whitknits]

Hello again,

One other thought. Can you tell me how to make the change? Is it pretty basic?

Thanks,

Nancy

[gjh42]

The changes did appear shortly after I posted last night, and they look fine. You have a nice neat grid of pictures without the clutter of "larger image" captions, and good spacing.

I noticed that the commenting out of #productAdditionalImages properties was done with several errors, but fortunately the errors canceled each other out and resulted in the right effect.

The changes I suggested were very basic and easy to do (and all done now). It would be just a matter of opening /includes/templates/your_template/css/stylesheet.css in a file editing program like Notepad++ and deleting the existing #productAdditionalImages declaration, adding the .imgLinkAdditional one and editing the #headerWrapper as shown.

[whitknits]

Hi Glenn,

You are a genius! My developer made the changes and, as you noticed, the problem is gone. I can't thank you enough!

Nancy