[Pro] Constraining images and text

Freeway
1

I’m not new to HTMl but I’m fairly new to Freeway Pro, having used v3.5 for one small site and now attempting to create a huge site with v5.

I had the master pages done for me by an experienced programmer and now I have to add the content.

The content will consist of a product image on the left (pass-through graphic) and associated product description text on the right. Then I need a thin 1px horizontal dividing line. This arrangement will be repeated ad-infinitum down each page.

Normally I would use a simple two-column HTMl “table” to hold text and image together. The table cells will expand naturally if the typeface point size is increased by the browser viewing the page, so that the relationship between image and text is maintained as far as possible, and there is no overlap because items are pushed downwards to make room for expanding text.

However, I understand that the current preference is to use CSS to create the “table” effect and that there’s a strong possibility of text overlapping or being cropped. Obviously I need to avoid that.

So I’m looking for guidance on exactly how to achieve this “table” in the simplest way and minimising problems with appearance if the point size increases.

Bear in mind that I’m not familiar with CSS and I’m not totally familiar with FWP “tools” and methods, so I may need quite specific instructions! I hope you have a lot of patience.

A question: as the table will be quite long, it will pass below the default page boundary. Do I need to extend the page downwards to accommodate this or doesn’t it matter?

Martin

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

Well, if you want your image to be aligned left, then a little margin, then your text ranged around it on the right side, you could simply insert your image as an inline element, set its alignment to left, and give it some right margin using the Margin control in the Inspector. Then double-click next to the image so you get a text cursor and type your text in there. The text should flow around the image.

But if you want your images to be left and then your text to be in a separate column to the right, you would either need to insert an inline HTML box and put your text in that, or break down and use a table for this. It is tabular data of a sort, after all.

To get your thin rule separating each image/text pair with the inline construction technique, you would just type a return after everything, then insert a rule or an inline image to act like one, then another return, and then start your next layer of the club sandwich.

On the table layout, you could use CSS to set each TD in your table to have a bottom rule, and that would get you the same look.

Walter

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

Thanks for your reply. Could somebody elaborate and tell me what to click etc. to actually achieve what you describe?

For an example of the sort of thing see http://www.satcure.info/new/accs/page9.htm
from “Product Title & Description”.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

Yes, what I would do for this is the following.

  1. Draw a box large enough to hold everything. Double-click inside it
    so you get the flashing text cursor.
  2. From the main menu, choose: Insert / Graphic Item, and then
    Insert / HTML Item (two items).
  3. Click on the graphic item, and set its align to left. Insert your
    picture, scale it and resize it to suit.
  4. Then click on the inline HTML item (the second thing you entered)
    and set its Float attribute to Left. Resize it to suit. Then double-
    click inside it and add your descriptive copy.
  5. Double-click in the outermost box to get a text cursor, and down-
    arrow until you are sure you are at the very bottom of the various
    items. Insert / Graphic Item. Click on it and set its dimensions to 1
    or 2 pixels tall by whatever width your outer box is. This will be
    your rule, so give it a background color.

Now if you repeat steps 2 through 5 for each item, you should have a
set of elements that can repeat down the page and give you the layout
you want. You may have to fiddle with the Align attribute of the faux
rule image, maybe make that Left as well. As a final detail, unset the
height attribute on the outer HTML box and the inner HTML boxes (with
the descriptions) to make the whole thing stretchy. To unset the
height, click on the little up-down arrow graphic to the left of the
height field in the Inspector while you have the element selected. The
height property will become gray and unselectable, and the HTML that
Freeway writes for you will simply drop the height property, leaving
it for the browser to figure out on its own.

Walter

On Jul 30, 2010, at 4:12 PM, Kefala wrote:

Thanks for your reply. Could somebody elaborate and tell me what to
click etc. to actually achieve what you describe?

For an example of the sort of thing see http://www.satcure.info/new/accs/page9.htm
from “Product Title & Description”.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

Thanks for the detail.

Draw a box large enough to hold everything.

Which tool should I use for this?

Now if you repeat steps 2 through 5 for each item, you should have a set of elements that can repeat down the page and give you the layout you want.

So if I create this box with its “set of elements” on (say) an unpublished page, can I simply copy-paste it repeatedly on each published page so I end up with a column?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

6

OK, it’s the HTML tool, I figure.

