Forum Moderators: not2easy
I built an app that used an old framed layout. Frames will no longer work for what I need to do for this project, so I'm getting rid of them. I still need the frame functionality of a position:fixed layer, but it has to work in IE5.x/6. In fact it only has to work in IE. The layout is very simple:
----------------
¦ (H)eader
----------------
¦
¦ (C)ontent
¦
----------------
¦ (F)ooter
----------------
All layers are autosized to 100% width. (H) is liquid, and (C) needs to adjust its position dynamically according to where (H) ends. (H) and (F) are both fixed, and tacked to the top and bottom of the browser, allowing (C) to scroll under when necessary (like a frame).
There are other features I'm looking for, but that's the basics. I have found a number of excellent demonstrations showing layers resizing relative to each other as the content and the window changes. I also found the thread on this forum (Fixed Side Menus with CSS [webmasterworld.com]) which demonstrated an excellent hack to produce a position:fixed functionality in IE. My problem now is trying to tie those two concepts together. At this point I'm not even sure if what I'm looking to do is possible - can I have a layer that is fixed, yet overflows correctly when the content demands; and have another layer that adjusts its position dynamically, relative to the overflow of the first, and scrolls underneath it using the browser scroll bar?
If anyone can answer that question, and/or point me to a tutorial demonstration that shows this in action, I would be greatly appreciative.
The second question I have is, assuming everything above is possible, and I get it working, will the content in the divs be able to access a single form reference inside the <body> tags? In other words, will this work?:
<body>
<form>
<div id="top-section">
<input type="text">
</div>
<div id="mid-section">
<input type="text">
</div>
<div id="bottom-section">
<input type="submit">
</div>
</form>
</body>
Thanks for reading this, I know it's a lot ask for a first-time poster. Thanks for anyone's help, who can!
There are a couple of different ways of approaching this, although anchoring the Footer layer to the bottom of the screen is going to be the most problematic.
I would advise using %'s for your layers. Header height could be 10%, therefore Content has a top of 10% and a height of 80%, meaning the Footer has a top of 90% and a height of 10%. Then, applying overflow:scroll to Content, means that any extra content will scroll in the layer (warning: NN4.x doesn't support this).
There are other methods, which I'm sure other members will point out, this is just one!
I tried out your suggestions, and you are right, it was very easy to get something that worked the way I wanted it to using a proportional layout. Now the content layer works pretty much as I'd want it to, but I'm still having an issue with the header and footer layers.
I need the header and footer layers to snap to the minimum height of their content (with the content layer snug up against them), which is something I can't seem to get them to do when the height is set to 10%. I've played with overflow, but I can't make anything work. Do you have a suggestion?
If you know how tall your header and footer need to be, fix their height in EMs and position them absolutely. Then add a top and bottom margin (not padding, margin) to the body div in between, and still use overflow on the body div to get it to scroll. If you make those margins the same height as your header and footer, then you can have the header and footer in the body's margin, and everything should look right. I think.
Unfortunately, I don't know how tall the header and footer are going to be. They will usually have three rows of data, but sometimes 4. All text is sized using ems so I'm trusting people will be adjusting font size using their browser, and I need to accomodate them if they're an English speaking user without glasses or a German speaking user with a visual impairment (for whom the nav items are going to be dramatically bigger). So there are a number of different reasons why the header may be ~60-300px high, depending on who's looking at it.
However much content there is, I need the header div to visually accomodate it in height, and I need the content div to attach itself to the bottom of the header at any of the possible heights that it may present.
I'm off to buy Eric Myer's latest book for some guidance, but would love any furthur suggestions anyone might have.
Snapping the content to the header is not too difficult. If you do not specify a hieght on your header layer, make it a relative <div> (warning: if you are trying to put your content first for accessibility reasons this may be problematic - if this is the case, have a look at using a skip nav link), then the layer will be the height of it's contents.
Having the content layer also as a relative layer, calling it after the header in your html will mean that it 'snaps' to the end of the header layer.
However, this will lead you into difficulty with the footer layer. You could use bottom:0; and have a margin-bottom on the content layer equal in height to the footer, but there are browser support issues here (namely NN4.x!).
All text is sized using ems so I'm trusting people will be adjusting font size using their browser, and I need to accomodate them if they're an English speaking user without glasses or a German speaking user with a visual impairment
Precisely why I said to fix those heights in EMs - that way, when the user re-sizes text, they re-size the divs as well. At least, that's how it works in Mozilla.
dingman:
Thanks for the suggestion, I'm sorry I misunderstood. I tried a few tests, and using em for the height does work as you suggested (in IE6, anyway). This wasn't my preferred functionality, but it's a workable second choice I'm happy to have. I just need to figure out how to keep the header and footer in place without position:fixed in IE.
I just need to figure out how to keep the header and footer in place without position:fixed in IE.
If you figure out how to do this and still have scroll wheels work in Opera, let me know. I've got a couple sites where I'd love to have a good solution. Obviously, position:fixed is the Right Thing(tm), but far too many people use IE.
I know anyone can Google, but I found some good stuff with those search terms, and I figured if anyone if trying to work on this with me, we may as be on the same page.
I did have some moderate success getting the example at tagsoup.com working, but there are some possible errors with the header overwriting the scrollbar of the content if it gets too big. I'm still working on it.
I'll past the code below without content - fill up the divs as you like, and see what happens when the content div needs to scroll.. Does anyone have any advice?
This has only been tested on IE 5.x and IE6. I only need it to work there, so I can't comment on what a better browser will do with this..
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title></title>
<style type="text/css" media="screen"><!--
BODY {
color: #000;
font-size: 1em;
font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
margin: 0px;
padding: 0px;
overflow-y: hidden }
#layer1 {
background-color: #ff4500;
padding: 1em;
position: relative;
top: 0px;
left: 0px;
width: 100%;
visibility: visible;
display: block }#layer2 {
background-color: #ff8c00;
padding: 1em;
position: relative;
top: 0px;
left: 0px;
bottom: 50px;
width: 100%;
height: 100%;
overflow: auto;
visibility: visible;
display: block }#layer3 {
background-color: #ffd700;
padding: 1em;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 50px;
visibility: visible;
display: block }--></style>
</head><body leftmargin="0" marginheight="0" marginwidth="0" topmargin="0">
<div id="layer1">
Put Content Here</div>
<div id="layer2">
Put Content Here</div>
<div id="layer3">
Put Content Here</div>
</body></html>
