Tables vs. Tables vs. CSS

I’m a little confused about tables and CSS. Everyone usually says not to use tables for page design, which is fine. But, in the case of Freeway does that mean have the CSS button on all the time or does it mean you can create you pages with the button off, just don’t build your pages using the Table Tool?

Thanks in advance…


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

Whenever the CSS button is off your page will only allow non-layered tables.


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

Is it “better” to work with the CSS button on? I find it harder to work with the CSS layering.

For instance, simple example. You have a box with text in it. Below that you have a box with your navigation links (breadcrumb links) in it. With the CSS button off and text resized in a browser, the boxes move together.

When this is created with the CSS button is on, the boxes overlap each other. I assume inflow CSS boxes are used then, but I find them hard to control.

Unless I’m doing something wrong…


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

Using the “box” model with CSS does take more discipline, but the reward is more flexible and consistent pages. You have to think ahead somewhat as to how your layout will be organized in order to know how many boxes you will need. The first things to master in this process are simple but important, those being in-line divisions and floats.

With the CSS button on, Freeway 5 Pro now regards a blank layout page as a “page div” as if you drew an html box to cover the page. Clicking on a blank page shows you the insert text cursor which allows you to insert html boxes (divs). You could still draw an html box to cover the whole page and put all your content inside of it if you wish of course.

In-line divs are nothing more than html boxes inside other html boxes, but the Freeway way of doing things requires you to “insert” these in-line boxes and not just draw them in. Once “inserted” these boxes can now be “floated”. Boxes can floated left or right, or not at all.

Once the above is down, now you have options as to how these boxes distribute the content in them by adding “padding”. For example, if you want to have a gap between the edges of the text box and the text inside it you would add padding to the box to keep the text from coming too close to the edge of the box.

Another option would be to add “margins” to the text boxes. Margins are useful for keeping a specific distance between boxes. If you do add a margin however you have to keep in mind that it will shove things around to make room for it’s self, therefore the need to plan ahead somewhat.

There are other things you can do to influence things (sometimes with unintentional consequences) but eventually you know to watch out for these things.

I hope that is helpful. CSS is a rather large subject to cover in a short message and takes time to learn and experiment with.


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

Wow! Thanks so much for the explanation. Makes things much clearer.

I will be doing some web sites in the near future, though I am not a web designer. I’ve worked in print design for a million years, and every now and then a web site is required. (Anything more than basic and I call the pros!).

Thanks again for taking the time to explain all that. Much appreciated.

Bob


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

I’ve worked in print design for a million years, and every now and then a web site is required. (Anything more than basic and I call the pros!).

This seems to be the common thread for all new Freeway users. I fell into that group when I first started with Freeway 3.5 as well.


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

chuckamuck,
I sort of get what you described above. It would be great if you could provide a graphic representation of this. How? I’m not sure but it’s tough to get my head into this CSS thing.

Thanks for your continuing explanations.


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

On 19 Jun 2008, 10:36 pm, Chod Lang wrote:

chuckamuck,
I sort of get what you described above. It would be great if you could provide a graphic representation of this.

Yeah, I jotted that up in a hurry and it is a bit disjointed. Although this link is old and based on Freeway 4 (and not by me, thanks Big Erns!) it is a good example of what I was talking about. The file will open fine in Freeway Pro 5.

http://www.thebigerns.com/freeway/goofy/


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

Hi Chuck, Thank you! Your explanation was great. I was wondering the same thing, and this cleared up a lot for me.
Does this mean that if the CSS button (layers) is on, it’s considered xhtml strict? I notice that a lot of coders do their pages as xhtml strict 1.0 promoting W3 Valid CSS. Is this considered the best practice today?

If I want my site to be purely CSS, I guess I would have to go in and select layers for all the items that did not have it checked, right? How would you handle a graphic rollover button in this case?

Thanks for shedding light on table vs CSS mystery:)
Rebecca


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

Does this mean that if the CSS button (layers) is on, it’s considered xhtml strict?

In a word, no. The html layer is set independently of anything you do on the page. It’s set in the Document Setup area in Freeway.

I notice that a lot of coders do their pages as xhtml strict 1.0 promoting W3 Valid CSS. Is this considered the best practice today?

XHTML strict is certainly where most new sites are set to. It is more standards compliant between browsers. Web designers who’ve been using 3.x or 4.x for awhile have to get used to not having certain things available anymore, but those things were cludgy anyway so not a big loss.

If I want my site to be purely CSS, I guess I would have to go in and select layers for all the items that did not have it checked, right? How would you handle a graphic rollover button in this case?

First of all, keep in mind that not all CSS layers have to be “in-line”. The CSS button when active creates a new layer for every object you add. That can be graphics or traditional tablels as well as html boxes. In-line boxes simply give you the ability to keep everything together so that when text is enlarged by a browser all the elements are resized together. You can still have other CSS layers on top of those, they just won’t stay grouped together like in-line items will. One thing that can affect functionality of your CSS layers is when you started using them. Turning them on after starting a layout with them off is perfectly ok, it just could lead to other problems later.

So to answer your question it really makes no difference for the functionality of a rollover button whether it is a CSS layer or not. It’s really more about layout integrity. Once you start using CSS layers there are not many reasons to stop.


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

Is there an easy way to insert graphics in table cells?


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

CvsUser

Simple. Create a graphics box loose on the page, insert your image and size the box to fit. Select the image and cut it (Apple-x). Go to the table cell you want it to reside in, click on it to get a flashing text cursor and now paste (Apple-v) the image into the box.
The image will now act as a type character and can be aligned horizontally and vertically within the table cell (experiment with this). Further, if the table cell can include ordinary text which can be set to run around over/under the image.


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

One other thing: Can I gather that Inline, drawing a box in a box, and grouping boxes all yeild different results?

Grouping and drawing a box in a box doesn’t seem to keep things together, where as Inline does, but I find Inline a real pain to alter or move around.


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

One other thing: Can I gather that Inline, drawing a box in a box, and grouping boxes all yeild different results?

Yes, and no. Inline divisions take more thought and are more rigid in terms of their organization but they do keep a layout from falling apart when text is enlarged. That may feel limiting, but with a little creative thinking you can achieve just about anything using them. Remember, you can put anything you want in a inline box.

Grouping CSS layers just creates a single CSS layer so it’s the same functionally as a single layer. Sometimes editing the individual pieces of a group can be a problem but still doable.


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