469,909 Members | 1,763 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,909 developers. It's quick & easy.

help making an accessible layout

Thanks in advance to anyone who can help.

I'm working on a somewhat simple layout and I want to make sure it's as accessible as possible to people with disabilities (screen readers, etc.) I'm using positioning to layout all the elements and I'm running into the following problems:

1. I can't get the left and right columns to align at the top of their container div
2. In Safari, the footer div disappears
3. In IE it's just a total mess

I'm pretty CSS savvy, but I'm stumped!!!

HTML is at:
http://granthansen.com/test/positioning2.html

CSS is at:
http://granthansen.com/test/styles2.css

Outline of what I want it to look like is:
http://granthansen.com/test/homepage.gif


THANKS!!!!!!!
Jul 12 '07 #1
34 1638
Just as a follow-up, the footer didn't disappear in Safari until I put in all the 100% heights.
Jul 12 '07 #2
drhowarddrfine
7,435 Expert 4TB
The middle column is the first element encountered in the html and it is floated left, but it has a margin of left 200px. So that blocks the content from going all the way to the left. So the "left column" can only float as far as the right edge of the middle column.

Just move the left column in front of the middle column in the html and get rid of the margin in the middle column. Then you can adjust the left columns left margin if necessary.

More in a bit.
Jul 12 '07 #3
Thanks for the reply ... however, I positioned the middle content first in the code so that it displays the most relevant copy. first The left column will be a ton of text links, so a screen reader will have to get through all that before it gets to anything worthwhile to read....

I understand what you mean about the float left in the middle blocking the content ... thanks. I'll continue to work :-)
Jul 12 '07 #4
drhowarddrfine
7,435 Expert 4TB
After I posted that, I remembered what you said about the screen reader. What about this? Just a change in the CSS:
Expand|Select|Wrap|Line Numbers
  1. /* CSS Document */
  2.  
  3.  
  4.  
  5. html, body {
  6.  
  7.         margin: auto;
  8.  
  9.         height: 100%;
  10.  
  11.         }
  12.  
  13.  
  14.  
  15. #container { 
  16.  
  17.     position: relative;
  18.  
  19.     top: 55px;
  20.  
  21.     width: 920px; 
  22.  
  23.     margin: auto; 
  24.  
  25.     background: #CCFFFF; 
  26.  
  27.     height: 100%;
  28.  
  29.     }
  30.  
  31.  
  32.  
  33.     #container #leftcol { 
  34.  
  35. position:absolute;
  36.  
  37.         width: 200px; 
  38.  
  39.         top:0;
  40.  
  41.         margin: 0; 
  42.  
  43.         background: #CC0000;
  44.  
  45.         height: 100%;
  46.  
  47.         }
  48.  
  49.  
  50.  
  51.     #container #midcol { 
  52.  
  53.         margin-left: 200px; 
  54.  
  55.         width: 585px; 
  56.  
  57.         background: #0099FF;
  58.  
  59.         height: 100%;
  60.  
  61.         }
  62.  
  63.  
  64.  
  65.     #container #rightcol { 
  66.  
  67. position:absolute;
  68.  
  69. top:0;right:0;
  70.  
  71.         width: 135px; 
  72.  
  73.         background: #99FF99;
  74.  
  75.         height: 100%;
  76.  
  77.         }
  78.  
  79.  
  80.  
  81.     #container #footer { 
  82.  
  83.         width: 920px; 
  84.  
  85.         background: #CCCCCC;
  86.  
  87.         clear: both;
  88.  
  89.         }
  90.  
  91.  
  92.  
  93. #header { 
  94.  
  95.     position: absolute; 
  96.  
  97.     top: 0; 
  98.  
  99.     width: 100%; 
  100.  
  101.     height: 50px; 
  102.  
  103.     background: #FFCC66;
  104.  
  105.     margin-left: auto;
  106.  
  107.     margin-right: auto;
  108.  
  109.     }
  110.  
  111.  
  112.  
  113. #header #croheader { 
  114.  
  115.     width: 920px; 
  116.  
  117.     height: 50px; 
  118.  
  119.     background: #CCC;
  120.  
  121.     margin: auto;
  122.  
  123.     }
Jul 12 '07 #5
You, sir, are a genius!! I know I tried absolute positioning before but it wasn't panning out. Your solution is much simpler I think than what I tried, and obviously more effective.

Only problem I see now is that the footer is still invisible in Safari.

