Product Description Page Alignment Help

[nolsowski]

Well that's not what you "wanted" originally, the attributes on the right, but if you like it the same as is now, it's fine.

A couple of suggestions:
you could try to see if you like setting a width, and text-align here
LABEL, h4.optionName {
padding: 0.2em;
line-height: 1.5em;
widht: 250px;
text-align: right;
}

I see you are working on it, I like it better with the image on the right, as it solves the product description ul I noticed here
http://frompropertorocker.com/index....roducts_id=318

I'd try moving add to bag higher

Yeah I did want the attributes up and to the right but I did that and then noticed that the products without attributes that area looked bare. So I added the description there instead.

I did notice that when the image was on the left then the bullet points in the description overlapped the image. So I decided to change it. I think I like where I am going with it now.

The add to bag buttons are driving me nuts. lol I did have them up further but then if the description was shorter that made by buttons come up onto the image itself. See here how it's up pretty close to the image already http://frompropertorocker.com/index....f30dc05e320b86 I was thinking of having them horizontally in a row but not sure if that would work right or even look good. I like how everything else is laid out but those darn buttons lol

I'll keep working on it to see what I can do.

Thanks for your help!

[keneso]

Try this:

move all the block of

<!--bof Add to Cart Box -->
code
<!--eof Add to Cart Box-->
more code
<!--eof creinold Pinterest Modifications, (You can move this anywhere you like the Pin it Button to show up on Product Info page.) -->

which includes the tell a friend, my gift list etc.

below the
<!--eof Product description -->

The red border of the div is so that you can see it better, when done remove it.

and above the
<br class="clearBoth"> (see the note below)
<!--bof Attributes Module -->

Then wrap both blocks into a div styled like this
<div style="border:1px solid #ff0000; float:left;width: 790px">
Don't forget the closing </div> after <!--eof Attributes Module -->

also remove the <br class="clearBoth"> (note below)

[nolsowski]

Try this:

move all the block of

<!--bof Add to Cart Box -->
code
<!--eof Add to Cart Box-->
more code
<!--eof creinold Pinterest Modifications, (You can move this anywhere you like the Pin it Button to show up on Product Info page.) -->

which includes the tell a friend, my gift list etc.

below the
<!--eof Product description -->

The red border of the div is so that you can see it better, when done remove it.

and above the
<br class="clearBoth"> (see the note below)
<!--bof Attributes Module -->

Then wrap both blocks into a div styled like this
<div style="border:1px solid #ff0000; float:left;width: 790px">
Don't forget the closing </div> after <!--eof Attributes Module -->

also remove the <br class="clearBoth"> (note below)

Okay on this part:

Then wrap both blocks into a div styled like this
<div style="border:1px solid #ff0000; float:left;width: 790px">

I add that to my stylesheet under #cartAdd and #productAttributes?

I think I got it moved right in my tpl_product_info_display.php

[keneso]

You can either put it in the tpl_product_info_display.php as it is, or put a <div class="my_add_and_attribute_box"> and then reference that in the stylesheet like
.my_add_and_attribute_box {
border:1px solid #ff0000; float:left;width: 790px
}

In both cases you need to add the closing </div>

Of course you can name it what you want.

Also please note the red border is there for you to better see the box, and once you are satisfied you can remove it.

[nolsowski]

You can either put it in the tpl_product_info_display.php as it is, or put a <div class="my_add_and_attribute_box"> and then reference that in the stylesheet like
.my_add_and_attribute_box {
border:1px solid #ff0000; float:left;width: 790px
}

In both cases you need to add the closing </div>

Of course you can name it what you want.

Also please note the red border is there for you to better see the box, and once you are satisfied you can remove it.

Thanks! Did I do that right? I took the border off.

[gjh42]

<div style="border:1px solid #ff0000; float:left;width: 790px">

gives all of the styling inline in your PHP file, without reference to the stylesheet. The more "proper" way would be to use something like

<div class="myAttributes">

in the PHP file, and add to your stylesheet

.myAttributes {border:1px solid #ff0000; float:left; width: 790px;}


...Like keneso said:)

[nolsowski]

<div style="border:1px solid #ff0000; float:left;width: 790px">

gives all of the styling inline in your PHP file, without reference to the stylesheet. The more "proper" way would be to use something like

<div class="myAttributes">

in the PHP file, and add to your stylesheet

.myAttributes {border:1px solid #ff0000; float:left; width: 790px;}


...Like keneso said:)

Thank you! I think I got it. :)

[keneso]

You are on the right track.

Sorry I forgot to tell you should add float: left to your productAttributes in stylesheet.

And like said the myAttributes should start right after productDescription, and end after productAttributes.

[nolsowski]

You are on the right track.

Sorry I forgot to tell you should add float: left to your productAttributes in stylesheet.

And like said the myAttributes should start right after productDescription, and end after productAttributes.

Okay I think I got it. This stuff can be confusing sometimes. lol

Is that how it's supposed to look?