Welcome to WebmasterWorld Guest from 23.22.46.195

Forum Moderators: not2easy

Need help w/ layers layout

layers

   
5:06 am on Apr 18, 2003 (gmt 0)

10+ Year Member



So, I'm having a problem with learning how to set up layers. I'm used to creating a layout with tables and ending up with something like this:

/=head=\
-text-
-text-
\=foot=/

Header - banner, usually with tables, I set it up so that there is also a repeating bg-image so that different size browsers can scale the page

Text - content, scalable to 100% of the page, minus the height of the header and footer, top and bottom accordingly.

Footer - usually a repeating background image with small images on left and right side that link side column bg-images with bottom bg-image. Same process repeated on the top.

Basicly, frame-like borders around top, bottom, left, and right sides, with scrollable content area is what I'm looking for. I dont know if I explained that right, but let me know if you think you have an idea of how to get this to work. Thanks. Feel free to im me, my AOL IM sn is n00ge.

5:23 am on Apr 18, 2003 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Welcome [webmasterworld.com] to Webmaster World! :)

What you describe is indeed a tricky layout, especially if it's intended to be cross-browser compatible.

Unfortunately it's not (at least not yet, but future CSS plans are promising) as easy to do this as it is with tables. Then again, tables have been around much longer :)

<table height="100%">
<tr>
<td height="50">header</td>
</tr>
<tr>
<td>text</td>
</tr>
<tr>
<td height="50">footer</td>
</tr>
</table>

Still, using the basic "table thinking" works here as well.

First of all, you want the total height to be 100%, right? Say that the header and footer are each 20%. That leaves 60% for the rest of the page.

<div style="height:20%;">header</div>
<div style="height:60%;">text</div>
<div style="height:20%;">footer</div>

Now, as you may have noticed... you wouldn't be able to only define a height for the header and footer, and make the "text" section fill in the gap.

Using a wrapping div is a possible solution.

<div style="height:100%">
<div style="height:50px;position:absolute;top:0px;left:0px;">header</div>
text
<div style="height:50px;position:absolute;bottom:0px;left:0px;">header</div>
<div>

Again, this only works as long as the content doesn't expand beyond 100%... in which case the footer would overlap some text - not pretty. Also, 100% height is interpreted differently in the different browsers.

So, the only water proof solution, for right now, is to use tables...

7:42 am on Apr 18, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Well you did say you wanted a "scrollable content area".

So you could use overflow:scroll on the central div.
That way if it gets too big it will gain a scrollbar (a lot like a frame).

If thats okay then try something like..

html:


<body>
<div id="header">Header</div>

<div id="content">
..content stuff..
</div>

<div id="left">left</div>
<div id="right">right</div>
<div id="footer">footer</div>
</body>

CSS:


body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
#header {
position: absolute;
top: 0;
left: 0;
width:100%;
height: 10%;
background: #ddffdd;
}
#footer {
position: absolute;
bottom: 0px;
left: 0px;
width:100%;
height: 10%;
background: #ddffdd;
}
#left {
position: absolute;
top: 10%;
left: 0px;
width: 10%;
height: 80%;
background: #ddffdd;
}
#right {
position: absolute;
top: 10%;
right: 0px;
width: 10%;
height: 80%;
background: #ddffdd;
}
#content {
position: absolute;
top: 10%;
left: 10%;
height: 80%;
width: 80%;
overflow: scroll;
}

Seems to work more or less.

edit: code correction

 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month