How to teach coworkers DIV & CSS?

W

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
 
A

Andreas Prilop

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.
 
R

Richard

Andreas Prilop said:
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.

<div> is the equivelant of a table data cell. It has a meaning and a
purpose.
In fact, you might say it is the heart of CSS.
It is not an element, it is an identifying tag which has elements.
Can you show us an example of where you would have two seperate paragraphs
running side by side?
I'd like to see that trick.
 
K

Karl Groves

Woolly Mittens 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.

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
 
W

Woolly Mittens

Karl Groves said:
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>. :)
 
S

Steve Pugh

Richard said:
<div> is the equivelant of a table data cell.
No.

It has a meaning and a purpose.

Yes, but a totally different meaning and purpose to td.
In fact, you might say it is the heart of CSS.
No.

It is not an element, it is an identifying tag which has elements.

Can you show us an example of where you would have two seperate paragraphs
running side by side?

An example of how to do it?
Or an example of where such a layout would be desirable?
I'd like to see that trick.

Hmm, guess you mean an example of how to do it then.
http://steve.pugh.net/test/paras.html


Steve
 
B

Barry Pearson

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?
 
B

Brian

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.

The folks whom you outsource to need to know HTML, I'm afraid. The point
of tableless layout is not to replace all bogus table markup with div
markup. It is to replace bogus markup with the most appropriate markup
available. Sometimes, that will indeed be div. But quite often, it will
be something that actually has some meaning to uas. Here's something
from a restaurant website that I redid.

<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr>

<td width="260" valign="top"><strong><font face="Times New Roman"
color="#FFFFCC"><big><em><big>T.S.McHugh's</big></em></big></font>

Sure, on the new site, I could have used

<div>T.S.McHugh's</div>

and, with some css, made it look once again like a heading. This would
have advantages over the original site (lighter page, more flexible via
user stylesheet). But it is still not as good as it could be.

<h1>T.S.McHugh's</h1>

That's what I went with, because it is obviously a heading on the front
page of the new site (url in sig, in case you're curious). Now, it has
the advantages of the div markup (lighter page, more flexible), plus, it
provides more information to user agents: "here is the main heading,
this page is about T.S. McHugh's." Then, I applied css to the h1 to
change its appearance a bit.

In sum, I think the best answer to your question is to change the
question. "...how to develop a website using [proper html] and CSS,
instead of TABLES." And the first step is to learn what html is really
about. It isn't a dtp language. It is a structural markup language.
Here's a couple of sites on HTML that I like.

http://www.htmlhelp.com/
http://tranchant.plus.com/web/html-start
http://webtips.dan.info/

And the reference:
http://www.w3.org/TR/html4/

Do you want css references, too? I can't seem to locate a beginner's
tutorial. Didn't Eric Meyer have one? Well, perhaps a book might be useful?

_Eric Meyer on CSS_

Good luck.
 
T

Toby A Inkster

Barry said:
I would be interested to know how others handle this initial stage? Or do
other people just "know" how to form the basic elements?

Errr. Yeah, basically. I tend to start with plain text, mark up headings
and paragraphs, add inline links, emphasis and other semantic markup.

Then I'll wrap a big '<div id="content">...</div>' around that, add '<div
id="navi">...</div>' below it and stick whatever navigation stuff I want
there.

*Then* I'll decide what it should look like.

I'll turn on borders for all block level elements and, using my trusty
tezt editor and Opera, add basic CSS positioning, which usually takes just
a few minutes. Then spend about another hour working out combinations of
selectors and stuff to fix IE5 and IE6 bugs. I usually don't test in Moz
until the last minute.

Then turn off the borders and add whatever colours, etc I want.
 
W

Woolly Mittens

CC Zona said:
Here's one more you can add:

http://www.hotdesign.com/seybold/ (You can quick-review the entire tutorial
at http://www.hotdesign.com/seybold/everything.html)

Thank you ever so much. You're the first one to actually answer the question
instead of endlessly discussing the semantics of the question.

The site seems very useful to convince my coworkers to use CSS layout, I
hope the <insert warzone here> people can see past the colourful cartoonage
though.

And a note to all the people who replied in this thread. It's perfectly OK
to discuss the question, but please don't forget to answer it.

Greetings,
Woolly
 
C

CC Zona

Woolly Mittens said:
Thank you ever so much. You're the first one to actually answer the question
instead of endlessly discussing the semantics of the question.

The site seems very useful to convince my coworkers to use CSS layout, I
hope the <insert warzone here> people can see past the colourful cartoonage
though.

It's released under a Creative Commons license permitting derivative works,
so if the cartoons are inappropriate to your needs or you want to skip some
sections, you can distribute a modified version as long as it complies with
the license terms (attribution, etc.)
 
K

Karl Groves

Woolly Mittens said:
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>.
:)

Sorry. Not interested in helping someone who takes jobs from their
countrymen.

-Karl
 
B

Brian

Woolly said:
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>. :)

I cannot parse the last part of that reply. You doubt there are many
more of your freelancers in the place where your freelancers are? If
I've missed the obvious, well, pardon me and please make it more obvious.

Karl Grove gave you good advice, imho. If your freelance web developers
do not know how to write proper html, and don't know what css is, then
you have the wrong freelancers on the job. And if they're freelancers,
surely you can find new ones. Or is there a contract involved?

I don't know how much we can help you if we only get cryptic information
about the problem.
 
B

Brian

Woolly said:
...


Thank you ever so much. You're the first one to actually answer the
question instead of endlessly discussing the semantics of the
question.

<ahem> Actually, some of us *did* answer it. In my response, I even
included some html tutorial sites that I thought you'd find useful, but
you seem to have ignored it. How nice to see that my time was wasted.
And a note to all the people who replied in this thread. It's
perfectly OK to discuss the question,

Thank you for giving us the permission to discuss html authoring
questions in comp.infosystems.www.authoring.html and alt.html.
but please don't forget to answer it.

Ok. By the way, please don't forget to pay your helpdesk bill.

All the best.
 
E

Eric Jarvis

Toby said:
Errr. Yeah, basically. I tend to start with plain text, mark up headings
and paragraphs, add inline links, emphasis and other semantic markup.

Then I'll wrap a big '<div id="content">...</div>' around that, add '<div
id="navi">...</div>' below it and stick whatever navigation stuff I want
there.

*Then* I'll decide what it should look like.

I'll turn on borders for all block level elements and, using my trusty
tezt editor and Opera, add basic CSS positioning, which usually takes just
a few minutes. Then spend about another hour working out combinations of
selectors and stuff to fix IE5 and IE6 bugs. I usually don't test in Moz
until the last minute.

Then turn off the borders and add whatever colours, etc I want.

OK...two processes I recognise...but I like to think I've moved on from

I start with drawing up a clear "mission statement"...printed out and
placed where I can see it until it's absolutely ingrained into everything
I do on the site

then using post it notes all over the floor I decide what the site
structure will be and then either divide up existing content or create the
content to fit...I do the basic html mark up and also proofread at the
same time...these are the stages at which I do most of the work regarding
search engine optimisation and accessibility

then I put together a basic template using a page of content and set up
the navigation...I do the css with the template until I'm happy it's
likely to be fairly stable...then chop in the content to make each
individual page and check each one

finally upload...tweak for a range of browsing situations...test, test and
test again...and go live
 
A

Andy Dingley

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.

How about something that explains to your boss why outsourcing to the
ignorant doesn't help your overall business ?
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top