I think I get this. You create a container “box” for the whole product. Inside that you create another “box” to hold the image. You can set its properties so that the image is held top left and text flows around it (to the right with a decent margin) and below as far as necessary. This seems logical but I have concerns. My products need frequent updates and the work must be quick and easy. Let me tell you how I did it in the past with Claris Home Page, since this should clarify my requirements:

I create an HTML table with several rows and two columns.
Into the first cell I drag and drop an image. The cell expands down wards to accommodate it and I have set the cell width to leave a right margin.
I set the next row so that the two cells are joined. I manually paste “overflow” text into this cell and finish with a divider line.

I repeat this down the page for each product - say twenty of them.

Quite often, I have to add more information for a product. The table expands to accommodate this, so it’s quick and easy.

Inevitably I have to delete an obsolete product. I simply delete two rows, the table closes up and the job is done.

Of course the layout isn’t perfect and changes if the browser point size is different but it’s mostly “near enough”.

Does this change your ideas of how I should lay it out? You can understand that it’s an important decision. If the “perfect” method creates a bunch of work for me in the future, I’ll settle for a less than perfect layout.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

7

You can of course continue to use this method if you are more comfortable with it.

Have you a client to please or just yourself? If a client then this ‘old school’ method is frowned upon in these enlightened days of CSS!

An unlayered table item will cause the ‘page’ to grow to display its contents.

The main thing to watch out for is mixing layered and unlayered - this is when you are likely to get overlapping content.

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

8

I am my client. :slight_smile:

Should I stick with an HTML “table” or will I be safe using CSS?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

9

Walters suggestion is for an inline method (CSS) that ensures that other elements are pushed down the page when copy or text size is increased.

Safe is a subjective term - as long as it put together correctly yes it is ‘safe’. All modern browsers understand CSS at this level. It is only when you start adding more advanced CSS features that some cant cope.

It sounds like once you have this page set up, then the formula will be easily repeatable for you and is the ‘modern’ way to go.

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

10

I’ll experiment. Here is my initial stab at it!
http://www.satcure.info/new/accs/skydigiboxes.html

One thing that puzzles me is that I’m unable to “import” or drag an image into a CSS table cell. The only way I can do it is tedious:-

  1. drag and drop the image onto the page.
  2. select image.
  3. cut image onto clipboard
  4. click on table cell 3 times to get the flashing cursor inside
  5. paste image

Is there an easier way?

(BTW I appreciate your help in “leading a newbie by the hand”. I hope this discussion helps others trying to do something similar.)

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

11

On 1 Aug 2010, at 14:37, Kefala wrote:

One thing that puzzles me is that I’m unable to “import” or drag an image into a CSS table cell. The only way I can do it is tedious:-

  1. drag and drop the image onto the page.
  2. select image.
  3. cut image onto clipboard
  4. click on table cell 3 times to get the flashing cursor inside
  5. paste image

Is there an easier way?

Somewhat: click into the cell to get a flashing cursor, then go Insert>Graphic Item, then hit Apple-E to put a picture in it.

Here’s an interesting, if rather biased, article about CSS via tables:

http://bit.ly/9Ane

best wishes,

Paul Bradforth

Buy my eBooks at:
http://www.paulbradforth.com/books/

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

12

Somewhat: click into the cell to get a flashing cursor, then go Insert>Graphic Item, then hit Apple-E to put a picture in it.

OK. That doesn’t seem to save me any clicks but I’ll try it! Is the end result any different?

Here’s an interesting, if rather biased, article about CSS via tables:

Thanks, I’ll read it but I don’t care what’s “under the hood”. I assume that, if the “CSS” button is blue, then I’m using CSS and not “tables” (even though it looks like a table to me!)

As I explained, above, I need to be able to edit and delete product listings quickly and easily. (I had considered but discarded the idea of using a product database. Some other time, maybe!)

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

13

The acronym CSS is a really large umbrella. CSS stands for Cascading Style Sheets, which means in the largest sense a separation of concerns in Web design between the content (words and pictures) the structure (semantic tags like H1 or DIV) and the way those elements look (the Style part of CSS). In a perfectly-realized example of this style, you would have nothing except the content and structural tags in the HTML file, and everything to do with the style – the text style, the position of elements and their visual relationship to one another – in a separate CSS file.

Freeway does a sort of middle way here, and puts the positioning information inline within the HTML, and (if you elect to use external style sheets) all the text styling information in an external css sheet.

