Welcome to the MacNN Forums.

Ilja · Apr 30, 2003, 10:58 AM

I'm having some problems designing a page with layers.

The structure of the page is like this:

Code:
&lt;?xml version="1.0" encoding="iso-8859-1"?&gt;
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl"&gt;
  &lt;head&gt;
    &lt;title&gt;Conforming XHTML 1.0 Strict Template&lt;/title&gt;
    &lt;link type="text/css" rel="stylesheet" href="styles.css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="screen"&gt;
	     &lt;div id="header"&gt;header&lt;/div&gt;
	     &lt;div id="navbar"&gt;navigation-bar&lt;/div&gt;
	     &lt;div id="menubar"&gt;menu-bar&lt;/div&gt;
	     &lt;div id="main"&gt;content&lt;/div&gt;
	     &lt;div id="footer"&gt;footer&lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;

The things I want:

Centering the screen layer (did that)
heaving all the other layers positioned in this layer (did that)
The header, footer, navigation and menu layers should be fixed (tried that)
the content layers must be scrollable

As you can see on the page (in safari at least) the content layers just drops over all the other layers

Other things I couldn't accomplish: to let the layers grow automaticly if the text is too large and the following layers automaticly re-position..

css-code:

Code:
      body {
        margin: 12px;
        background: black;
      }
      #screen {
        position: fixed;
        width: 60%;
        height: 80%;
        top: 10%;
        right: 20%;
        bottom: 10%;
        left: 20%;
		      background: white;
		      text-align: center;
		      vertical-align: middle;
        z-index: 2;
      }

      #header {
        position: relative;
        width: 100%;
        height: 120px;
        top: 0;
        right: 0;
        bottom: auto;
        left: 0;
		      background: gray;
	      	text-align: center;
		      vertical-align: middle;
        z-index: 2;
      }
      #navbar {
        position: relative;
        width: 100%;
        height: 30px;
        top: auto;
        right: 0;
        bottom: auto;
        left: 0;
	      	background: darkblue;
		      text-align: center;
		      vertical-align: middle;
        z-index: 2;
      }
      #menubar {
        position: absolute;
        width: 250px;
        height: auto;
        top: 150px;
        right: auto;
        bottom: 30px;
        left: 0;
		      background: green;
		      text-align: center;
		      vertical-align: middle;
        z-index: 2;
      }
      #main {
        position: absolute;
        width: auto;
        height: auto;
        top: 150px;
        right: 0;
        bottom: 30px;
        left: 250px;
		      background: white;
		      text-align: center;
		      vertical-align: middle;
        z-index: 1;
      }
      #footer {
        position: absolute;
        width: 100%;
        height: 30px;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
		      background: gray;
		      text-align: center;
		      vertical-align: middle;
        z-index: 2;
      }

Ilja · May 1, 2003, 11:39 AM

anyone?

ameat · May 1, 2003, 02:39 PM

Originally posted by Ilja:
anyone?

...have you checked out iframes for your scrollable layer content? i believe it works more consistently in most of the browsers and degrades well in those that don't support em...

ism · May 1, 2003, 04:21 PM

Ilja,

there are definite problems afoot. Gecko is rendering the page without CSS, so I am guessing you stylesheet is being served with a MIME type of text instead of CSS.

A mixture of fixed, absolute and relative positioning, no holds barred hey?!

Anyway, with slight modification you can get it working in Gecko based browsers by using right positioning of 0 on the main div and setting an overflow of auto (scroll will give a horizontal scroll bar as well).

Code:
body {
margin: 12px;
background-color: black;
}

#screen {
position: fixed;
width: 60%;
height: 80%;
top: 10%;
left: 20%;
background-color: white;
text-align: center;
vertical-align: middle;
z-index: 2;
}

#header {
position: relative;
width: 100%;
height: 120px;
background-color: gray;
text-align: center;
vertical-align: middle;
z-index: 2;
}

#navbar {
position: relative;
width: 100%;
height: 30px;
text-align: center;
vertical-align: middle;
z-index: 2;
}

#menubar {
position: absolute;
width: 250px;
height: auto;
top: 150px;
right: auto;
bottom: 30px;
left: auto;
background-color: green;
text-align: center;
vertical-align: middle;
z-index: 2;
}

#main {
position: absolute;
width: auto;
height: auto;
top: 150px;
bottom: 30px;
left: 250px;
background-color: white;
text-align: center;
vertical-align: middle;
z-index: 1;
overflow: auto;
right: 0px;
}

#footer {
position: absolute;
width: 100%;
height: 30px;
background-color: gray;
text-align: center;
vertical-align: middle;
z-index: 2;
bottom: 0px;
}

This doesn't work in KHTML browsers (Safari), well the positioning does, but the overflow doesn't.

IE:mac chokes completely. It is pretty tricky CSS positioning you are using.

Like ameat suggests it may be worth investigating iframes. Could you not perhaps use fixed positioning on the header and footer so that the browser scroll bar can be used for the main div? The screen div could be used to act like the body, except allowing suitable z stacking to prevent the main div sliding out of the top header, etc.