I was playing around last night and came up with this.
It's fine except for one thing: the little gray box has to over-lap the main content <div>. I could easily do this with position:absolute;, but I don't really want to do that. I have included a screenshot so you can see what I mean, and here's the entire code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="Content-Script-Type" content="text/javascript">
<title>Example</title>
<style type="text/css">
body {
padding-left:0;
margin: 0px 0px 0px 0px;
background:7399C8
}
Its right here! Below!
#top {
padding:0px 0px 0px 200px;
margin:0px;
height:200px;
width:750px;
border-right:3px dashed #000;
border-bottom:3px dashed #000;
background:6581A3;
z-index:-1;
position:absolute;
top:0px;
left:0px;
}
Right here! Above!
#top #box {
margin:70px 0px 0px 0px;
z-index:2;
background:gray;
border:1px solid #000;
height:100px;
width:260px;
}
#main {
margin:0px;
border:1px solid #000;
border-left:transparent;
background:#5E9DC2;
padding-left:12px;
height:800px;
width:700px;
color:black;
z-index:1;
}
h2 {
margin-top:12px;
margin-left:30px;
color:#000;
}
H3 {
font-size:12pt;
color:blue;
margin-bottom:5px;
width:50%;
border-bottom:2px dashed blue;
padding-top:5px;
padding-bottom:5px;
padding-left:13px;
}
#main #menu {
float:right;
width:220px;
height:300px;
border-left:1px solid #000;
border-bottom:5px solid #000;
background:#BFBFBF;
color:black;
padding:5px;
margin:0px 0px 5px 0px;
}
#main #side {
float:right;
width:220px;
height:300px;
border-left:1px solid #000;
border-bottom:5px solid #000;
border-top:1px solid #000;
background:#BFBFBF;
color:black;
padding:5px;
margin-top:0px;
}
.title {
margin-top:10px;
margin-left:40px;
color:blue;
font-weight:bolder;
font-size:2em;
border-right:3px ridge #5E9DC2;
border-left:3px ridge #5E9DC2;
padding:0px 20px 0px 20px;
}
.cont {
color:black;
width:90%;
text-align:justify;
text-indent:5px;
padding:10px 2px 0px 0px;
height:100px;
}
p {
border-bottom:1px solid #000;
background:#7DBFDB;
padding:5px;
margin:0px 0px 100px 0px;
}
</style>
<script type="text/javascript">
if (document.getElementById) onload = function () {setInterval("document.getElementById('date-time').firstChild.data = new Date().toLocaleString()", 250)}
document.write('<p>It is now <span id="date-time">', new Date().toLocaleString(), '</span></p>');
</script>
</head>
<body>
<div id="top">
<div id="box">
</div>
</div>
<div id="main">
<div id="menu"><span class="title">Menu</span><br>
<span class="cont">
Testing Testing Testing Testing Testing Testing Testing
Testing Testing Testing Testing Testing Testing Testing
</span></div>
<h2>Example::</h2>
<h3>Test</h3>
Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing.<br>
Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing.<br>
Testing. Testing. Testing. Testing. testing. Testing. Testing. Testing.<br>
Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing.<br>
Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing.<br>
Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing.<br>
Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing.<br>
Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing.<br>
Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing.<br>
Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing.<br>
Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing.<br>
Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing.<br>
Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing.<br>
Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing.<br>
Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing.<br>
Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing.
<div id="side">
<span class="title">Menu</span><br>
<span class="cont">
Testing Testing Testing Testing Testing Testing Testing
Testing Testing Testing Testing Testing Testing Testing </span>
</div>
</body>
</html>
I'm quite new at this, so bare with me here.Your problem is that the gray box is a child of the blue box, and because the blue box has a -1 z-index, its child node cannot over lap it because it is a child of a -1 z-index node. So you would most likely need to use absolute positioning for it... I actually don't know any other way to do that one.
[J]onaI was afraid of that. Oh well, not much I can do about it.
Many thanks for your help.Sorry that I don't know of any other solution, or even if there is one.
[J]ona
It's fine except for one thing: the little gray box has to over-lap the main content <div>. I could easily do this with position:absolute;, but I don't really want to do that. I have included a screenshot so you can see what I mean, and here's the entire code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="Content-Script-Type" content="text/javascript">
<title>Example</title>
<style type="text/css">
body {
padding-left:0;
margin: 0px 0px 0px 0px;
background:7399C8
}
Its right here! Below!
#top {
padding:0px 0px 0px 200px;
margin:0px;
height:200px;
width:750px;
border-right:3px dashed #000;
border-bottom:3px dashed #000;
background:6581A3;
z-index:-1;
position:absolute;
top:0px;
left:0px;
}
Right here! Above!
#top #box {
margin:70px 0px 0px 0px;
z-index:2;
background:gray;
border:1px solid #000;
height:100px;
width:260px;
}
#main {
margin:0px;
border:1px solid #000;
border-left:transparent;
background:#5E9DC2;
padding-left:12px;
height:800px;
width:700px;
color:black;
z-index:1;
}
h2 {
margin-top:12px;
margin-left:30px;
color:#000;
}
H3 {
font-size:12pt;
color:blue;
margin-bottom:5px;
width:50%;
border-bottom:2px dashed blue;
padding-top:5px;
padding-bottom:5px;
padding-left:13px;
}
#main #menu {
float:right;
width:220px;
height:300px;
border-left:1px solid #000;
border-bottom:5px solid #000;
background:#BFBFBF;
color:black;
padding:5px;
margin:0px 0px 5px 0px;
}
#main #side {
float:right;
width:220px;
height:300px;
border-left:1px solid #000;
border-bottom:5px solid #000;
border-top:1px solid #000;
background:#BFBFBF;
color:black;
padding:5px;
margin-top:0px;
}
.title {
margin-top:10px;
margin-left:40px;
color:blue;
font-weight:bolder;
font-size:2em;
border-right:3px ridge #5E9DC2;
border-left:3px ridge #5E9DC2;
padding:0px 20px 0px 20px;
}
.cont {
color:black;
width:90%;
text-align:justify;
text-indent:5px;
padding:10px 2px 0px 0px;
height:100px;
}
p {
border-bottom:1px solid #000;
background:#7DBFDB;
padding:5px;
margin:0px 0px 100px 0px;
}
</style>
<script type="text/javascript">
if (document.getElementById) onload = function () {setInterval("document.getElementById('date-time').firstChild.data = new Date().toLocaleString()", 250)}
document.write('<p>It is now <span id="date-time">', new Date().toLocaleString(), '</span></p>');
</script>
</head>
<body>
<div id="top">
<div id="box">
</div>
</div>
<div id="main">
<div id="menu"><span class="title">Menu</span><br>
<span class="cont">
Testing Testing Testing Testing Testing Testing Testing
Testing Testing Testing Testing Testing Testing Testing
</span></div>
<h2>Example::</h2>
<h3>Test</h3>
Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing.<br>
Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing.<br>
Testing. Testing. Testing. Testing. testing. Testing. Testing. Testing.<br>
Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing.<br>
Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing.<br>
Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing.<br>
Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing.<br>
Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing.<br>
Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing.<br>
Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing.<br>
Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing.<br>
Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing.<br>
Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing.<br>
Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing.<br>
Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing.<br>
Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing.
<div id="side">
<span class="title">Menu</span><br>
<span class="cont">
Testing Testing Testing Testing Testing Testing Testing
Testing Testing Testing Testing Testing Testing Testing </span>
</div>
</body>
</html>
I'm quite new at this, so bare with me here.Your problem is that the gray box is a child of the blue box, and because the blue box has a -1 z-index, its child node cannot over lap it because it is a child of a -1 z-index node. So you would most likely need to use absolute positioning for it... I actually don't know any other way to do that one.
[J]onaI was afraid of that. Oh well, not much I can do about it.
Many thanks for your help.Sorry that I don't know of any other solution, or even if there is one.
[J]ona