Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > How to teach coworkers DIV & CSS?

Reply
Thread Tools

How to teach coworkers DIV & CSS?

 
 
Woolly Mittens
Guest
Posts: n/a
 
      04-20-2004
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


 
Reply With Quote
 
 
 
 
Woolly Mittens
Guest
Posts: n/a
 
      04-20-2004

"Woolly Mittens" <(E-Mail Removed)> wrote in message
news:408516e1$0$50723$(E-Mail Removed).. .

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?


 
Reply With Quote
 
 
 
 
Andreas Prilop
Guest
Posts: n/a
 
      04-20-2004
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.

 
Reply With Quote
 
Richard
Guest
Posts: n/a
 
      04-20-2004

"Andreas Prilop" <(E-Mail Removed)-hannover.de> wrote in message
newsine.GSO.4.44.0404201515420.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.
>


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



 
Reply With Quote
 
Karl Groves
Guest
Posts: n/a
 
      04-20-2004

"Woolly Mittens" <(E-Mail Removed)> wrote in message
news:408516e1$0$50723$(E-Mail Removed).. .
> 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


 
Reply With Quote
 
Woolly Mittens
Guest
Posts: n/a
 
      04-20-2004

"Karl Groves" <(E-Mail Removed)> wrote in message
news:c63avv$ije$(E-Mail Removed)...
>
> "Woolly Mittens" <(E-Mail Removed)> wrote in message
> news:408516e1$0$50723$(E-Mail Removed).. .
> > 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>.


 
Reply With Quote
 
Steve Pugh
Guest
Posts: n/a
 
      04-20-2004
"Richard" <Anonymous@127.001> wrote:

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


Rubbish. <div>foo</div> is an element. Maybe you need to do a bit of
revision if you're not sure what an element is.

>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

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <(E-Mail Removed)> <http://steve.pugh.net/>
 
Reply With Quote
 
Barry Pearson
Guest
Posts: n/a
 
      04-20-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. 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/


 
Reply With Quote
 
Brian
Guest
Posts: n/a
 
      04-20-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. 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.

--
Brian (remove "invalid" from my address to email me)
http://www.tsmchughs.com/
 
Reply With Quote
 
CC Zona
Guest
Posts: n/a
 
      04-20-2004
In article <408516e1$0$50723$(E-Mail Removed)>,
"Woolly Mittens" <(E-Mail Removed)> 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.


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)

--
CC
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
<div ... /> and <div ...></div> K Viltersten ASP .Net 4 03-31-2009 07:33 PM
Ruby Curriculum for coworkers ssmoot@gmail.com Ruby 13 12-29-2005 07:45 PM
NS/FF don't change div offsetWidth when div innerHTML is added toand div becomes wider mscir Javascript 3 06-26-2005 04:04 PM
Q: Div A inside Div B is larger than Div B Dwayne Madsen Javascript 1 06-01-2005 03:02 PM
I can teach anyone how to get what they want out of life. reynArd VHDL 0 11-20-2004 08:44 AM



Advertisments