SitePoint Sponsor |
|
User Tag List
Results 1 to 10 of 10
-
May 11, 2005, 07:22 #1
- 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.
-
May 11, 2005, 08:14 #2
- 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
-
May 11, 2005, 08:18 #3
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
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.
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 decisionOtherwise move to css.
-
May 11, 2005, 08:30 #4
- 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.
-
May 11, 2005, 11:38 #5
- Join Date
- Mar 2005
- Location
- USA
- Posts
- 5,482
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Many people use CSS filters (aka CSS hacks) to fix bugs in certain browsers.
Writing Efficient CSS will help keep your CSS files smaller.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.
-
May 11, 2005, 11:53 #6
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Simplifying is the way to go.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.
-
May 11, 2005, 13:43 #7
- 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.
-
May 11, 2005, 14:27 #8
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
That'spretty good going - You've made a good start
-
May 11, 2005, 14:32 #9
- 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
-
May 12, 2005, 08:25 #10
- 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...)
Bookmarks