Overlapping Text around images

[bladders]

Hi, I am still learning the basics of Actinic and I would like some advice on how to wrap text around the images.

Please see the link: http://www.brownsladders.co.uk/acata...FT_LADDER.html

As you can see, the top section next to the image is ok, but I was wanting the bottom sections of text to span across the page under the image.

Can anyone help with this problem?

[jont]

This is not going to be easy as the text area is in one table cell and the image in another table cell ... hence the blank space beneath the image extending to the height of the text area.

One option would be to create a new cell beneath which spans the text and image cells and place a CUSTOMVAR in there ... this would then mean you place only part of the text content in the prodict description box and populate the text in the new cell area in the product properties tab ... very untidy and hard work.

Another similar option is to create a new cell spanning the text and image cells and putting the product title, cost, order functions in the left hand cell and the product description in the new spanning cell

Food for thought

[Kermy]

Why not create one cell, and use the 'float' css property on the image? Something like...

<tr>
  <td>
    <div><img src="image.jpg" style="float:right" />text goes here</div>
  </td>
</tr>

[jont]

Good call Graham, just altered the Act_ProductImage.html template to

<IMG SRC="NETQUOTEVAR:IMAGEFILE"
	  style="float:right"
	  ALT="NETQUOTEVAR:ALTERNATETEXT"
	  BORDER=0
	  NETQUOTEVAR:IMAGEHEIGHT
	  NETQUOTEVAR:IMAGEWIDTH
	  NETQUOTEVAR:OTHERIMAGEMARKUP>

and then merged the cells in the Act_ProductLine.html template

[pinbrook]

here's another css challenge .....

div.img-ilus {
background: url('shadow.gif') no-repeat bottom right;
margin: 10px 5px;
padding: 0;
position: relative;
}

div.img-ilus img {
background-color: #fff;
border: 1px solid #a9a9a9;
margin: -5px 5px 5px -5px;
padding: 4px;
position: relative;
vertical-align: bottom;
}

I've got the above style wrapped around the code in act_productline.

how do i incorporate the float style to allow the text to wrap around the image whilst retaining the drop shadow?

[jont]

Hi Jo,

the following worked in FF but the shadow was slightly out in IE (you have to hate IE for CSS)

.img-ilus {
	background: url('shadow.gif') no-repeat bottom right;
	float: left;
	margin: 10px 5px;
	padding: 0 3px 0 0;
	position: relative;
}

.img-ilus img {
	background-color: #fff;
	border: 1px solid #a9a9a9;
	margin: -5px 2px 5px -5px;
	padding: 4px;
	position: relative;
	vertical-align: bottom;
}

changes to your code :

removed the div from the start of the line
added "float: left" to .img-ilus
changed the right hand margin to 2px

will keep tweaking to get it right in IE also

[jont]

The following has fixed the drop shadow and it now shows in IE also

.img-ilus {
	background: url('shadow.gif') no-repeat bottom right !important;
	float: left;
	margin: 10px 0 0 10px !important;
	margin: 10px 0 0 5px;
	padding: 0 3px 0 0;
	position: relative;
}

.img-ilus img {
	display: block;
	background-color: #fff;
	border: 1px solid #a9a9a9;
	margin: -5px 2px 5px -5px !important;
	padding: 8px ;
	position: relative;
}

[pinbrook]

it took me a while, but here is theresult (the while was because I had abit of rogue code here and there)

I've got overlapping text see http://www.surf-wax.co.uk/acatalog/Innova_Leopard.html

and nice drop shadows working properly elsewhere on the site

[jont]

Looks goods - and works in IE as well ... the error I found was down to the IE css box model hence the 2 lines for the margin ... glad you got it working

[pinbrook]

yeah and I wrapped the NQV for the section image in the css for the section image, but chose to wrap it in the act_productimage template for the product hence why it took a while to sort out.

Thanks Jont - I haven't placed my community vote yet, i may vote for another now rather than myself!!

[bladders]

Good call Graham, just altered the Act_ProductImage.html template to

<IMG SRC="NETQUOTEVAR:IMAGEFILE"
	  style="float:right"
	  ALT="NETQUOTEVAR:ALTERNATETEXT"
	  BORDER=0
	  NETQUOTEVAR:IMAGEHEIGHT
	  NETQUOTEVAR:IMAGEWIDTH
	  NETQUOTEVAR:OTHERIMAGEMARKUP>

and then merged the cells in the Act_ProductLine.html template

Sorry jont, but I am a bit thick when it comes to actinic, but how do you merge the cells in the Act_ProductLine.html template? Will this solve the wrapping of the text?

[jont]

The following is merged cells:

<!-- ProductLine HTML begin -->
<!-- Insert HTML for the top of the individual product -->
NETQUOTEVAR:INCLUDE Act_ProductSeparator.html
NETQUOTEVAR:ENDSEPARATOR
NETQUOTEVAR:PRODUCTFORMBEGIN

  <tr>
    <td valign="TOP" align="LEFT" colspan="2">  
      <p>NETQUOTEVAR:TEMPLATEBEGINXML NETQUOTEVAR:PRODUCTIMAGE</p>
      <p><a name="NETQUOTEVAR:PRODUCTANCHOR"><span class="actregular"><b>NETQUOTEVAR:PRODUCTNAME</b></span></a>
        <span class="actxsmall">NETQUOTEVAR:PRODUCTREF <br>
        NETQUOTEVAR:PRODUCTDESCRIPTION&nbsp;NETQUOTEVAR:EXTINFOLINK</span>NETQUOTEVAR:EXTINFOBUTTON <br>
        <span class="actxsmall">NETQUOTEVAR:PRODUCTBEGINLINKNETQUOTEVAR:PRODUCTLINKTEXTNETQUOTEVAR:PRODUCTENDLINK
        NETQUOTEVAR:PRICEEXPLANATION </span><br>
        <b>NETQUOTEVAR:PRODUCTPRICE</b><br>
        <span class="actxsmall">NETQUOTEVAR:DISCOUNTINFO </span>
        <span class="actxsmall">NETQUOTEVAR:OTHERINFOPROMPT </span>
    <span class="actxsmall">NETQUOTEVAR:DATEPROMPT </span> </p></td>
  </tr>
  <tr>
    <td align="LEFT" colspan="2"><span class="actxsmall">
			NETQUOTEVAR:CARTERRORXMLNETQUOTEVAR:PRODUCTQUANTITY<br>
			<Actinic:ACTIONS>NETQUOTEVAR:ADDTOCARTBUTTON</Actinic:ACTIONS>
		    </span>
	NETQUOTEVAR:TEMPLATEENDXML
       </td>
  </tr>

NETQUOTEVAR:PRODUCTFORMEND
NETQUOTEVAR:NEXT
<!-- Insert HTML for the bottom of the individual product -->
<!-- ProductLine HTML end -->

take a backup before making any changes and you will also need to change the Act_ProductImage.html file as above to include the float:right attribute

If you don't want this to happen to all your products save the above code as say Act_ProductLineFLOAT.html and then specify the layout againgst specific products or sections

HTH

[jont]

Will this solve the wrapping of the text?

The above combo produces the effect as attached

[wjcampbe]

CAVEAT: Change the colspan="2" to correspond with your setting in NUMCOLS if you use the multi column layout option elsewhere.

[bladders]

Thanks, Jont, managed to sort it, I havn't uploaded it yet, but previewed it and it looks better.

Thanks to everyone for all your help!!!