How to teach coworkers DIV & CSS?

[Woolly Mittens]

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.

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.

Does anyone have some handy links for me??? Replying them here might also be
helpful to other readers :)

Woolly

[Woolly Mittens]

"Woolly Mittens" <wm******@hotma ilz.com> wrote in message
news:40******** *************** @news.versatel. net...

These sites went some way:
http://www.webreference.com/authorin...yout/advanced/

http://www.yourhtmlsource.com/styles...csslayout.html

http://www.westciv.com/style_master/...aying_out.html

Any better finds?

[Andreas Prilop]

On Tue, 20 Apr 2004, Woolly Mittens wrote:

I was asked to find some documentation which explains how to develop a
website using DIV's and CSS, instead of TABLES.

You should avoid using the DIV element, which has no meaning and is only
a "last resort". Rather use elements with defined semantics like P, H1,
H2, etc.

[Karl Groves]

"Andreas Prilop" <nh******@rrz n-user.uni-hannover.de> wrote in message
news:Pine.GSO.4 .44.04042015154 20.13467-100000@s5b003.. .

On Tue, 20 Apr 2004, Woolly Mittens wrote:

I was asked to find some documentation which explains how to develop a
website using DIV's and CSS, instead of TABLES.

You should avoid using the DIV element, which has no meaning and is only
a "last resort". Rather use elements with defined semantics like P, H1,
H2, etc.

http://www.w3.org/TR/html401/struct/....html#edef-DIV
" The DIV and SPAN elements, in conjunction with the id and class
attributes, offer a generic mechanism for adding structure to documents.
These elements define content to be inline (SPAN) or block-level (DIV) but
impose no other presentational idioms on the content. Thus, authors may use
these elements in conjunction with style sheets, the lang attribute, etc.,
to tailor HTML to their own needs and tastes. "

IOW, DIV is appropriate for doing exactly what the OP wants to do.

-Karl

[Harlan Messinger]

"Andreas Prilop" <nh******@rrz n-user.uni-hannover.de> wrote in message
news:Pine.GSO.4 .44.04042015154 20.13467-100000@s5b003.. .

On Tue, 20 Apr 2004, Woolly Mittens wrote:

I was asked to find some documentation which explains how to develop a
website using DIV's and CSS, instead of TABLES.
You should avoid using the DIV element, which has no meaning and is only
a "last resort".

"This is an integral component of my document" is a perfectly meaningful use
of DIV, and the only semantic deficiency in using DIV is the one imposed by
using HTML in the first place instead of XML.
Rather use elements with defined semantics like P, H1,
H2, etc.

[Woolly Mittens]

"Andreas Prilop" <nh******@rrz n-user.uni-hannover.de> wrote in message
news:Pine.GSO.4 .44.04042015154 20.13467-100000@s5b003.. .

On Tue, 20 Apr 2004, Woolly Mittens wrote:

I was asked to find some documentation which explains how to develop a
website using DIV's and CSS, instead of TABLES.

You should avoid using the DIV element, which has no meaning and is only
a "last resort". Rather use elements with defined semantics like P, H1,
H2, etc.

Thanks for not answering my question... again.

[Karl Groves]

"Woolly Mittens" <wm******@hotma ilz.com> wrote in message
news:40******** *************** @news.versatel. net...

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.

As someone who relies on a ton of outsourcing, I recommend NOT giving
production work to someone who doesn't understand what you want.
Your job isn't to teach people how to author CSS instead of tables.

I have a whole stable of freelancers I rely on for overflow work. If I need
something done in PHP, I don't call my .NET guy, even if he knows some PHP.
I call the best person for the job.
If your freelancers don't know CSS, then find someone who does.

-Karl

[Woolly Mittens]

"Karl Groves" <ka**@NOSPAMkar lcore.com> wrote in message
news:c6******** **@ngspool-d02.news.aol.co m...

"Woolly Mittens" <wm******@hotma ilz.com> wrote in message
news:40******** *************** @news.versatel. net...

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.
As someone who relies on a ton of outsourcing, I recommend NOT giving
production work to someone who doesn't understand what you want.
Your job isn't to teach people how to author CSS instead of tables.

I have a whole stable of freelancers I rely on for overflow work. If I

need something done in PHP, I don't call my .NET guy, even if he knows some PHP. I call the best person for the job.
If your freelancers don't know CSS, then find someone who does.

I would if I had a choice. They're from <insert warzone here> and they have
to know what my boss promised our customers. It has to be outsourced to
them, and I doubt there are many more of "them" in <insert warzone here>. :)

[Barry Pearson]

Woolly Mittens wrote:

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 <div>s a number of times. They are really tactical.
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?

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/

[Brian]

Karl Groves wrote:

"Andreas Prilop" wrote ...

On Tue, 20 Apr 2004, Woolly Mittens wrote:

I was asked to find some documentation which explains how to
develop a website using DIV's and CSS, instead of TABLES.

You should avoid using the DIV element, which has no meaning and is
only a "last resort". Rather use elements with defined semantics
like P, H1, H2, etc.

http://www.w3.org/TR/html401/struct/....html#edef-DIV " The DIV
and SPAN elements, in conjunction with the id and class attributes,
offer a generic mechanism for adding structure to documents.

IOW, DIV is appropriate for doing exactly what the OP wants to do.

Unless there is another, more appropriate, element at hand, which was A.
Prilop's point. I once came accross something like this on a news web page:

<table>
<tr><td>&bull ; news item</td>
<td>&bull; news item</td><!-- etc. -->
</tr></table>

If the author of that page asked how to change this from table layout to
div + css, what advice should we give?

<div>&bull; news item</div>
<div>&bull; news item</div>

Ok, that's better than the original; instead of lying about the content
(calling it table when it is not), it says nothing. But it is hardly
optimal. How about the obvious?

<ul>
<li>&bull; news item</li>
<li>&bull; news item</li>
</ul>

The point isn't to change from table layout to div + css. It is change
from table layout to appropriate markup, then use css to alter the
default presentation. If the markup has nothing specifically appriate,
then by all means, use div and span. But, as Prilop said, they should be
used only when nothing else fits the bill.

--
Brian (remove "invalid" from my address to email me)
http://www.tsmchughs.com/