You rock!
Jul 12 '07 #6
drhowarddrfine
7,435 Expert 4TB
That's a combination of the footer container being positioned absolutely and the container div being set 55px down from the top. Absolutely positioning anything removes it from the normal flow so that footer container rises up to the next positioned element, which is #container plus 55px. Safari is performing correctly. IE is not, as usual.
Jul 12 '07 #7
Thanks again ... I'm going to see about fixing this one myself ;-)
Jul 12 '07 #8
OK, so sadly, I need more guidance. I played around with no solutions. You mention my footer being positioned absolute, but it's not ... in fact, I have it within the container div so that it would be part of the overall height. I also tried putting the footer outside the container div, with a margin auto so that it centered, and the same problem exists.

I see what you're saying ... because the container div is positioned top 55px (relative) that it's pushing everything down 55px ... but I can't seem to fix :-(

Thanks.
Jul 16 '07 #9
drhowarddrfine
7,435 Expert 4TB
This is one way to do it but the footer is a problem. I'm not sure if abs positioning the columns is a good idea or not, though. Floats would work. Haven't had much time to look at it.
Expand|Select|Wrap|Line Numbers
  1. /* CSS Document */
  2.  
  3.  
  4.  
  5. html, body {
  6.  
  7.         margin: auto;
  8.  
  9.         height: 100%;
  10.  
  11.         }
  12.  
  13. body{
  14.  
  15.     position:relative;
  16.  
  17.     }
  18.  
  19.  
  20.  
  21. #container { 
  22.  
  23.     position: relative;
  24.  
  25.     top:50px;
  26.  
  27.     width: 920px; 
  28.  
  29.     margin: 0 auto; 
  30.  
  31.     background: #CCFFFF; 
  32.  
  33.     height: 100%;
  34.  
  35.     }
  36.  
  37.  
  38.  
  39.     #container #leftcol { 
  40.  
  41.         position:absolute;
  42.  
  43.         width: 200px; 
  44.  
  45.         top:0;
  46.  
  47.         background: #CC0000;
  48.  
  49.         height:100%;
  50.  
  51.         }
  52.  
  53.  
  54.  
  55.     #container #midcol { 
  56.  
  57.         position:absolute;
  58.  
  59.         left: 200px; 
  60.  
  61.         width: 585px; 
  62.  
  63.         background: #0099FF;
  64.  
  65.         height: 100%;
  66.  
  67.         }
  68.  
  69.  
  70.  
  71.     #container #rightcol { 
  72.  
  73.         position:absolute;
  74.  
  75.         top:0;
  76.  
  77.         right:0;
  78.  
  79.         width: 135px; 
  80.  
  81.         background: #99FF99;
  82.  
  83.         height: 100%;
  84.  
  85.         }
  86.  
  87.  
  88.  
  89.     #container #footer {
  90.  
  91.         width: 920px; 
  92.  
  93.         background: #CCCCCC;
  94.  
  95.         }
  96.  
  97.  
  98.  
  99. #header { 
  100.  
  101.     position:absolute;
  102.  
  103.     top:0;
  104.  
  105.     width: 100%; 
  106.  
  107.     height: 50px; 
  108.  
  109.     background: #FFCC66;
  110.  
  111.     }
  112.  
  113.  
  114.  
  115. #header #croheader { 
  116.  
  117.     width: 920px; 
  118.  
  119.     height: 50px; 
  120.  
  121.     background: #CCC;
  122.  
  123.     margin: 0 auto;
  124.  
  125.     }
