Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / Cannot achieve "text wrap" effect around product image

Cannot achieve "text wrap" effect around product image

Locked

Views: 763

Results 1 to 5 of 5
This thread is locked. New replies are disabled.
19 Jul 2010, 6:21 PM
#1
feznizzle avatar

feznizzle

Totally Zenned

Join Date:
Apr 2010
Posts:
900
Plugin Contributions:
0

Cannot achieve "text wrap" effect around product image

Hi,

I have decided to move my "Add to Cart" and "Product Details" to the top of my product info pages. I did that by editing:
/includes/templates/YOURTEMPLATE/templates/tpl_product_info_display.php

But this creates a big ugly gap on my page. Here is what it does:

I'd like to move things up, like so:

I suspect this can be solved with CSS if I knew it well enough. I can play with CSS using my firefox browser. If I make the product image align left, it seems to fix the problem:

But floating left disrupts the flow of my site! Can someone please help?

Here is my site link in case you find a moment to play with this (remove the "!!!!!"):
med!!!!!harvest.!!!!! biz/Stretchers/Admin_Testing/WINCO_S300_Stretchair_300_Lb._Capacity

Thanks,
Mike

19 Jul 2010, 6:39 PM
#2
stevesh avatar

stevesh

Black Belt

Join Date:
Feb 2005
Location:
Lansing, Michigan USA
Posts:
19,793
Plugin Contributions:
2

Re: Cannot achieve "text wrap" effect around product image

If you don't mind negative margins, this should work at the end of your stylesheet:

**#cartAdd {margin-top:-14em;}

#productDetailsList {margin-top:-4em;}**

Adjust the 'em' values as necessary.

You could also move the image in product_info_display.php.

19 Jul 2010, 6:47 PM
#3
feznizzle avatar

feznizzle

Totally Zenned

Join Date:
Apr 2010
Posts:
900
Plugin Contributions:
0

Re: Cannot achieve "text wrap" effect around product image

stevesh:

You could also move the image in product_info_display.php.

Hi Stevesh, thanks for the help!

I did fiddle around a bit with moving the image in the php file... could seem to get it to work.

19 Jul 2010, 7:09 PM
#4
feznizzle avatar

feznizzle

Totally Zenned

Join Date:
Apr 2010
Posts:
900
Plugin Contributions:
0

Re: Cannot achieve "text wrap" effect around product image

In editing the php file, what is the meaning of this string?:
<br class="clearBoth" />

When I remove it, things seem to work. Here is the way I found it:

<!--bof Product details list --> <?php if ( (($flag_show_product_info_model == 1 and $products_model != '') or ($flag_show_product_info_weight == 1 and $products_weight !=0) or ($flag_show_product_info_quantity == 1) or ($flag_show_product_info_manufacturer == 1 and !empty($manufacturers_name))) ) { ?> <ul id="productDetailsList" class="floatingBox back"> <?php echo (($flag_show_product_info_model == 1 and $products_model !='') ? '<li>' . TEXT_PRODUCT_MODEL . $products_model . '</li>' : '') . "\n"; ?> <?php echo (($flag_show_product_info_weight == 1 and $products_weight !=0) ? '<li>' . TEXT_PRODUCT_WEIGHT . $products_weight . TEXT_PRODUCT_WEIGHT_UNIT . '</li>' : '') . "\n"; ?> <?php echo (($flag_show_product_info_quantity == 1) ? '<li>' . $products_quantity . TEXT_PRODUCT_QUANTITY . '</li>' : '') . "\n"; ?> <?php echo (($flag_show_product_info_manufacturer == 1 and !empty($manufacturers_name)) ? '<li>' . TEXT_PRODUCT_MANUFACTURER . $manufacturers_name . '</li>' : '') . "\n"; ?> </ul> **<br class="clearBoth" />** <?php } ?> <!--eof Product details list -->

If I remove that, my page appears correctly. But I don't want to create any errors. Anybody know what that does?

19 Jul 2010, 7:12 PM
#5
feznizzle avatar

feznizzle

Totally Zenned

Join Date:
Apr 2010
Posts:
900
Plugin Contributions:
0

Re: Cannot achieve "text wrap" effect around product image

It also works if I change it from this:
<br class="clearBoth" />

To this:
<class="clearBoth">