Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 4 1 2 3 ... LastLast
Results 1 to 10 of 32
  1. #1
    Senior Member jlgosse's Avatar
    Join Date
    Jan 2004
    Location
    Newfoundland, Canada
    Posts
    1,037
    Member #
    4570
    Liked
    7 times
    Can someone explain to me how CSS-Only layouts (Divs and stuff), are better and more efficent than table layouts?

    I'm looking at "professional" CSS code, the industry standard. All I see in their code is hacks, tricks and work-a-rounds. I was assuming the power behind CSS was the ability to make everything cross browser compatible, fairly easily. So, can someone explain to me why I should go from tables, to CSS, right now, when tables get me what I want, when I want it, and fast? Plus I don't have to work with 8000 hacks and tricks to get it to work properly in IE/ everything else.

    Also, what happened to the clean code idea? I see a bit cleaner HTML, but that's about it. The CSS for these layouts is horrendous to look through in most cases. What's up with that? Commenting isn't that powerful.

    It just totally stumps me. Like really. I'm sticking with table-based designs until all the browsers buck up and start "properly" supporting CSS, so I don't have to litter my code with crap that isn't necessary. There is absolutely no point in developing for only Firefox as a user-base, as the majority of the world runs IE5/6. Then again, I can't develop for IE because it wouldn't be industry standard code, and it will end up NOT working in the future (and probably the near future). So what the hell am I supposed to do?

    Any enlightenment would be greatly appreciated. Thanks.


  2.  

  3. #2
    Senior Member Brak's Avatar
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    3,413
    Member #
    1217
    Liked
    2 times
    If you code properly, no hacks are needed. I don't have any hacks on http://staging.neathdesign.com/oar or www.neathdesign.com

    To me, it's opened up a whole new way of designing layout, gives me more efficient code (file size and cleanlyness) and just overall opens up options when I don't have to think in squares anymore. I know personally my design site renders properly back to IE5 win, which is way later than my user-base.

    That's my .02
    Kyle Neath: Rockstar extraordinare
    The blog | The poetry site | The Spore site

  4. #3
    Senior Member jlgosse's Avatar
    Join Date
    Jan 2004
    Location
    Newfoundland, Canada
    Posts
    1,037
    Member #
    4570
    Liked
    7 times
    Well, looking at ALA and a plethora of other sites, you would see what I mean.

    Also, you DO have to think in squares. A DIV is a block, which is a square/ rectangle.


  5. #4
    Senior Member Brak's Avatar
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    3,413
    Member #
    1217
    Liked
    2 times
    Nope, don't think of it as a block, but rather a layer of transparent paper to put down that you can lay other things on top of. The idea being, if you take a picture of a square and a picture of a circle on overhead paper, and lay them on top of each other, there are no limits of where they can go. Beyond that, putting text down on those shapes is amazingly easy and changing small details (like where the square/circle are) are easy to do with no graphics editing whatsoever. Can't say the same for tables...


    Another reason is standards, which probably just has to do with my engineering nature. Do you have any clue how easy it would make my job if all measurements were in kg/m/s and their derivatives? Rediculously easy. Instead, industry standard requries I work in Horse Power, slugs, ft-lb, lbm, lbf, etc. Give me a pice of engineering paper and what do I do? I immediately mark it date/Project/Name/Page n/x I do this because it's industry standard... because that just how I work

    Take a look at the layouts at www.csszengarden.com to see some great examples of the power of CSS.
    Kyle Neath: Rockstar extraordinare
    The blog | The poetry site | The Spore site

  6. #5
    Senior Member james's Avatar
    Join Date
    May 2003
    Location
    Melbourne, AUSTRALIA
    Posts
    364
    Member #
    1352
    I still use tables a bit, but I always start with
    Code:
    <table cellpadding="0" cellspacing="0" border="0">
    and use CSS to apply all formatting, with few exceptions.

    Tables are still rectangular areas, and can take all the CSS properties that <div>'s can, it's just that they can do a few tricks that <div>'s can't (or at least I think they can't). Things like colspan and having one column fixed with and another filling the extra space.

    Most of the mess in CSS files is standard box model properties: margin, padding, width, height, border. Moving beyond that, there's some tricky positioning tricks outlined in glyakk's tutorial, as well as clipping, which is a bit esoteric.

    One of the hacks that annoys me is centering things with:
    Code:
    position: relative;
    left: 50%;
    margin: half-box-width;
    But it is consistent with how CSS (CSS2?) is designed.
    James H
    Home Page · Mars Page · www.fihsf1.net (formerly www·fihs·net)

  7. #6
    Senior Member Brak's Avatar
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    3,413
    Member #
    1217
    Liked
    2 times
    How is that a hack?

    It's a method for centering something. I prefer it to centering a whole table:
    Code:
    <table cellpadding="0" cellpsacing="0" border="0" width="100%">
      <tr>
        <td align="center">
          <table cellpadding="0" cellspacing="0" border="0" width="780">
            <tr>
              <td>
                Finallly some content!!
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
    Compare that to:
    Code:
    <div style="position:absolute;left:50%;margin-left:-380px;width:780px">
      Some content
    </div>
    Kyle Neath: Rockstar extraordinare
    The blog | The poetry site | The Spore site

  8. #7
    Senior Member
    Join Date
    Dec 2003
    Posts
    1,274
    Member #
    4362
    There is nothing you can't do with <div> that you can with table.
    Although, tables are recommended still for tabular data (), like displaying a lot of values from a database.

    The tricks for CSS layout are mainly:
    []A big div containing all the sub divs, with a id of #container.
    []Inside this div go all the other divs like the navigation, header, content, footer, etc.
    []To position them, you should use float:left/right, it simply aligns the div to the left or right inside it's parent block element, but, without overlapping.
    []One div for header, one for each navigation, one for the content, and another for the footer.
    []You apply widths and heights to a div just like a table cell, with CSS.
    []If you want a little square to appear just above where it was, you can use "position: relative; bottom:10px". It's cool effect that saves you images.

    This page is great to learn: http://glish.com/css/

  9. #8
    Senior Member Brak's Avatar
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    3,413
    Member #
    1217
    Liked
    2 times
    Do this with tables and I'll give you a cookie. Note: this is a special effect that only CSS2 compatable browsers (not IE) can do.
    Kyle Neath: Rockstar extraordinare
    The blog | The poetry site | The Spore site

  10. #9
    Senior Member jlgosse's Avatar
    Join Date
    Jan 2004
    Location
    Newfoundland, Canada
    Posts
    1,037
    Member #
    4570
    Liked
    7 times
    Brak, first of, why do this?
    Code:
    <table cellpadding="0" cellpsacing="0" border="0" width="100%">
      <tr>
        <td align="center">
          <table cellpadding="0" cellspacing="0" border="0" width="780">
            <tr>
              <td>
                Finallly some content!!
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
    When you can do this:
    Code:
    <table style="margin-left: auto; margin-right: auto;">
      <tr>
        <td>Content</td>
      </tr>
    </table>
    Then, in the body just have text-align: center;?

    Works.

    Also, what is the point of doing the above if IE doesn't support it? I'm not trying to annoy you or anything, hah.


  11. #10
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    This might help you with your very first post and questions... it's very well written i find: http://blog.vinniegarcia.com/oldstuff/000003.html
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us


Page 1 of 4 1 2 3 ... LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:58 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com