If the CSS button in Freeway is blue, then anything you draw on the page after that point will be placed as a CSS-positioned element. This means that it is (usually) alone on an infinite plane in Cartesian space. Its position is noted as a distance from at least two sides of the page, and its dimensions are noted (usually) in pixels. The third axis (Z) is the stacking order of these infinite planes, with higher numbers closer to the viewer of the page, and lower numbers nearer the bottom of the stack. These elements are not aware of one another, so if one grows, it will simply over- or under-lap any adjacent elements. At the very bottom of the stack, unmoved by any notion of Z-index, is the background color of the page, and directly above that is the background image of the page. Everything else floats above that.

If the button is gray, then everything you draw will be part of one or more “layout tables”, and HTML elements will not be able to overlap one another. They will also repel one another when they grow, so you won’t have the overlap issue. This benefit (for you) comes at the cost of taking an element that has a specific semantic meaning (tables hold tabular data, which relates in terms of columns and rows to the other content in the same table structure) and using it for a completely meaningless purpose (the visual layout) instead. This has serious repercussions for visually-disabled site visitors, who are not only not interested in the visual layout at all, but are desperately trying to maintain the thread of what your page is about even while it is carved up into multiple unrelated boxes without regard for the overall meaning.

The inline layout technique, where you nest HTML and graphic elements within a parent HTML box, and use floats and padding and margin to create the visual structure of the page, is a way to take the best of the table layout (the content items don’t overlap when the text resizes) and also get the best of the modern CSS-positioned layout (the content is organized according to its logical flow, and the positioning and visual style is separate). It’s not as easy, but in the long run, the benefits outweigh the drawbacks.

CSS also controls the way that the text looks and behaves, and that can’t be turned off or on in Freeway, unless you switch the output mode of the page to HTML 3.2 for some reason. These styles are either written into the head of the page or an external stylesheet.

Just to be clear, toggling the CSS button only affects things you draw after that moment in time. The Inspector controls each element separately and can change the layout mode for those elements separate of what the big button is set to. If you want to convert an element you’ve already drawn into a positioned layer, then you can simply check the Layer checkbox in the Inspector while that element is selected in the design view. You can then use the Move Forward/ Backward controls or drag and drop within the list of elements in the Site pane to change the sort order.

Walter

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

14

On 1 Aug 2010, at 15:03, Kefala wrote:

OK. That doesn’t seem to save me any clicks but I’ll try it! Is the end result any different?

No, but it’s a whole lot easier. It gets rid of the drag and drop, which is a godsend, and it stops you having to cut and copy and stuff.

best wishes,

Paul Bradforth

Buy my eBooks at:
http://www.paulbradforth.com/books/

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

15

It gets rid of the drag and drop

And is it not the case that if you drag and drop then your FW doc gets severely bloated by the images cached within it. Rather than when you import the images they are merely referenced.

So in a several hundred page site your FW doc would become huge.

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

16

then your FW doc gets severely bloated by the images cached within it.

Or is that only when you copy/paste? Hmmm - going off to check…

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

17

Thanks to you both. I’ll try that method of inserting images. I was already aware - in a vague fashion - of what CSS is about.

I’m assuming that if I create a single CSS “table” item per page, with images and text inserted sensibly, and avoid any layers or additional items outside of that “table”, then I shouldn’t have any problems with overlap.

I am especially keen to avoid problems for blind people as I do have a few blind customers. I will get one of them to check my work as I progress.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

18

On 1 Aug 2010, at 20:37, DeltaDave wrote:

It gets rid of the drag and drop

And is it not the case that if you drag and drop then your FW doc gets severely bloated by the images cached within it. Rather than when you import the images they are merely referenced.

I didn’t know that; interesting. I only said it because I loath drag and drop as a means of placing images.

best wishes,

Paul Bradforth

Buy my eBooks at:
http://www.paulbradforth.com/books/

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

19

Oh, dear. I thought I understood but clearly I don’t!
Please can you tell me how to fix this text problem in the “table”.

http://www.satcure.info/new/accs/skydigiboxes.html

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

20

I can fix the text overlap if I delete the (Return) before “Prices” then hold (Shift) and press (Return) twice.

Why should I have to do this?

Note: I copy-pasted the text in from a “Classic” document. Maybe I copied something invisible that’s screwing it up?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options