WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: 3 column layout question

for

From: Rebecca Ballard
Date: Oct 29, 2006 2:20PM

Hi Jon,

That's really useful tip. Many thanks.


Rebecca

<EMAIL REMOVED>

Sign up for regular tips and tricks at www.withoutamouse.com/newsletter.
Check out my new blog at www.withoutamouse.com/blog
Thinking about Broadband? Check out www.withoutamouse.com/broadband.



-----Original Message-----
From: <EMAIL REMOVED>
[mailto: <EMAIL REMOVED> ] On Behalf Of Jon
Sent: 26 October 2006 22:28
To: WebAIM Discussion List
Subject: Re: [WebAIM] 3 column layout question

Hi Martin,

I'm not sure of the screen readers side of things but as far as putting the
content of the page higher in the code than the navigation you will want to
use absolute positioning.

I have just developed a site www.babysafetyshop.com using this method of
positioning. If the left nav has something like position:absolute; width:
200px; top: 85px; left 5px

then your right column has something like
position: absolute; width: 250px; top: 85px; right: 5px

and the centre body area has
position: absolute; top: 85px; left: 210px; right: 260px

you can then put the code for those blocks in any order in the HTML.
Have a look at the code and the CSS for this site and you can see the whole
thing in action.

I have not done much testing for accessibility as I am still new at this
area of things. Maybe someone else on the list can give some insight as to
whether this kind of coding causes problems for JAWS etc.

Hope that help.

Regards,
Jon

----------------------------------------
Mayhem Design
Web Development
http://www.mayhemdesign.com



Martin Pistorius wrote:

>Hi there,
>
>I need to create a 3 column liquid layout; which I've done by
>essentially having 3 divs one floated left, one floated right both of
>them with set widths and then one div in the centre, without a set width.
>The basic design works well across all browsers, and no hacks were needed.
>
>However what bothers me about it, is the HTML is structured in such a
>way that the left div which will contain the main navigation, and the
>right div which will contain links to documents or other less important
>information, appear before the middle div containing the sub navigation
>and the main content.
>
>My question is, for individuals who rely on screen readers is this a
>problem?
>There will be a skip to content link on the pages.
>
>If it is a problem, then I'd really appreciate suggestion on how to
>create a
>3 column liquid layout that will work on all browsers, without the need
>for hacks or Javascript?
>I've looked at a variety of ways to do at and this one seems a good way
>to do it.
>
>Below I've included a simple version of the markup and CSS that will be
>used.
>
>Thanks,
>
>Martin
>
><!-- Start of site wrapper -->
><div id="siteWrapper">
>
><!-- Start of header section -->
> <div id="topBar">
> <a href="#content">Skip to main content</a> /> </div>
>
> <div id="logo">
> <a href="index.htm"><img src="img/logo.gif" alt="logo" border="0"
> /></a> </div>
>
> <div id="breadcrumb">
> You are here: Home &gt; <a href="#">Bread crumb</a> </div>
><!-- End of header section -->
>
><div id="left">
>
><!-- Start of Main navigation -->
><div class="hiddenMsg">Start of main Navigation</div>
>
><ul id="mainNav">
> <li><a href="index.htm">Home</a></li>
> <li><a href="#">Link</a></li>
> <li><a href="#">Link</a></li>
></ul>
><!-- End of Main navigation -->
>
></div>
>
> <div id="right">
>
><h2>Right Box</h2>
><p>
>Right box
></p>
> </div>
>
><div id="middle">
>
><!-- Start of Sub navigation -->
><div id="SubNav"><a href="#">Sub nav 1</a> | <a href="#">Sub nav 2
></a>| <a href="#">Sub nav 3</a> | <a href="#">Sub nav 4</a> | <a
>href="#">Sub nav 5</a> |</div>
><!-- End of Sub navigation -->
>
><h1>Main content</h1>
>
><p>
>Main content div
></p>
>
></div>
>
>
><div id="footer">footer
></div>
>
>
></div>
><!-- End of Site wrapper -->
>
></body>
></html>
>
>----------------------------------------------
>
> #left {
> float:left;
> width:150px;
> margin:1px; padding:0;
> border:solid 1px blue;
> }
>
> #middle {
> margin:0 160px;
> border:solid 1px green;
> }
>
> #right {
> float:right;
> width:150px;
> margin:0; padding:0;
> border:solid 1px red;
> }
>
>
>
>
>
>

Address list
messages to <EMAIL REMOVED>