SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot mcahill's Avatar
    Join Date
    May 2002
    Location
    Manchaug, MA, USA
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Advice on moving a design to tableless CSS

    http://www.atexmedia.com/index.php

    The design is currently neither fish nor fowl. It's got tables with css and it validates. It's fixed width, because the CEO requires that it fit in a single 800x600 screen without scrolling. Does tableless design buy me anything here? What's the best way to proceed? I'd rather not have the site looking like a postage stamp at 1024x700. I also don't want the thing breaking every single time I updated it. I'm going to have to live with the site for years to come.
    mcahill
    Reel-Time.com - Saltwater Fly Fishing
    The Vario Blog
    VarioCreative.com 1 2 3 4 5 6 7

  2. #2
    Word Painter silver trophy Shyflower's Avatar
    Join Date
    Oct 2003
    Location
    Winona, MN USA
    Posts
    10,053
    Mentioned
    142 Post(s)
    Tagged
    2 Thread(s)
    The best advantage of css is that it makes your content much easier to read when you need to update your file. You get rid of all the table tags.

    Another advantage is that for those whose browsers don't support or do "break" tables, with css they will still get a readable page (even if their browser doesn't support css!). You can write your copy and then simply code it into your design.
    Linda Jenkinson
    "Say what you mean. Mean what you say. But don't say it mean." ~Unknown

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I also don't want the thing breaking every single time I updated it
    Well it's broken already because the search box isn't inside the container when you resize the screen smaller in ie

    I'm going to have to live with the site for years to come.
    Well use up to date technology then and not old fashioned table layouts of old. There's nothing wrong with tables when the layout must have them and there is no alternative but you should be looking to move to using only tables for tabular data.

    As time moves on css support is improving all the time and a lot of designs can be made table-free. Whether this will actually gain you any advantage over your fixed design depends on what you want to achieve.

    You could make one column fixed and one fluid to take up more screen space (but you could do that with tables also of course).

    If you want to add styleswitchers and change the position of elements or swap columns from left to right then you would struggle to do it within tables (although I suspect it could be done to a degree).

    If you want cleaner, lighter more accessible code then css is the way to go. In the end it's a choice you make after consideration, and one that you can live with. If tables float your boat then do it in tables and be happy with your decision Otherwise move to css.

  4. #4
    SitePoint Zealot mcahill's Avatar
    Join Date
    May 2002
    Location
    Manchaug, MA, USA
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Right...

    I'm definitely not married to tables. Been there, done that, got the tee shirt.

    It looks like I have more time on this project than I thought, so I am going to give it a shot. The thought of living with an 800x600 homepage for the next 3-4 years is more than I can bear. And I'm a little concerned that the current version has a css that's too complex and prone to errors in various browsers. Simplifying is the way to go.
    mcahill
    Reel-Time.com - Saltwater Fly Fishing
    The Vario Blog
    VarioCreative.com 1 2 3 4 5 6 7

  5. #5
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Simplifying is the way to go.
    Couldn't agree more Its always easy to fall into the trap of making things more complicated than they need to be. Usually a slight change of design can result in cleaner code and less hacks.

  7. #7
    SitePoint Zealot mcahill's Avatar
    Join Date
    May 2002
    Location
    Manchaug, MA, USA
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    A Quick Attempt

    It's rough, mostly down to troubleshooting minor postioning and adding in the three tickler sections (new, case studies and Information for). Basically it's working, although the initial design presents some problems for a truly fluid presentation, ie. it's got a row of images across the center of the page. Obviously we hit a width barrier at some point.

    Old Table Version: http://www.atexmedia.com/index.php

    New Tableless Version: http://www.atexmedia.com/index-new.php

    I'd like to thank you all for your comments - I'll have a lot more questions etc. as I move forward.

    Oh, btw, for a matter of record, this design was translated into tableless css in around 4-5 hours. It'd have been easier, but I screwed up and started with a three column layout instead of a 2.
    mcahill
    Reel-Time.com - Saltwater Fly Fishing
    The Vario Blog
    VarioCreative.com 1 2 3 4 5 6 7

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    That'spretty good going - You've made a good start

  9. #9
    Word Painter silver trophy Shyflower's Avatar
    Join Date
    Oct 2003
    Location
    Winona, MN USA
    Posts
    10,053
    Mentioned
    142 Post(s)
    Tagged
    2 Thread(s)
    Looking good! Not quite there... but then you should see my table-less design. I think css is an on-going learning experience. You seem to be a quick study!
    Linda Jenkinson
    "Say what you mean. Mean what you say. But don't say it mean." ~Unknown

  10. #10
    SitePoint Zealot mcahill's Avatar
    Join Date
    May 2002
    Location
    Manchaug, MA, USA
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thanks!

    With such great resources available, it's easy to make the transition. (Paul, you might find the basic stylesheet a little familiar...)
    mcahill
    Reel-Time.com - Saltwater Fly Fishing
    The Vario Blog
    VarioCreative.com 1 2 3 4 5 6 7


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •