Product Description doesnt line up properly below image.

Hi, Im new at Zen-Cart and have created a few products and what happens is the product description doesnt line up with the rest of the text after the bottom of the image which is located on the left side of the page. I dont know what to do to line it up. The URL is http://bearygoodsigns.com.au/index.php?main_page=product_info&cPath=1_10&products_id=1
I was thinking maybe i need some sort of column that lines up the image all the way down so that like in a table they would be two totally differant columns.
Am i making any sense?

Hi,

Do you just mean that you want the description to be left aligned, rather than centred? That needs to be changed in your stylesheet (includes/templates/trublu/css/stylesheet.css)

....forget that, it looks from the source code like you've set the description to align center via the text editor in your admin.

Was that what you meant?

I have a question regarding Methods of payment, but my immediate problem is that I don't even know how to post that question.
I created an account in Zen Cart Support but I can't seem to figure out how to actually post my question out there.
Can you help? Thanks

Hi Christine,

I usually find Googling my questions leads me right to a relevant post by somebody else and is better than searching any forum. If you want to post though, go to http://www.zen-cart.com/forum/forumdisplay.php?f=18 and click the 'start a new thread' button near the top of the page.

goosedesign:

Hi,

Do you just mean that you want the description to be left aligned, rather than centred? That needs to be changed in your stylesheet (includes/templates/trublu/css/stylesheet.css)

....forget that, it looks from the source code like you've set the description to align center via the text editor in your admin.

Was that what you meant?

Hi thanks for your reply. Im sorry i really didnt know how to explain it. Yes I do have the description aligned center via the text editor....however it does he same thing whether its aligned center or left.

See on the item it says "ALL OTHER VEHICLES WILL BE TOWED AWAY" well it looks like all the description is wraped around the product image and this causes all lines that are below the the bottom of the image are then not in the alignment.

Does that make more sense to help?

What i was thinking would be good is to have a left column which would contain the product image then below that the model name, Shipping Weight and Units in Stock. And then a column next to that which would contain the product description.

How's your CSS?

What you've said would be possible by editing the various parts of the product listing via the CSS file. I think the ones you need are #productMainImage for the image, #productDescription for the text and #productDetailsList for the model, shipping etc.

There would be a few ways of doing it, but one that should work would be to float the image and details list to the left, and the description to the right.

I had the same problem.
I fixed it by editing the css for my template from

#productDescription {margin-left: 150px;}

to

#productDescription {margin-left: 200px;}

Hope that helps
Kia

Good for you, Kia!
I find that, if the elements that are wanted in the left column can be assigned a maximum fixed width, floating them left and giving right-column elements a margin-left to clear that width (and no float) lets everything fit neatly and predictably in columns while allowing text on the right to expand to fill flexible width pages.

The left-floated elements may need clear: left; to keep them below the preceding floated element.

HELP!!!
I am trying to make it to where in the product info page i have a picture to the left and the cart to the right along with the price and attributes. Then under all of that I would like to have the description and so fourth. For some reason i cant figure out how to get the description to appear under the image properly. Most of the time it is to the right, right under the cart. This first like is what i would like my site to look like. The second link is what my site is doing now. Please if you can help me in any way that would be so great. Thanks

What i want my page to look like
http://www.frontiersoups.com/p-PK-Pumpkin-Soup-Spice-Mix.html

One of my pages that i would like to have changed.
http://www.wpc-consulting.com/~stxmill/index.php?main_page=product_info&cPath=6&products_id=36

Looks like you have sorted that now - the description is below the images in wpc-consulting.com.

Yeah thanks for the help. One of the main things i did was add <br class="clearBoth" /> right before this <!--bof Product description -->. I also changed the <!--bof Add to Cart Box --> around to get the cart where i wanted it on the page. It still needs lots of work but the concept of getting the description below the image is fixed so now i can work on making it look pretty!! All of this took place in the tpl_product_info_display.php file.

hello gjh42,
can you tell please how did you figure it out, i'm having the same issue...

If you let me see your site live, I should be able to tell you how to style it the way you want. There's no point in describing someone else's site styling again.

hi gjh42, i do have an issue with my product info page.. (i've been a silent follower of this forum until now when i really felt the search is not helping me enough)

the current product info page is sendgiftstobengaluru . com/index.php?main_page=product_info&cPath=1_8&products_id=3

and would like HELP!! doing the following

• description to move right below the image (image size 250x250, i will increase the size to may be 400x500)
• add to cart to move below description (in same line)
• write review & tell a friend to move below add to cart..

since the descriptions aren't that long, i want the attributes to stay in the left side as aligned currently.

have been beating my head all week long to get this fixed.. no avail.. please help..

Roy

please ignore my previous msg.. the link remains the same and below in attachments is what i want to achieve.

added two screen shots

1.. whats actually there and
2.. the one i want to achieve..

help is greatly appreciated...

Cheers,
Roy.

This would be largely a matter of arranging the code blocks in /includes/templates/your_template/templates/tpl_product_info_display.php, and then applying float: left; and width: ###px; properties to the appropriate elements.
I don't have any of my diagnostic tools available at this location, so can't be much more specific right now.

gjh42:

This would be largely a matter of arranging the code blocks in /includes/templates/your_template/templates/tpl_product_info_display.php, and then applying float: left; and width: ###px; properties to the appropriate elements.
I don't have any of my diagnostic tools available at this location, so can't be much more specific right now.

ok, i understand what you're saying..

i am little novice in terms of coding and so a little help as an example would really get me going.

ok.. here is a snippet from the tpl_product_info_display.php

how to FLOAT = left ? :wacko:
how to set width ? :no:

<!--bof Tell a Friend button -->
<?php
  if ($flag_show_product_info_tell_a_friend == 1) { ?>
<div id="productTellFriendLink" class="buttonRow forward"><?php echo ($flag_show_product_info_tell_a_friend == 1 ? '<a href="' . zen_href_link(FILENAME_TELL_A_FRIEND, 'products_id=' . $_GET['products_id']) . '">' . zen_image_button(BUTTON_IMAGE_TELLAFRIEND, BUTTON_TELLAFRIEND_ALT) . '</a>' : ''); ?></div>
<?php
  }
?>
<!--eof Tell a Friend button -->

how to FLOAT = left ?
Change forward to back

<div id="productTellFriendLink" class="buttonRow back">

how to set width ?
In the stylesheet.css file #productTellFriendLink - - and add it if it does not exist

Thanks Cobra, That worked... much better... check it out..

http://sendgiftstobengaluru.com/index.php?main_page=product_info&cPath=1_8&products_id=3

can you please help me move the ADD TO CART button to left as well.. i am unable to figure it out.

I want to add a BORDER to DESCRIPTION and MOVE it under IMAGE just ABOVE the review and tell friend buttons.

and then move the attributes to RIGHT side..

(edit) also want to know how to reduce the FONT size of the Attributes ?

Roy.