Word wrap pictures left or right?

[gtekser]

I will look again at what you have explained and redo them both.

Its getting a bit drawn out as I can only look at things late at night.

Thank you again -

PS: I have Hot Metal Pro but it doesnt like Actinic code being put into it. e.g. NETQUOTEVAR or some of the code that actinic does, causes it to say it needs altering & am I right in thinking that these NETQUOTEVAR are use to relate the different templates ? So, can you suggest a program that will allow me to play around with code and see what the result is or is it impossible?

Pete

[jont]

The NQV are unique to Actinic and tell the program that a layout / variable is to be inserted ... some can be a single piece of code and others can be entire HTML templates ... they are like place holders.

The best way to edit is in Notepad ... Dreamweaver is slightly better than HMP but the layouts will still show NETQUOTEVAR and mess layouts visually in WYSIWYG mode.

v8 & v9 is slightly better but still the layouts (NQV of v7) are shown and blocks of text and will spoil layouts in WYSIWYG mode also.

A lot of the layouts do not have opening and closing <table> </table> tags ... I used to add these manually if editing in DW or Frontpage to see the layout and remove when viewing inside Actinic.

If you can do it Notepad is by far the best option.

[gtekser]

HI All

I looked through the comments made and have spent most of the day altering various things and nothing seems to make much difference and at least the 'Line 6' picture came back. http://www.guitartechnicalservices.c..._for_Sale.html I extended the sentences so I could see if there was a difference to the ‘wrap ‘ but I am sad to say that I seem to have failed.

The two templates now look like this and as I said before I confined it to these two to make sure I didn’t mess anything else up.

<!-- ProductImage HTML begin -->
<!-- This file is used to build the product image markup. -->

<IMG SRC="NETQUOTEVAR:IMAGEFILE"
ImageRight {float:right;}

ALT="NETQUOTEVAR:ALTERNATETEXT"
BORDER=0
NETQUOTEVAR:IMAGEHEIGHT
NETQUOTEVAR:IMAGEWIDTH
NETQUOTEVAR:OTHERIMAGEMARKUP>

<!-- This file is used to build the product image markup. -->
<!-- ProductImage HTML end --> 

and using the 'One product per row, image on left'

<!-- ProductLine HTML begin -->
<!-- Insert HTML for the top of the individual product -->
NETQUOTEVAR:INCLUDE Act_ProductSeparator.html
NETQUOTEVAR:ENDSEPARATOR
NETQUOTEVAR:PRODUCTFORMBEGIN
  <tr>
    <td> NETQUOTEVAR:TEMPLATEBEGINXML <div class="ImageRight">NETQUOTEVAR:PRODUCTIMAGE</div> 
     <colspan="3">
      <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>
    
  

    
            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 --> 

I then looked at the other suggestion of the ’30 day trial on the V9 Actinic' upgrade...... but this wont work at all and says ‘time expired’.
I was hoping to see how it looked with my own site & styles added into V9. So that too failed – I sent an email to Actinic but I guess I have to buy it first to find out what is like.

So - in short - its too difficult and I have given up. Sorry to have wasted evryones time.

Pete

[leehack]

You needed to add the class(es) into the stylesheet, not the html template, it will never work the way you have done it.

Where Jont said:

Did you add
.ImageLeft {float:left;}
into actinic.css?

What did you do about it?

You will be there for weeks if you don't follow the instructions correctly. If you are told to do something that you do not understand, then ask what is meant, you simply cannot afford to ignore any instructions if you want it to work correctly.

If you remove the styling from the html template and put it into the stylesheet as Jont mentioned, i think you will be there, you are very close now to the correct solution.

[gtekser]

I suppose this says it all.
I dont know what the 'class(es)' are or the 'stylesheet' so thought that it was down to 2 html template........So that answers 2 unknowns - at least to me!

As for the
"Did you add
.ImageLeft {float:left;}
into actinic.css?"

Well.................yep and No............I put it into the Image template as you will see above, which leads to me not knowing what actinic css is and getting that wrong too.

In short I dont understand - thought I did - clearly not !

So where is this stylesheet and css ?


I wouldnt blame you if cant be bothered to say.

Pete

[leehack]

actinic.css in your Site1 folder.

[gtekser]

Hi All

Thank you for pointing the Actinic CSS file out - its very inconspicuous.
I took out the incorrect line of .ImageLeft {float:left;} from the ProdImage template HTML and posted it in Actinic CSS – does it matter where it goes? I assumed it didn’t and put it in as shown see jpg. ActinicCSS.jpg

It didn’t work and I also tried using Left and Right with the ProdLine adjusted (incl case sensitive) accordingly but nothing has improved or got where I wanted with the word wrap.

I guess that my dyslexia doesn’t help either – usually I am quite careful on translating written word but this time I have to say I am defeated. In the past its been difficult but achieved results from the forum help. Guess its not having enough understanding.

Thanks for all your efforts - I am sure it might help others - hope they can say if they find it any easier.

PS : Email from Actinic say they cant help with the 30 day trial on V9, so wont buy if I cant see it tried out.

Pete

[leehack]

Your CSS inclusion looks fine, i'd usually add my own styles right at the bottom to avoid inheritance, but you will probably be OK. So just provide your product and image html now as i expect there is now a small mistake in those, i don't think you should give up having come this far.

A URL of a page where you have made the changes and uploaded would be good too. Learning html and css takes a long time, i've been at it for years, don't be so hard on yourself, do you beat yourself round the head when you can't fit a gas pipe or fit a new carpet? If it was easy, there wouldn't be so many professional designers out there.

[jont]

Assuming you are keeping some of the layouts as they are - use the following layout

<!-- 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">  
NETQUOTEVAR:TEMPLATEBEGINXML
<div class="ImageLeft">NETQUOTEVAR:PRODUCTIMAGE</div>
      <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>

  
			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 -->

this is a hack of the Act_ProductLine.html

note the <div class="ImageLeft"> with the class ImageLeft

In the actinic.css add

.ImageLeft {
float: left;
}

you can then duplicate the above and add change to <div class="ImageRight"> and in the actinic.css also add in

.ImageRight {
float: right;
}

the colspan is set to "2" as I am guessing you are wanting to keep some of the other layouts on the page as they are IE with 2 cells side by side... if they are all going to be float left or float right you need to remove the colspan declaration.

If you copy the above code into the site1 folder and call is something like !Act_ProductLineLeft.html you can then apply this to your bottom test product (ensure plenty of product description text to see the flow) and that should be sorted. I added the "!" to the start of the name to make it easier when browsing for the template against the product.

Note Act_ProductImage.html has not been touched. The default (with the "title" tag added for the benefit of Firefox users) should be

<!-- ProductImage HTML begin -->
<!-- This file is used to build the product image markup. -->

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

<!-- This file is used to build the product image markup. -->
<!-- ProductImage HTML end -->

Good luck and all digits crossed (it is working on my test Actinic site)

Jont

[jont]

add my own styles right at the bottom to avoid inheritance

As a note I also added mine to the very bottom of the actinic.css but that was more through standard practice than anything else.

[gtekser]

Wow – you guys have incredible patience!

Yes, I do beat myself up - as I always strive for perfection, which is never attainable but doesn’t stop me trying...…and looks like I'm trying the patience of others too. Sorry.

I will endeavour to show here what I have got on the templates and Actinic css when the style is moved to the bottom of the page.

As its gone midnight, I will attempt another go tomorrow…..after I have uploaded, read your notes again and taken stock with a clear head.

Bye for now

Pete

[gtekser]

Taking things very carefully I copied & pasted to Actinic css the:
.ImageLeft {
float: left;
}

which I now put to the bottom of the page in Actinic css BUT .....I notice that it has created <BR> as seen in pic: ‘Questioning line breaks.jpg’ attached.
Is this correct or do I knock out the 3 <BR> ?


Pete

[leehack]

Those <br> should certainly not be there, if you remove them do they get reincluded, something very strange is going on, never seen that before.

[gtekser]

Thanks. I will remove them - its probably in the format from off the actinic community forum page that got included in 'copy'.

Pete

[gtekser]

Here is the uploaded page and the section ‘in question’ I have put at the top of the page: http://guitartechnicalservices.co.uk..._for_Sale.html

To recap: What I am trying to achieve is as pictured from a Publisher mock-up see picture: ‘Publisher mock-up.jpg’

Here is Actinic css of the: reworkCSS.jpg (looking at the other lines there are no spaces in the line but the .ImageLeft {float: left;} has a space after the colon?

The current Act_ProductImage.html is:

<!-- ProductImage HTML begin -->
<!-- This file is used to build the product image markup. -->

<IMG SRC="NETQUOTEVAR:IMAGEFILE"

ALT="NETQUOTEVAR:ALTERNATETEXT"
BORDER=0
NETQUOTEVAR:IMAGEHEIGHT
NETQUOTEVAR:IMAGEWIDTH
NETQUOTEVAR:OTHERIMAGEMARKUP>

<!-- This file is used to build the product image markup. -->
<!-- ProductImage HTML end -->

The current Act Act_ProductLine.html is:

<!-- ProductLine HTML begin -->
<!-- Insert HTML for the top of the individual product -->
NETQUOTEVAR:INCLUDE Act_ProductSeparator.html
NETQUOTEVAR:ENDSEPARATOR
NETQUOTEVAR:PRODUCTFORMBEGIN
  <tr>
    <td> NETQUOTEVAR:TEMPLATEBEGINXML <div class="ImageLeft">NETQUOTEVAR:PRODUCTIMAGE</div> 
     <colspan="2">
      <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>
    
  

    
			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 -->

I can see bits I have missed out - a misunderstanding when I just put back the colspan="2" I will give it a couple of hours and copy and paste the new code in you have very kindly redone (after dealt with customers).

Pete