Changing product page layout

[Orchard_Direct]

Wow the site rly just mucked itself up, suddenly stopped reading the css file! no matter what i do cant get it fixed :S:S:S

[Orchard_Direct]

Anyone got anymore suggestions? im so close!

[gjh42]

Just a little more styling, I promise, to get the elements in their proper positions.

Now that the left column group is shorter than the right, you need to add explicit margins to keep the description from wrapping to the far left. You could add to your stylesheet like this:
h1#productName, h2#productPrices, #productDescription {margin-left: 200px;}

but since you have made another wrapper for them all, use that to style instead:
#productGroupWrapper2 {margin-left: 200px;}

To get the description fully below the add button, add this to your stylesheet:
#productDescription {clear: both;}

And you can take up some of the empty space by adding this:
#cartAdd {margin-top: -3em;}

The rest of the gaps are caused by some extra <br /> and <p> elements in your description HTML. Remove those and it will tighten up.

To get the attributes completely below the image, add a <br /> to the PHP/HTML code between
<!--eof Main Product Image-->
and
<!--bof Attributes Module -->

[Orchard_Direct]

Heya, everything is working apart from the break between the attributes and the main image, when putting the <br/> tag in the php between the 2 modules it only moves the text down one line and still wraps the image, secondly how can i make the description text move up a bit, there is to much space between that and the add to cart, other then that it is fantastic. Thanks very much!

[gjh42]

For the attributes, add this to your stylesheet:

#productAttributes {clear: both;}

For the description, adding

#productDescription {padding-top: 0;}

will help a bit, but for some reason I have not been able to figure out, elements in the main or right column seem to hang up on clearBoth elements in the left column, even though they ought to be compartmentalized by the wrapper divs. I would like to know how to solve this myself.

[Orchard_Direct]

cheers m8, got everything apart from the text, i cant for the life of my figure out why there is such a large gap! odd eh? If you have any ideas please let me know. Ill carry on trying to sort it as well. Thanks!

[Orchard_Direct]

I tried making a new rapper so currently i have:

wrapper 1 = main image, attributes
wrapper 2 = product price, add to cart
wrapper 3 = product description


This still doesn't work due to the 3rd wrapper still starting at the top of the page, not underneath the 2nd wrapper.



Lol any ideas?

[Orchard_Direct]

Another question on top! I cant get the product price in the same wrapper as the add to cart module even though i have stored them both in wrapper 3, they are still contained in their own wrappers.

Cheers

[Orchard_Direct]

suggestions? ive tried all i can, cant get the text to move and i cant get the prod price and add to cart working as one wrapper!

[gjh42]

I don't know if this has any bearing on the difficulties, but you have some bad HTML in your description - two <p> tags that are not closed. They should really not be there at all, as they do not do anything but make more space. Also, the <br> at the beginning is doing nothing good for you.
From view source:

<div id="productDescription" class="productGeneral biggerText"><br>Bevelled Edge
<br>13 amp Switched Fused Spur
<br>Product shown in Satin Stainless finish
<br>Please confirm your choice of plate finish from the drop down menu below when ordering.
<p>
<p>
<img src="images/swatch.JPG"
title=" finishes " height="75" width="288"></div>

Your wrapper3 encloses only the description and details, and does not do anything helpful. I would say to move the beginning of that up to above the name div. How do you want the price and add button to behave as a unit? I can't advise without understanding that.