This is probably a really stupid question but I barely know what CSS is so
I'm having some difficulties.
I'm trying to create a page design like this:
--------------------------------------------------------------
| commandbar |
--------------------------------------------------------------
| | |
| quicklinks | projects |
| | |
--------------------------------------------------------------
| |
| |
| |
| actions |
| |
| |
| |
| |
--------------------------------------------------------------
I want commandbar, quicklinks and projects to be fixed on the page while
actions should be able to scroll. I'm trying to do this using CSS only but I
can't get it to work.
Note that it only has to work using Safari/OmniWeb and it's only going to be
used by myself on my local server.
What I've come up with so far is the following:
BODY
{
margin-top: 0;
margin-bottom: 0;
margin-left: 0mm;
margin-right: 0mm;
background-color: #FFF;
color: #000;
font-family: Optima, Verdana, Times, serif;
font-size: 9pt;
}
#commandbar
{
position: fixed;
background-color: #000;
width: 100%;
top: 0px;
color: #fff;
height: 30px;
z-index: 3;
overflow: default;
}
#quicklinks
{
position: fixed;
background-color: #faa;
width: 50%;
top: 30px;
left: 0px;
height: 100px;
z-index: 2;
}
#projects
{
position: fixed;
background-color: #aaf;
width: 50%;
top: 30px;
left: 50%;
height: 100px;
z-index: 1;
}
#actions
{
position: absolute;
background-color: #afa;
top: 130px;
z-index: -14;
}
and this test file
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd";>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Untitled</title>
<meta name="generator" content="BBEdit 8.2">
<link rel="stylesheet" href="./office.css" type="text/css">
</head>
<body>
<div id="commandbar">
Uppdatera
</div>
<div id="quicklinks">
Blipp blopp
</div>
<div id="projects">
Flipp flopp
</div>
<div id="actions">
Rad 1 <br>
Rad 2 <br>
...
</div
</body>
</html>
My problem is that the three top fields work as I want but the "actions"
field ends up behind the top three when I scroll. This means that when I open
my test file I see "Rad 1", "Rad 2" ... "Rad 44" and when I click on the
scroll list to go down page I now see "Rad 54", "Rad 55", ... while "Rad
45"-"Rad 54" is behind the top three fields. How do I fix this so that I see
"Rad 45" ... when I do a page down?
jem
--
Jan Erik Moström, www.mostrom.pp.se
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
