homepage Welcome to WebmasterWorld Guest from 54.197.94.241
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Need help w/ layers layout
layers
calhcm22




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

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.

 

DrDoc




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

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...

grahamstewart




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

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved