I created an HTML Box and type some text into it.
I insert a Graphic Item in HTML text and got a graphic Cmd-E.
I set the graphic item to Left Align, with a Custom Margin of 0L, 5R, 5 Top and 5 Bottom.
With the grpahic item selected I go to Item Menu > to Extended. I created a new “class” with the value of “minus94”. Hit OK.
Then I go to Edit > “Styles…” I select the + button to create a new style, then I put the tag name “minus94” in, click “Extended” then add new tag “margin-left” with a value of “-94px” AND a “position” with the value of “relative”.
No joy - this simply doesn’t work, or I’m not following the directions exactly!
It’s a cool looking effect. Does anyone that has this working under FreewayPro 5.5?
thanks - Lewis
I went back and did everything very carefully, I appreciate the posting above to check the tag name… I followed that… no joy, I get a warning that styles can only be applied to text. There’s gotta be something … missing. thks - Lewis
Chuckamuck, thanks for helping me on this… your example works! And the extended tag and style info seems to be what I’ve set up. So as an experiment, I created a new text box and copied your red square over - it worked! I tried to put in a graphic inline with the text and it doesn’t work. So I’m thinking it must be the way and/or type of graphic box I’m trying to use for the image. What specific steps/tools did you use to create the red box. Thanks very much - Lewis
I’ve played with your example file some more, I don’t think it’s how I’m adding the graphic to the text box, at least I don’t think so, as I can Cmd-E and import a different graphic into your graphic box and the overlap still works. I think the extended class is set OK, but perhaps I’m missing a step in editing the style? Again, thanks - Lewis
The red box is just a graphic object. If you select the box and use CMD-E you can insert a photo in it if you like. It will still just be a graphic object.
These are my steps:
Create your html box with the text in it.
Click in the html box to get the flashing cursor and insert a graphic object from the Insert menu.
Select the graphic object (box handles should be showing, not flashing cursor) and open Extended options either from the Item menu, or by control-clicking on graphic.
With the IMG tab selected click New and add Name: class Value: minus94. Ok out.
Open the Styles editor and click the plus + symbol to start a new style.
In the Tag field type img.minus94 and delete any text in the Name field then tab out.
Click New and add Name: margin-left Value: -94px. Click New again and add Name: position Value: relative
Odd… if the new style exists in the example file you sent, if I simply create a new html text box, insert a graphic item along in text, set the float to Left, add margins R, Top and Bottom, and add the Extended class minus94 - I’m assuming this should work! as the Style Edit has already been done. It doesn’t. Your file works, but I cannot replicate it, other than to copy your grpahic box. I feel sure it’s something simple I’m missing - but just do not see it.
In the Styles Editor, the “Click New” is under the “Extended Attributes” for Style “<image/minus94>” - correct?
Thanks - Lewis
Chuckamuck - Success!! I finally viewed my implementation and your’s in Safari and using the Devolp menu Inspect item, I was able to see a difference in the margin settings for the graphic item. It was that I was putting a “0” value in for the Left margin - and it simply needs to be blank, no entry. The instructions, other than specifically mentioning this point, a critcal one too, are correct. Thank you very much for the kindness and effort in helping me resolve this mystery! - Lewis
I have a website built which looks fine in both firefox and safari however when viewed on a PC platform there are loads of overlapping text appearing. The home page for example. Any idea how i can solve this before the site goes live?
You should really have started a new thread for this but…
Different browsers, platforms, user settings can all determine at what size text is displayed.
Quite simply what you are seeing is your HTML layered text boxes expanding on top of their neighbours when the text is displayed at a size different to you designed.
To show this in Safari go to the View Menu and enable Zoom Text Only - then visit your site and Apple + a couple of times to increase your text size to see your site as others might.
There are a couple of ways to avoid this
One is by using the commonly referred to Box Model construction method which ensures that when HTML items expand the push others out of the way.
The other is by creating an unlayered ‘Table Based’ site where this happens automatically as no 2 HTML items can overlap.
Another is by upgrading and using the RPL action which I think came in with 5.5 - you appear to be using 5.4.1 which BTW is not the most recent 5.4 version.
Many thanks for your thread. As i am new to this i was not sure were to start a new thread from.
I have started to uncheck the layer properties in the inspector which has helped but it creates a grey ish background to the text boxes. I want them to be coloured as none.