Jul 16 '07 #10
drhowarddrfine
7,435 Expert 4TB
On third thought, this works. But move the footer div out of the content div.
Expand|Select|Wrap|Line Numbers
  1. /* CSS Document */
  2.  
  3.  
  4.  
  5. html, body {
  6.  
  7.         margin: auto;
  8.  
  9.         height: 100%;
  10.  
  11.         }
  12.  
  13. body{
  14.  
  15.     position:relative;
  16.  
  17.     }
  18.  
  19.  
  20.  
  21. #container { 
  22.  
  23.     position: relative;
  24.  
  25.     top:50px;
  26.  
  27.     width: 920px; 
  28.  
  29.     margin: 0 auto; 
  30.  
  31.     background: #CCFFFF; 
  32.  
  33.     height: 100%;
  34.  
  35.     }
  36.  
  37.  
  38.  
  39.     #container #leftcol { 
  40.  
  41.         float:left;
  42.  
  43.         width: 200px; 
  44.  
  45.         background: #CC0000;
  46.  
  47.         height:100%;
  48.  
  49.         }
  50.  
  51.  
  52.  
  53.     #container #midcol { 
  54.  
  55.         position:absolute;
  56.  
  57.         left:200px;
  58.  
  59.         width: 585px; 
  60.  
  61.         background: #0099FF;
  62.  
  63.         height: 100%;
  64.  
  65.         }
  66.  
  67.  
  68.  
  69.     #container #rightcol { 
  70.  
  71.         float:right;
  72.  
  73.         width: 135px; 
  74.  
  75.         background: #99FF99;
  76.  
  77.         height: 100%;
  78.  
  79.         }
  80.  
  81.  
  82.  
  83.     #container #footer {
  84.  
  85.     float:left;
  86.  
  87.         width: 920px; 
  88.  
  89.         background: #CCCCCC;
  90.  
  91.         }
  92.  
  93.  
  94.  
  95. #header { 
  96.  
  97.     position:absolute;
  98.  
  99.     top:0;
  100.  
  101.     width: 100%; 
  102.  
  103.     height: 50px; 
  104.  
  105.     background: #FFCC66;
  106.  
  107.     }
  108.  
  109.  
  110.  
  111. #header #croheader { 
  112.  
  113.     width: 920px; 
  114.  
  115.     height: 50px; 
  116.  
  117.     background: #CCC;
  118.  
  119.     margin: 0 auto;
  120.  
  121.     }
Jul 16 '07 #11
Thanks ... seems to have the same results though. I'll keep playing around!!
Jul 16 '07 #12
drhowarddrfine
7,435 Expert 4TB
Are you sure? I changed it again on the second post.
Jul 16 '07 #13
I'll compare and try again to see if I missed something. During the past couple hours I've tried variations of margin/padding tops and bottoms for all classes and IDs ... not working. Hopefully I've missed something in your code :-)
Jul 16 '07 #14
drhowarddrfine
7,435 Expert 4TB
Make sure you took the footer out of that div and placed it by itself.
Jul 16 '07 #15
That's exactly what I forgot to do; however, it didn't solve the problem. The footer was aligned left and behind the container div ... even centering it and giving it a zindex to bring it forward ... the container div extended below it. (and z-index didn't bring it forward)

Here's my most updated code:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="styles3.css" rel="stylesheet" type="text/css" />
</head>

<body>



<div id="container">

<div id="midcol">first in html first in html first in html first in html first in html first in html first in html first in html first in html first in html </div>

<div id="leftcol">second in html second in html second in html second in html second in html second in html second in html second in html second in html second in html </div>

<div id="rightcol">third in html third in html third in html third in html third in html third in html third in html third in html third in html third in html third in html </div>

</div>

<div id="footer">fourth in html</div>

<div id="header">
<div id="croheader">fifth in html</div>
</div>

</body>
</html>



CSS

/* CSS Document */

html, body {
margin: auto;
height: 100%;
}

body {
position: relative;
}

#container {
position: relative;
top: 50px;
width: 920px;
margin: 0 auto;
background: #CCFFFF;
height: 100%;
}

#container #leftcol {
float: left;
width: 200px;
top: 0;
background: #CC0000;
height: 100%;
}

#container #midcol {
position: absolute;
left: 200px;
width: 585px;
background: #0099FF;
height: 100%;
}

#container #rightcol {
float: right;
width: 135px;
background: #99FF99;
height: 100%;
}

#footer {
width: 920px;
background: #CCCCCC;
margin: auto;
z-index: 1;
}

#header {
position: absolute;
top: 0;
width: 100%;
height: 50px;
background: #FFCC66;
}

