Wrox Programmer Forums
|
CSS Cascading Style Sheets All issues relating to Cascading Style Sheets (CSS).
Welcome to the p2p.wrox.com Forums.

You are currently viewing the CSS Cascading Style Sheets section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old December 15th, 2005, 10:44 PM
Authorized User
 
Join Date: Dec 2005
Posts: 21
Thanks: 0
Thanked 1 Time in 1 Post
Default Page Layout without tables

According to "Accessible XHTML and CSS Web Sites", In the CSS section it says one may use tables for displaying tabular data but not for controlling page layout. Later in the accessibity section it says that pages should be designed so that even if the style sheet is not available, the page should be presented in a logical order.

If one doesn't use tables for layout, as far as I know, one needs to make extensive use of the position property. However, do that and the page looks pretty horrid without the style sheet. If one instead uses tables to control layout, the page still looks pretty readable when the style sheet is removed.

So how does one achieve both of these goals at the same time?

 
Old December 15th, 2005, 10:55 PM
Friend of Wrox
 
Join Date: Jun 2003
Posts: 425
Thanks: 0
Thanked 3 Times in 3 Posts
Default

It doesn't have to look pretty but it should be structured.

If you use only DIVs and SPANs instead of more appropriate elements, then the page will really be messy without CSS. Was that what you were referring to?



--
http://yupapa.com
 
Old December 16th, 2005, 08:32 AM
Authorized User
 
Join Date: Dec 2005
Posts: 21
Thanks: 0
Thanked 1 Time in 1 Post
Default

Yes, that is what I'm referring to. I've got a small page with a couple columns of rectangles representing the layout of a work area with who is working where. I'm using a bunch of position: absolute; DIVs to position these rectangles. It looks great with the linked style sheet but it doesn't follow the rule of being readable or layed out logically if you remove the style sheet.

By your response it sounds like there's a more appropriate way to do this using something other than DIVs and SPANs. What would that be? And maybe using a TABLE would be OK here, although it isn't really what I would call traditional tabular data.

 
Old December 16th, 2005, 10:27 AM
Friend of Wrox
 
Join Date: Jun 2003
Posts: 425
Thanks: 0
Thanked 3 Times in 3 Posts
Default

Yeah. Use DIVs mainly to build "sections" that CSS can use to layout the page. Like #header, #footer, #nav... or whatever you prefer to call them. Use SPANs as a little as possible.

Use proper structural elements wherever you can. H1,H2,H3,P, BLOCKQUOTE, UL and so on. It won't be pretty without CSS but it will be very easy to read.

Here's a favorite of mine from a few years back. The colors are so tasteful. I could never do something like that myself. I think Disney formed my color sense. Disable style sheets and see what I mean.
http://www.cinnamon.nl/

--
http://yupapa.com
 
Old December 16th, 2005, 10:30 AM
Friend of Wrox
 
Join Date: Jun 2003
Posts: 425
Thanks: 0
Thanked 3 Times in 3 Posts
Default

Ooops! Maybe I misunderstood you an that's what you are doing?

--
http://yupapa.com





Similar Threads
Thread Thread Starter Forum Replies Last Post
Opening page layout... photon BOOK: ASP.NET 2.0 Website Programming Problem Design Solution ISBN: 978-0-7645-8464-0 1 October 7th, 2008 04:22 PM
page layout breaks in IE 6 & 7 Cyber Shiva CSS Cascading Style Sheets 0 July 5th, 2008 09:19 AM
when page refreshed layout breaks in IE7 socoolbrewster CSS Cascading Style Sheets 1 May 17th, 2008 11:05 PM
IE layout issues with tables and border. dekemcaffee Javascript 1 October 9th, 2007 04:57 PM
Page Layout Problem Spades Dreamweaver (all versions) 1 December 2nd, 2004 04:55 PM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.