Woolly said:
I was asked to find some documentation which explains how to develop a
website using DIV's and CSS, instead of TABLES. This is to explain to
the people we outsource things to, how we want it done.
To avoid the diversions you have got so far, perhaps it is better to talk
about "tableless-layout"! I've seen arguments about whether or not it is
really about said:
I dug around alistapart but couldn't find anything complete enough. I
searched through the W3C, but could only find the standards, not how
to apply them in the desired way.
Where do you want to start? The frustration that I felt when learning how to
do tableless layout last year was that there didn't appear to be a systematic
"top-down method" for turning a layout concept into a combination of skeleton
HTML + positioning CSS. I'm used to using top-down methods.
The stuff in the web appears mainly to be about how to apply a portfolio of
known tricks, or reverse-engineering an existing page. If you were designing a
motor car or a computer package or a new building, I would hope that it could
be done using a systematic sequence of analysis that would gradually refine
the design from broad concepts to the fine detail. I didn't find that,
although perhaps it is there and I just missed it.
Does anyone have some handy links for me??? Replying them here might
also be helpful to other readers
I'll sketch out what I do, in the hope that it will either be useful to
others, or will cause people to identify the sort of tutorial I was after.
Since I normally produce a template that I then re-use many times, the trick
is to implement that template & its corresponding CSS.
I start by drawing boxes on paper, or via a computer package. (I've used
PowerPoint for the purpose). I try to draw the layout concept in the form of a
set of non-overlapping boxes. It can't always be done, but if it can you have
made a good start. This is really the "visual hierarchy".
It is necessary (perhaps unfortunately) to know the limitations of CSS2 to
draw the right sort boxes. The problem is that layout isn't simply about the
position of boxes on a page. (That is the easy bit!) It is also about their
styles, especially borders & backgrounds. Those screw up many attempts. How do
you draw boxes that reach down to the footer instead of stopping at the bottom
of the content of a sidebar? Etc.
These boxes eventually get turned into wrapping & nesting & sequencing of the
outer-level elements in the document. (The ones that often have IDs, because
they often exist just once per page). There may be about 5 to 10 of these.
(These also correspond to the cells of a simple layout table if you are using
tables. A simple layout table is just another way of managing the wrapping &
nesting & sequencing of the outer-level elements in the document. It isn't a
different concept).
I develop the skeleton HTML & corresponding CSS in parallel. (I have both of
them open in Dreamweaver, and keep switching between them. Unfortunately, at
this stage I often write the HTML directly rather than use WYSYWIG view,
because I can't afford ambiguity. But I expect this to change in future, as I
get to know MX2004 more). I tend to give the boxes diagnostic borders &
background colours, and I keep 5 browsers pointing at the skeleton page being
developed so that I can keep checking whether I am attempting something
impossible in one of the browsers.
I then gradually refine the details. It didn't matter at first that the
margins were several pixels adrift. Later it does. (Unfortunately, I've had
designs fail at this stage because I can't make browsers converge. It is,
surprise surprise, often the IE 5 box model that blows things apart).
I tend to find that what goes into those 5 to 10 boxes is much easier to
handle. Often, it is a matter of copying lots of stuff from other CSSs, to be
refined later.
I would be interested to know how others handle this initial stage? Or do
other people just "know" how to form the basic elements?