#header #croheader {
width: 920px;
height: 50px;
background: #CCC;
margin: 0 auto;
}
Jul 16 '07 #16
drhowarddrfine
7,435 Expert 4TB
Sorry, my mistake. Leave the footer inside that div. It should work.
Jul 16 '07 #17
Nope :-( Footer is now hidden:

http://granthansen.com/test/positioning2.html
Jul 16 '07 #18
drhowarddrfine
7,435 Expert 4TB
Obviously, I'm mis-copying something somewhere so here is the markup right off the screen:
[html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title>

<link href="./positioning2_files/styles2.css" rel="stylesheet" type="text/css" /></head><body>



<div id="container">

<div id="midcol">first in html first in html
first in html first in html first in html first in html first in html
first in html first in html first in html </div>

<div id="leftcol">second
in html second in html second in html second in html second in html
second in html second in html second in html second in html second in
html </div>

<div id="rightcol">third in html third in html third in
html third in html third in html third in html third in html third in
html third in html third in html third in html </div>

<div id="footer">fourth in html</div>

</div>

<div id="header">
<div id="croheader">fifth in html</div>
</div>

</body></html>[/html]
Expand|Select|Wrap|Line Numbers
  1. html, body {
  2.  
  3.  
  4.  
  5.         margin: auto;
  6.  
  7.  
  8.  
  9.         height: 100%;
  10.  
  11.  
  12.  
  13.         }
  14.  
  15.  
  16.  
  17. body{
  18.  
  19.  
  20.  
  21.     position:relative;
  22.  
  23.  
  24.  
  25.     }
  26.  
  27.  
  28.  
  29.  
  30.  
  31.  
  32.  
  33. #container { 
  34.  
  35.  
  36.  
  37.     position: relative;
  38.  
  39.  
  40.  
  41.     top:50px;
  42.  
  43.  
  44.  
  45.     width: 920px; 
  46.  
  47.  
  48.  
  49.     margin: 0 auto; 
  50.  
  51.  
  52.  
  53.     background: #CCFFFF; 
  54.  
  55.  
  56.  
  57.     height: 100%;
  58.  
  59.  
  60.  
  61.     }
  62.  
  63.  
  64.  
  65.  
  66.  
  67.  
  68.  
  69.     #container #leftcol { 
  70.  
  71.  
  72.  
  73.         float:left;
  74.  
  75.  
  76.  
  77.         width: 200px; 
  78.  
  79.  
  80.  
  81.         background: #CC0000;
  82.  
  83.  
  84.  
  85.         height:100%;
  86.  
  87.  
  88.  
  89.         }
  90.  
  91.  
  92.  
  93.  
  94.  
  95.  
  96.  
  97.     #container #midcol { 
  98.  
  99.  
  100.  
  101.         position:absolute;
  102.  
  103.  
  104.  
  105.         left:200px;
  106.  
  107.  
  108.  
  109.         width: 585px; 
  110.  
  111.  
  112.  
  113.         background: #0099FF;
  114.  
  115.  
  116.  
  117.         height: 100%;
  118.  
  119.  
  120.  
  121.         }
  122.  
  123.  
  124.  
  125.  
  126.  
  127.  
  128.  
  129.     #container #rightcol { 
  130.  
  131.  
  132.  
  133.         float:right;
  134.  
  135.  
  136.  
  137.         width: 135px; 
  138.  
  139.  
  140.  
  141.         background: #99FF99;
  142.  
  143.  
  144.  
  145.         height: 100%;
  146.  
  147.  
  148.  
  149.         }
  150.  
  151.  
  152.  
  153.  
  154.  
  155.  
  156.  
  157.     #container #footer {
  158.  
  159.  
  160.  
  161.     float:left;
  162.  
  163.  
  164.  
  165.         width: 920px; 
  166.  
  167.  
  168.  
  169.         background: #CCCCCC;
  170.  
  171.  
  172.  
  173.         }
  174.  
  175.  
  176.  
  177.  
  178.  
  179.  
  180.  
  181. #header { 
  182.  
  183.  
  184.  
  185.     position:absolute;
  186.  
  187.  
  188.  
  189.     top:0;
  190.  
  191.  
  192.  
  193.     width: 100%; 
  194.  
  195.  
  196.  
  197.     height: 50px; 
  198.  
  199.  
  200.  
  201.     background: #FFCC66;
  202.  
  203.  
  204.  
  205.     }
  206.  
  207.  
  208.  
  209.  
  210.  
  211.  
  212.  
  213. #header #croheader { 
  214.  
  215.  
  216.  
  217.     width: 920px; 
  218.  
  219.  
  220.  
  221.     height: 50px; 
  222.  
  223.  
  224.  
  225.     background: #CCC;
  226.  
  227.  
  228.  
  229.     margin: 0 auto;
  230.  
  231.  
  232.  
  233.     }
Jul 16 '07 #19
I appreciate your patience and willingness to help. I can't thank you enough. I created new files using the HTML and CSS code you posted and I'm still having the same issue. Do you see it working properly here?

http://granthansen.com/test/positioning.html

