Is building a site with CSS toggled on a whole different animal?

I finished building my first good site with table layout after making a couple of crappy learning curve sites. I would like to take it a step up and make sites with the CSS layout toggled on. If I make a site with the CSS layout is there some different approaches that I should take designing, or are things about the same?


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

On a really basic level the difference between CSS button layouts and table layouts is layering. With layers you can have background areas that show through transparent areas in any layer above them, and without any blank borders appearing around the layered object. The benefits of that should be obvious.

The second basic difference comes when you start using a “box model” (basically nested html boxes) to layout pages. This technique will allow page content to expand and contract without your page layout falling apart or objects obscuring other objects. This is a tricky thing at first to get used to as it does take some preplanning on your part as to how your layout will be organized.

CSS styling on type is probably the most important aspect and that is because modern web browser all handle CSS pretty much the same way which means that your page will look the same no matter what platform the browser is running on as long as CSS styles have been applied. (The notable exception is MS IE, but lets not dwell). CSS styled pages, in general, also can be quicker to load as they rely on less code to function properly.

Is it easier than doing a table layout? Nope. But you can get more satisfying results for both you and your web audience by using CSS.


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

Thats really interesting about the layering. I have made probably 80% or more of my elements into layers already because sometimes they would interfere when previewed and that would always take care of it.

So when you make a site with css layout on, freeway creates the divs based on the boxes that you make on the page?

Is there any advantages or an instance when you would want to stick with a table layout for the sites presentation , or is table layout pretty much old school and its best to move on to css for everything.


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

Sometime around 8/1/09 (at 01:12 -0500) Waylen said:

when you make a site with css layout on, freeway creates the divs
based on the boxes that you make on the page?

Correct. Or to be more accurate, when an item’s Layered checkbox is
checked then it will be output as a div… and when it isn’t checked
then the item will be positioned as part of a page-wide table
structure.

The CSS Layout button only defines how objects that you then make
will begin life: as layered or as non-layered items. It doesn’t
change anything to do with how existing items are output!

Is there any advantages or an instance when you would want to stick
with a table layout

If you’re using Freeway to create HTML structures for rich email
templates then you’ll need to stick to HTML 3.2 (which doesn’t
support CSS at all) or many email clients will make a complete dog’s
dinner of the structure.

Otherwise… no advantage springs to mind.

k


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

Sometime around 7/1/09 (at 22:37 -0500) chuckamuck said:

On a really basic level the difference between CSS button layouts
and table layouts is layering.

Exactly. At this level it is very easy indeed.

The second basic difference comes when you start using a “box model”
(basically nested html boxes) to layout pages.

However, at this level it can be damn frustrating!

By all means give the box-model thing a go once you’ve tried out the
simple process of working with things layered. But be aware that it
will not be as simple as normal Freeway page layout, and that you
will struggle.

Me, I still find Freeway’s box-model layout production process just
too annoying for serious design work, even though it does offer some
interesting possibilities.

k


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

Having just read the last few articles on CSS i have a question. Making the html items into layers is great as i no longer have the problem of my pages being obliterated when the font is enlarged - i normally test it by using the quick font size buttons in safari - But the text does overlay any graphics on the page. Is there a way of making the graphic items ‘drop’ as the text boxes grow to prevent this from happening.
Also if any one can answer me this- i have now been tagging my ‘meaty’ titles with h1,h2 etc. When i view the source they appear almost at the bottom of the page now that they are layered - non layered text boxes jump to the top! It was suggest previously that i just nood to select them and choose bring to front. This had the Bizaarre effect of sending it even further down the page so i have had to resort to selecting the biggest h tag eg h3 and selecting send to back, then h2 send to back then h1 send to back. Then when i view the source they are in the correct order. Why!!!

Regards
Alan…


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

Sometime around 8/1/09 (at 04:46 -0500) Alan Herbert said:

i have now been tagging my ‘meaty’ titles with h1,h2 etc. When i
view the source they appear almost at the bottom of the page now
that they are layered

Don’t worry so much about the order of the text elements in the
code. It isn’t a bad thing to deal with if it doesn’t get in the way,
but the most important thing here is to tag important text with
‘head’ styles.

What happens is pretty logical once you think about it. Items added
later to the page come further down (later) in the generated code,
and they also sit on top of items added earlier. Until you start
sending things backwards/to the back, that is - as you’ve found, this
changes the ‘running order’ of items in more ways than just how they
stack in the layout.

k


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

Thanks for that and well done for understanding my message. I have just read it back with cup of tea in hand and what is ‘nood’ ?
The thing i find strange is that i though bring to front would have raised it in the list and not lowered it ! I am happy to accept these things but my 11 year old son loves the word Why? and he gets fed up when i say just because!
Thanks again for your answer

Alan…


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

On 8 Jan 2009, at 10:10, Alan Herbert wrote:

The thing i find strange is that i though bring to front would have
raised it in the list and not lowered it

That’s definitely a good question, and one to raise me from my torpor!

The list apparently works backwards because the page itself is the
bottom-most element at any time. Everything else is a “child” of the
page.

So, in the Freeway world, bottom is top, top is bottom. Hope that
makes things clearer.

Oh, forgive me for only having skimmed the thread so far, but any non-
layered items on your page will always be below layered items. You can
not send a layered item behind a non-layered item on a page, so it
might appear nothing happens if you try. All that is occurring is
Freeway sending the relevant item to the back of the stack it’s in, be
it a CSS level or a table level. That said, the page is always at the
bottom of the heap, no matter what.

=o)

Heather


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

Sometime around 8/1/09 (at 05:10 -0500) Alan Herbert said:

The thing i find strange is that i though bring to front would have
raised it in the list and not lowered it !

Here’s an answer you’re familiar with! Just because. :slight_smile:

Think of it in terms of writing a technical description of the page
as you build it. You start with what you put down first, then move on
to what you add on top of that. This is the order in which the HTML
code is written. I suppose it could be done the other way around, but
there are logical arguments for each way. And this is the way it was
done. So it is how it is just because this is how it is. :wink:

k


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

Thanks for all your replies.
So Non layered items being below layered items will actually appear higher up in the source code because it is running backwards - with the ‘higher’ elements being lower down on the source code page.

Alan…


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

Think of it as writing a story. Your start be setting the scene and
your climax (the memorable element that really makes the reader sit
up) comes at the end.

Colin

On 8 Jan 2009, at 10:53, Alan Herbert wrote:

Thanks for all your replies.
So Non layered items being below layered items will actually appear
higher up in the source code because it is running backwards - with
the ‘higher’ elements being lower down on the source code page.

Alan…


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