How to teach coworkers DIV & CSS?

Discussion in 'HTML' started by Woolly Mittens, Apr 20, 2004.

  1. 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, Apr 20, 2004
    #1
    1. Advertising

  2. Woolly Mittens, Apr 20, 2004
    #2
    1. Advertising

  3. 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.
     
    Andreas Prilop, Apr 20, 2004
    #3
  4. Woolly Mittens

    Richard Guest

    "Andreas Prilop" <-hannover.de> wrote in message
    news:pine.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.
     
    Richard, Apr 20, 2004
    #4
  5. Woolly Mittens

    Karl Groves Guest

    "Woolly Mittens" <> wrote in message
    news:408516e1$0$50723$...
    > 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
     
    Karl Groves, Apr 20, 2004
    #5
  6. "Karl Groves" <> wrote in message
    news:c63avv$ije$...
    >
    > "Woolly Mittens" <> wrote in message
    > news:408516e1$0$50723$...
    > > 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>. :)
     
    Woolly Mittens, Apr 20, 2004
    #6
  7. Woolly Mittens

    Steve Pugh Guest

    "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 <> <http://steve.pugh.net/>
     
    Steve Pugh, Apr 20, 2004
    #7
  8. 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/
     
    Barry Pearson, Apr 20, 2004
    #8
  9. Woolly Mittens

    Brian Guest

    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/
     
    Brian, Apr 20, 2004
    #9
  10. Woolly Mittens

    CC Zona Guest

    In article <408516e1$0$50723$>,
    "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.


    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
     
    CC Zona, Apr 20, 2004
    #10
  11. Barry Pearson wrote:

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

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me - http://www.goddamn.co.uk/tobyink/?page=132
     
    Toby A Inkster, Apr 20, 2004
    #11
  12. Woolly Mittens, Apr 20, 2004
    #12
  13. "CC Zona" <> wrote in message
    news:...
    > 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
     
    Woolly Mittens, Apr 20, 2004
    #13
  14. Woolly Mittens

    CC Zona Guest

    In article <40856242$0$89216$>,
    "Woolly Mittens" <> wrote:

    > "CC Zona" <> wrote in message
    > news:...
    > > 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.


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

    --
    CC
     
    CC Zona, Apr 20, 2004
    #14
  15. Woolly Mittens

    Karl Groves Guest

    "Woolly Mittens" <> wrote in message
    news:40853968$0$50721$...
    >
    > "Karl Groves" <> wrote in message
    > news:c63avv$ije$...
    > >
    > > "Woolly Mittens" <> wrote in message
    > > news:408516e1$0$50723$...
    > > > 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>.

    :)

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

    -Karl
     
    Karl Groves, Apr 20, 2004
    #15
  16. Woolly Mittens

    Brian Guest

    Woolly Mittens wrote:

    > "Karl Groves" <> wrote ...
    >
    >> "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.

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


    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.

    --
    Brian (remove "invalid" from my address to email me)
    http://www.tsmchughs.com/
     
    Brian, Apr 20, 2004
    #16
  17. Woolly Mittens

    Brian Guest

    Woolly Mittens wrote:

    > "CC Zona" wrote ...
    >
    >> Here's one more you can add: http://www.hotdesign.com/seybold/

    >
    > 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.
    --
    Brian (remove "invalid" from my address to email me)
    http://www.tsmchughs.com/
     
    Brian, Apr 20, 2004
    #17
  18. Woolly Mittens

    Eric Jarvis Guest

    Toby A Inkster wrote:
    > Barry Pearson wrote:
    >
    > > 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.
    >


    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

    --
    eric
    www.ericjarvis.co.uk
    "live fast, die only if strictly necessary"
     
    Eric Jarvis, Apr 20, 2004
    #18
  19. Woolly Mittens

    Mark Parnell Guest

    On Tue, 20 Apr 2004 14:24:55 +0200, "Woolly Mittens"
    <> declared in
    alt.html,comp.infosystems.www.authoring.html:

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


    I think others have made the point about it being correctly structured
    HTML, not just <div>s everywhere, so I won't go there. :)

    http://www.allmyfaqs.com/faq.pl?What_is_CSS
    http://www.allmyfaqs.com/faq.pl?Why_use_CSS
    http://www.allmyfaqs.com/faq.pl?Tableless_layouts

    --
    Mark Parnell
    http://www.clarkecomputers.com.au
     
    Mark Parnell, Apr 20, 2004
    #19
  20. Woolly Mittens

    Andy Dingley Guest

    On Tue, 20 Apr 2004 14:24:55 +0200, "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.


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

    --
    Smert' spamionam
     
    Andy Dingley, Apr 21, 2004
    #20
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Nik Coughlin

    How to teach someone HTML/CSS?

    Nik Coughlin, Nov 27, 2008, in forum: HTML
    Replies:
    40
    Views:
    2,492
    dorayme
    Dec 24, 2008
  2. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    779
  3. Replies:
    13
    Views:
    232
    Josef 'Jupp' SCHUGT
    Dec 29, 2005
  4. Dwayne Madsen

    Q: Div A inside Div B is larger than Div B

    Dwayne Madsen, Jun 1, 2005, in forum: Javascript
    Replies:
    1
    Views:
    211
    David Dorward
    Jun 1, 2005
  5. mscir
    Replies:
    3
    Views:
    336
    Martin Honnen
    Jun 26, 2005
Loading...

Share This Page