I deleted the old files to avoid any cache issues. All looks just about perfect except for the footer being below the browser screen.
Jul 16 '07 #20
drhowarddrfine
7,435 Expert 4TB
except for the footer being below the browser screen.
And there is the issue. I didn't know you wanted the footer to be above "the fold". This can be done but I need to look up my notes cause I never remember how to do it exactly.
Jul 16 '07 #21
Ah yes ... it's what I've spent hours today trying to figure out, lol. You know, I think it'll be very rare that a page won't be longer than the fold ... but never say never! If it's not a hassle to dig up the notes, I'd be interested to know the solution ... I think this layout worthy of submitting to the community since it really does offer an accessible three-column with header and footer layout, which is pretty common.
Jul 16 '07 #22
Ug, you know what? The footer is completely missing in Safari. Darn!
Jul 16 '07 #23
drhowarddrfine
7,435 Expert 4TB
Sticking the footer to the bottom isn't hard, I do it all the time, just can never remember one little detail. There are lots of 3-column layouts on the web.
Jul 16 '07 #24
OK ... in my search I couldn't find any examples that positioned the HTML like I did.
Jul 16 '07 #25
Just an update ... been playing around with min-heights, margins, etc. Nothing seems to work. It seems that the container div's top position of 50px (even when changed to margin or even padding) pushes everything down.

I found some articles on positioning footers, but the top position I have makes their solutions not work.
Jul 17 '07 #26
Oh so close:

http://granthansen.com/test/positioning.html

The footer travels vertically with the height of the container ... but ... once I start populating it with content, all goes wild with scroll bars. And I can't get all three columns to be 100% of the container.
Jul 17 '07 #27
drhowarddrfine
7,435 Expert 4TB
Sorry, I've been getting overloaded today. Too much goofing off yesterday.
Here is an old page with a fixed footer that I was looking for. If you study it, you might be able to figure out how to make it work in your page.
[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">

* {margin:0;padding:0}
html,body{height:100%}
html{width:100%;}
body{width:auto;background-color:#dfd}

#outer{min-height:100%;
margin-bottom:-1.5em;
height:auto;}

* html #outer{height:100%}

#footer{width:100%;clear:both;height:1.5em;backgro und-color:#efe;}

#logo_header{background-image:url("subway_logo.gif");background-repeat: no-repeat;
background-color:green; height:55px;padding-top:0px}

#top_nav {position:relative;height:1.5em;min-width:771px;background-color:gray;color:yellow;line-height:1.5em}
#top_nav p{float:left;padding-left:1.5em;}
#top_nav ul{float:right;list-style-type:none;}
#top_nav li{float:left;padding:0 1.5em}

#page_content{background-color:#dfd;}
#page_content ul{float:right;list-style-type:none;}

.img_holder{float:left;background-color:#00e;height:300px;width:350px;margin-top:10%}

</style>
</head>
<body>

<div id="outer">
<div id="logo_header"></div>

<div id="top_nav">
<p>in St. Louis, Missouri</p>

<ul>
<li><a href="specialaccounts">Corporations/Schools</a></li>
<li><a href="personalaccounts">Your Account</a></li>
</ul>

</div>

<div id="page_content">
<div class="img_holder">&nbsp;</div>
<ul>
<li><a href="ordering.html">Order Online</a></li>
<li><a href="menus.html">See The Menu</a></li>
<li><a href="maps.html">See A Map</a></li>
<li><a href="contacts.html">Contact Us</a></li>
</ul>
</div>
</div>

<div id="footer">
1 Main Road - St. Louis, Missouri - 314-621-0000
</div>

</body>
</html>[/HTML]
Some related links.
Jul 17 '07 #28
thanks! I'll give it a whirl.
Jul 17 '07 #29
Well, I think I need to step away from this a little while and get some lunch ... I've tried just about every variation and that top position for the container continues to wreak havoc for me ... fun stuff!
Jul 17 '07 #30
drhowarddrfine
7,435 Expert 4TB
I may be leaving to go out of town for the week. Not sure yet.
Jul 17 '07 #31
Oh no, Obi Wan, you're our only hope!!
Jul 17 '07 #32
Closer than ever!
http://granthansen.com/test/positioning.html

Instead of having the entire container div positioned 50px from top, I have a div inside each column with a top margin of 50px. Kind of a work-around for my problem.

Looks great in Firefox and Safari ... with IE the right column isn't being cleared by the footer ... I have to fix that.
Jul 17 '07 #33
Moved footer outside container ... looking good ... now just gotta see if I can get all three columns to be 100% within the container!
Jul 17 '07 #34
Just another update ... still working on getting all three columns 100% high ... had some success with making one dependent on another, but not all three are gelling. I'll keep at it.
Jul 18 '07 #35

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

1 post views Thread by mydemand | last post: by
21 posts views Thread by BT | last post: by
53 posts views Thread by Paul Watt | last post: by
3 posts views Thread by nehamaru | last post: by
1 post views Thread by Waqarahmed | last post: by
reply views Thread by Salome Sato | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.