Forum Moderators: open

Message Too Old, No Replies

Building complex Webpages Using only Divs

and css/javascript for positioning and effects

         

gaouzief

10:50 am on May 5, 2006 (gmt 0)

10+ Year Member



Hello,

while surfing on the new design of a Major french newspaper, i tried looking at the code and Surprise:

No <tables><tr><td>.... Only Divs! positioned and styled with CSS/javascript

Has anyone came across such a design pattern, i mean this is not some experimental website, this is mainstream.

what would be the pros and cons of bulding complex webpages/templates using Only DIV as a "block" element?

[edited by: BlobFisk at 2:40 pm (utc) on May 5, 2006]
[edit reason] Link removed! [/edit]

4hero

11:37 am on May 5, 2006 (gmt 0)

10+ Year Member



Hi gaouzief,

I am sure there are lots of designers on WebmasterWorld who use only divs, including myself. Tables should not really be used for structuring a site, and only used to display tabular data like rows & columns of figures.

There are lots of pro's for using divs including,

  • less code = quicker loading time & less bandwidth used
  • much easier to manage
  • easier to code by hand (using a text editor)

    The cons are it is a bit more tricky to structure a site using divs, but apart from that there are none.

    I am sure others will add more comment.

  • Robin_reala

    12:22 pm on May 5, 2006 (gmt 0)

    WebmasterWorld Senior Member 10+ Year Member



    The cons are it is a bit more tricky to structure a site using divs

    To start off at least. Personally I find CSS layout a lot easier than tables.

    gaouzief

    12:30 pm on May 5, 2006 (gmt 0)

    10+ Year Member



    What about differences in browser's CSS interpretation?
    isn't it harder to build this kind of pages for non Coders? i mean people used to WYSIWYG environments (most designers actually)

    Pardon me if this sounds too obvious, i come more from a server side environment, i was aware of these techniques but didn't know it had moved to mainstream web design.

    Is there some sort of a CSS Library/Framework that mimics the main behaviours of Table based layouts to help people shift away from the old way of doing things?

    4hero

    1:06 pm on May 5, 2006 (gmt 0)

    10+ Year Member



    To start off at least. Personally I find CSS layout a lot easier than tables.

    It is easier, but a bit more difficult to make a site which will work in every browser.


    What about differences in browser's CSS interpretation?
    isn't it harder to build this kind of pages for non Coders? i mean people used to WYSIWYG environments (most designers actually)

    Pardon me if this sounds too obvious, i come more from a server side environment, i was aware of these techniques but didn't know it had moved to mainstream web design.

    Is there some sort of a CSS Library/Framework that mimics the main behaviours of Table based layouts to help people shift away from the old way of doing things?

    Most sites handle css very well, just not Internet Explorer sometimes..

    In my opinion it is easier to code divs. Take a table, 1 column, 1 row for instance:

    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td>&nbsp;</td>
    </tr>
    </table>

    Using div's all you need to do is:

    <div>&nbsp;</div>

    If you are keen to learn css/div's then w3schools [w3schools.com] is a great place to begin.

    gaouzief

    1:54 pm on May 5, 2006 (gmt 0)

    10+ Year Member



    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td>&nbsp;</td>
    </tr>
    </table>

    Using div's all you need to do is:

    <div>&nbsp;</div>

    True but you need a <div>&nbsp;</div> for every single cell, and you need to recreate the confortable structuring/positionning offered by <table><tr> through css... so i'm wondering how it can be considered "Easier" to build complex layouts without tables...

    Robin_reala

    3:47 pm on May 5, 2006 (gmt 0)

    WebmasterWorld Senior Member 10+ Year Member



    True but you need a <div>&nbsp;</div> for every single cell

    uh

    ou need to recreate the confortable structuring/positionning offered by <table><tr> through css.

    Hold up there a moment. If you go into CSS layout thinking that you can carry on using the same style of layout as tables then you'll have problems. CSS layout doesn't work like table based layout (unless you use display:table etc, but then IE doesn't support that) and you'll have problems if you try to replicate it.

    Instead of looking at a design and mentally splitting it into rows and cells you need to re-educate your brain into mentally splitting it up into blocks of content, and then sub splitting into semantic chunks ("this is a header, this is a list, this is...). Only once you've built the page in plain semantic HTML should you go back to the design (or at least that's the ideal :) ).

    tangor

    9:08 am on May 6, 2006 (gmt 0)

    WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



    What CSS lacks is clear visual design elements as found in the TABLE design.

    Yes, I know I can div this and div that all I like, but getting those divs to be where I want them in every browser is a PITA.

    I am using more CSS these days, but always CONTSTRAINT with with either:

    An over riding CSS wrapper (that sometimes fails)

    or

    A simple TABLE (that never fails).

    I know we have the Semantics Bunch. I know we have the Layout Bunch.

    Why can't we have both?

    (Still working on it!)

    mcvoid

    4:59 pm on May 8, 2006 (gmt 0)

    10+ Year Member



    I'm very new to css, but as I jumped into my new project (rewriting my old site using HTML as structure alone and CSS for all the visual stuff), I was amazed at just how easy it was to get it working. As long as you have a good reference handy (I code with Eric Meyer's Cascading Style Sheets :The Definitive Guide in my lap at all times) there is no problem I've encountered with CSS design that I haven't easily worked past. I'm talking light-up buttons, Div's that distort the background image, the works. It's so easy! and this is from a kid that just picked up the book and jumped in with zero experince with CSS.