Forum Moderators: not2easy
Code follows...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
body {
color: #333333;
background-color: white;
margin: 0px;
padding: 0px;
font: 11px verdana, arial, helvetica, sans-serif;
}
#masthead {
position: absolute;
background: lightsalmon;
height: 40px;
width: 100%;
top: 0px;
left: 0px;
padding: 3px 0px 0px 10px;
z-index: 4;
}
p {
font: 11px/16px verdana, arial, helvetica, sans-serif;
margin: 0px 0px 10px 0px;
padding: 0px;
}
#leftbar {
position: absolute;
width: 150px;
top: 40px;
left: 0px;
background-color: #eeeeee;
padding: 10px;
z-index: 2;
voice-family: "\"}\"";
voice-family: inherit;
width: 128px;
}
body>#leftbar {width:128px;}
#rightbar {
position: absolute;
width: 250px;
top: 40px;
right: 0px;
background-color: lightsteelblue;
padding: 10px;
z-index: 1;
voice-family: "\"}\"";
voice-family: inherit;
width: 228px;
}
body>#rightbar {width:228px;}
.content {
position: relative;
width: auto;
min-width: 120px;
margin: 0px 250px 0px 150px;
top: 40px;
background-color: yellow;
padding: 8px 15px 15px 15px;
z-index: 99;
}
</style>
</head>
<body>
<div class="content">
<p>This is the main area for content on the page. This is the main area for content on the page. This is the main area for content on the page. This is the main area for content on the page. This is the main area for content on the page. This is the main area for content on the page. This is the main area for content on the page. This is the main area for content on the page. This is the main area for content on the page. This is the main area for content on the page.</p>
</div>
<div id="leftbar">
<p>This is the content that sits in the left bar on the left of the page.</p>
</div>
<div id="rightbar">
<p>This is the content that sits in the right bar on the right of the page.</p>
</div>
<div id="masthead">
<p>Masthead</p>
</div>
</body>
</html>
[webmasterworld.com...]
ie. Total Height = defined height (40) + padding (3) + borders (0) + margins (0) = 43
But I'm still having trouble with lining up the sides of the centre content with the left and right columns. The left column has a width of 150px and padding of 10px. Given what you've said shouldn't my center content need to start at 170px from the left? It seems that I have to start it at 148px for it to line up.
If that's the case, then I don't think I'll bother with CSS layouts - seems like too much of a headache compared to tables!
"inner height" = defined height (40) - margins (0) - borders (0) - padding (3) = 37
There's a work-around here [tantek.com] and maybe some other options if you look around.
Heres my version of your code:
[pre]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<style type="text/css">
body {
margin: 0;
padding: 0;
font: 11px/16px verdana, arial, helvetica, sans-serif;
}
#masthead {
position: absolute;
top: 0px;
left: 0px;
background: lightsalmon;
height: 40px;
width: 100%;
padding: 3px 0px 0px 10px;
}
p {
margin: 0px 0px 10px 0px;
padding: 0px;
}
#leftbar {
position: absolute;
top: 43px;
left: 0px;
width: 150px;
background-color: #eeeeee;
padding: 10px;
}
#rightbar {
position: absolute;
top: 43px;
right: 0px;
width: 250px;
background-color: lightsteelblue;
padding: 10px;
}
.content {
position: relative;
top: 43px;
width: auto;
min-width: 120px;
margin: 0px 270px 0px 170px;
background-color: yellow;
padding: 8px 15px 15px 15px;
}
</style>
</head>
<body>
<div class="content">
<p>This is the main area for content on the page. This is the main area for content on the page.
This is the main area for content on the page. This is the main area for content on the page.
This is the main area for content on the page. This is the main area for content on the page.
This is the main area for content on the page. This is the main area for content on the page.
This is the main area for content on the page. This is the main area for content on the page.
This is the main area for content on the page. This is the main area for content on the page.
</p>
</div>
<div id="leftbar">
<p>This is the content that sits in the left bar on the left of the page.</p>
</div>
<div id="rightbar">
<p>This is the content that sits in the right bar on the right of the page.</p>
</div>
<div id="masthead">
<p>Masthead</p>
</div>
</body>
</html>
[/pre]
A word of warning about absolute layouts
I guess you are probably constructing the page like this for SEO reasons (i.e. putting the content first) but be warned there are some pitfalls to absolute layouts like this. Namely:
You could instead construct the page so that the html appears as masthead,left,right,content and then just float the left column to the left and right to the right. No absolute positioning required.
GrahamS
You're right I am constructing the page like this with a view to better SEO. But I am also doing it this way for precisely the reason you state as a drawback - I had thought those with screenreaders etc would want to hear the content first and not bother with all the surrounding headers, menus, etc.
I'll have a play around with your float idea and see how that goes. But right now, I'm fast becoming disillusioned with the benefits of using CSS as an alternative to tables!
> I am constructing the page like this with a view to better SEO
In terms of SEO then CSS is definitely the way forward. You'll end up with a much higher Text-to-HTML ratio, your page will (hopefully) be marked up correctly (without tables and styling to obscure its meaning) and it should be a fair bit smaller as well.
All this leads to better indexing.
As for accessibility, well those with screenreaders are never going to thankyou for using tables-for-layout. Personally I order my HTML in the 'natural' order but I always supply 'hidden' links for screenreaders that can be used to skip over menus. This is in keeping with the Bobby standards.
If its not working properly in IE5.5 then feel free to add some hacks back in. I really just took them out for clarity.
(If its purely for IE then consider using IE conditional comments instead of the messy CSS syntax hacks).
I agree, they do prefer to hear the content first. And like GrahamS said, a hidden link for them to skip to the navigation will make them love you!
This is an example. Doesn't work in my opera (7.23) But seems to work fine in most screen readers.
a#skip{
height: 0;
width: 0;
overflow: hidden;
position: absolute;
top: 5px;
left: 10px;
}
a#skip:active, a#skip:focus{
overflow: visible;
position: absolute;
width: auto;
height: auto;
}
Comments or better ways are very welcome!
By the way, i thought is was getting of easy by just using display:none; but apparantly some screen readers (Jaws) apply some of the CSS...
<a class="accesslink" href="#content"><img src="/images/transparent.gif" width="1" height="1" alt="Jump to start of content"></a>where the accesslink class is defined as..
a.accesslink img {
height:1px;
width:1px;
position:absolute;
border:none;
}
Works in all browsers and doesn't upset the layout at all.
I know there is nothing wrong and where possible I go for it. Just a quick way of seeing if that was the problem.
you know do the old
<!-- doc type -->
I guess I'll persevere with CSS layouts for a little while longer!
Excellent! so simple i didn't even think of it. I'll let some people test it, but i'm quite sure it'll do great for them.
