John, OK, time for the long explanation.
I think we just all like to overcomplicate things and in fact the
principles are very simple if we relate them to things we already know.
Whilst it is easy for people to say how “powerful” CSS is and how it can be
“inline”, “fluid” and relative" at the end of the day mate it is all
passionate speak for some very easy to comprehend stuff. Bear in mind that
the Global positioning System can pint-point anywhere on the whole planet
using half a dozen co-ordinates (disclaimer in the post) so let me put it
like this - this is figuratively and fairly literally how it works.
-
you browser is basically a 2D map of pixels (x and y values). So if you
have a 1 pixel wide pin you can tell your browser exactly where to place it
using just a couple of values. So chuck it a couple of values and bang
there is your exact point - simple.
-
The “normal” way Freeway works is to use what is called (in CSS terms)
“absolute positioning” which does exactly what we mentioned in point 1 -
i.e. just like a GPS system it gives 2 values (x and y - or sideways and
up/downwards to be totally clear). Imagine your design is made by literally
pinning cut out sections of your design onto a pin board and your pin goes
into an exact point depending on the x and y value - that is how Freeway
works straight out of the box - absolute positioning - and it works
perfectly. Thats why with FW you can shimmy up your images and text one
pixel at a time with complete accuracy. Sounds ideal 
-But there is a
downside 
heres just a couple of them…
-
- not all browsers are the same shape and size (we can control for that
to a large degree but it still sucks when your design is wider than the
screen)
-
- (and most problematically…) what if later you decide to add more
text to your webpage or a bigger image - kind of sucks when every single
item in your webpage is basically bolted to the screen with an exact
coordinate doesn’t it and yet you dont have space for more text. What you
will find is that your site is a rigid, stiff framework, unable to respond
to browsers and unable to budge up out of the way when the little one says
rollover.
- so enter CSS proper (we’re skipping over 10 years of html table layouts
here - we dont talk about that anymore, we’ve had grief counselling and
moved on) and by “CSS proper” (made up term - dont quote it) I mean using
the full range of layout controls in CSS. 100% Absolute positioning is fine
but your webpage is basically nothing more than a big rigid image with
electronically readable text at the end of the day. There is a better way
- some call it elegant and powerful, and like all great ideas it is very
simple when you get your head around it.
If you imagine your browser window as potentially infinite (because it
could stretch in any direction depending on what you add to it) so we first
wanna draw a page with borders so we have a framework to work in - we do
this with css by creating the first big empty box. But we cleverly make
this an elastic box that will stretch bigger when we add more stuff to it.
We can decide to make it only stretch length ways (thats generally a good
idea) to give it some kind of order.
Now, in order to add anything into our box we first have to wrap it in a
box of its own - this is literally how CSS thinks, it calls them DIVS
(short for divisions) and they’re blocks of content on your site.
So, if you made it this far here is how I would build a simple page in FW -
and without code - we’re just getting concepts here…
- I create a box 960 pixels wide and I centre it in the browser - the
height is elastic.
- I wanna add a title in it so double click in the box and insert it -
html pages work just llike word processors - left to right , and top to
bottom - so it sits neatly in the top left corner. Freeway has kindly ut
this in a box called a DIV - so I centre the box in the screen (I have a
control for align). But it is too near the top and I want it further down
the page - hitting return is an ugly way to do it cause its too inaccurate
I have a few better options. I can add some padding to the top of my box or
I can add a margin to top of the box to shimmy the text down and to put the
title exactly where I want it. Also, if I wanted, instead I could insert an
empty box above it and size the empty box to fill the space between the top
of my browser and the title to get the title exactly where want it - any
of the 3 will work and you will discover the pros and cons of each as you
play. That mate, is how CSS layout works!
My advice is dont make any real websites - just play for a while - its
quicker and you will learn more.
Try this…
-
open a new freeway document - size it any size
-
double click on the page to make the cursor flash (this will insert any
code you enter inline - i.e. not absolute) because it will now flow with
the content you enter. Insert a html box and align it centre. That is now
one div box nested within another div box and is proper CSS inline code -
boxes within boxes. Double click again until the cursor flashes and insert
a few more boxes and colour just one of them
3 Play with stretching and aligning various boxes in such a way as to
position the coloured box in different places in the browser to your will.
You can enter text and images in the boxes and watch how they stretch and
push each other out of the way.
Now, finally, realise this…
You have created PERFECT CSS code “proper” in doing this
Whats more amazing is that the only CSS code required to create a DIV box
with the word sausage in it is this…
sausage
And to put the box inside another box is just this…
A simple concept and a simple solution I’m sure you will agree - the code
soon gets long and complex but in principle it is very basic. The even
better news is that you own a fantastic piece of software that creates all
the code for you and does a very good job of it without teaching you bad
coding principles. Mast FW and learning code will be very easy!
Numerous folks here have written brilliant tutorials on how to perform this
kind of laying out in FW in practical terms so check them out.
On 18 April 2013 23:21, Todd email@hidden wrote:
The quick-n-dirty of it is essentially this:
An inline layout gives you a near bullet-proof layout that will flex
vertically to accommodate any amount of content. It can also be made to
stretch horizontally so the entire layout flows with the width of the
browser window, also known as a “liquid” layout. The biggest advantage is
its adaptability.
Despite what you may hear an inline layout isn’t necessarily more
restrictive in design terms than a non-inline, but it absolutely does
require more planning, more creative problem-solving and a deeper
understanding of CSS to pull-off certain designs that might otherwise be
easier to do when simply drawing boxes on the page. This is the biggest
hurdle to overcome if you’re new to CSS.
And if you’re using a CMS then an inline layout is almost a must-have.
Todd
http://xiiro.com
On a general note (and forget this if it is too big a question for tis
thread) what are the relative pros and cons of inline v non-inline layouts?
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
