Forum Moderators: not2easy
Thank you!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
<!--
body {
background-color:#CC9;font-family:"Lucida Sans", "Lucida Grande", Arial, Helvetica, sans-serif;
font-size:90%;
color:#000000;}
#wrapper {
margin:0 10% 1em;
text-align:left;
width:40em;}
#header {height:60px;background-color:#333;}
#nav{position:fixed; width:10em;margin-top:2em;z-index:1;}
#main{margin-top:2em;z-index:10;position:relative;background-color:#cc9;}
#content{float:left;margin-left:12em;}
h1{color:#fff;}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>header</h1>
</div>
<div id="nav"><ul>
<li><a href="#">one thing here</a></li>
<li><a href="#">a second thing</a></li>
<li><a href="#">three</a></li>
</ul>
</div>
<div id="main"><!--an additional wrapper for the main content area -->
<div id="content">
<p>the goal is for the item on the left to be fixed, so when vertically scrolling it's always visible. If the window is too small though, this content should overlap. Ideally, the background color is applied to "main", to allow "content" to have white space. This would also allow me to put transparency on "main", so the viewer could see the overlap effect and not ge confused. Perhaps then "content" has color so the nav isn't viewable under text.</p>
</div><!--end content -->
</div><!--end main -->
</div>
</body>
</html>
But if the initial window is smaller than how the page is being designed, having the "middle" container with a background color overlap the "bottom" div is what I'm looking for.
Right now the "middle" is ignored and only the "top" is overlapping correctly.
If I drag the window horizontally, nothing changes. What browser are you using? (I'm using Safari.)
"This would also allow me to put transparency on "main", so the viewer could see the overlap effect and not ge confused. Perhaps then "content" has color so the nav isn't viewable under text."
Just fyi, if "main" is semi-transparent then all of its children will be semi-transparent. Setting its children's opacity:100%, frustratingly enough, will not make them opaque.
Hope this helps.
I'll try a background image for main to fake a fade effect now that I know opacity won't work.
Such relief, helps a lot.
