No replies
rbfree
Offline
Enthusiast
Last seen: 13 years 25 weeks ago
Timezone: GMT-7
Joined: 2007-12-19
Posts: 124
Points: 0

I've been reading on stacking contexts, and trying to make sense out of how it all works. However, I am unable to put the pieces together to understand why the following code isn't working. I'm merely trying to make the links in the left sidebar (lsidebar div) visible over a semitransparent background, itself semi-obscuring a background image that is opaque.... and should sit at the very bottom (layer).

I've tried each of the techniques above and am thoroughly confused. Still trying to understand stacking contexts. BTW, for now, I'm only trying to get it right in FF. Maybe later on IE 6. (Maybe not . I'm getting impatient with the project of correct rendering in IE and am more or less ready to drop it from my list of headaches.)

I'm seeing at least two problems. For one, the image that is supposed to be background to everything is actually covering everything. Second, it is offset to the left.

Will someone please give this a view and help me understand this problem? Again, thanks for any help.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<html>
<head>
    <title>Untitled</title>
</head>
 
<body>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>
        Example:  trying to build a fluid site with semi-transparent backgrounds over a background
    </title>
    <style type="text/css">
/*   example_stylesheet_2col_float_fluidcontent_image.css  */
/*  EDIT SEQUENCE NUMBER 1  */
 
* {
    margin: 0;
    padding: 0;
    } 
body * {text-align: left;
    }
body {
    background-color: #2F4F4F;
    /* background-image: url(background_basic.jpg); */
    z-index: 1;
    } 
#container {
    width: auto;
    min-width: 600px;
    max-width: 1000px;
    margin: 4px 2% 0 2%;
    padding: 2% 0 0 0;
    /*margin: auto;    This line was in the rule above */
    /* border: dotted 3px; */
    color: #2F4F4F;
    /*  background-color: #FFF8DC;  */
    font-size: 18px;
    }
/*   Masthead Related   */
#masthead_container {
    height: 5%;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    overflow: auto;
    color: inherit;
    }
h1.masthead {
    margin: 0 0 0 10%;
    padding: 0;
    color: #600000;
    /* color: #243C3C; */
    font: bold 190% Verdana, lucida sans, times, serif;
    }
h1.masthead_indent {
    clear: right;
    margin: 0 0 0 13%;
    padding: 0;
    color:  #600000;
    /* color: #243C3C; */
    font: bold 190% Verdana, lucida sans, times, serif;
    }
h2.submasthead {
    clear: right;
    margin: 0 0 0 13%;
    padding: 0;
    color: #600000;
    /* color: #243C3C; */
    font: bold 150% Trebuchet MS, times;
    }
h2.submasthead_indent {
    clear: right;
    margin: 0 0 0 15%;
    padding: 0;
    color:  #600000;
    /* color: #243C3C; */
    font: bold 150% Trebuchet MS, times;
    }
/* End of Masthead Related */
/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||  */
/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||  */
 
/* Left Sidebar Related */
#lsidebar {
    float: left;
    position:relative;
    overflow:hidden;
    width: 120px;
    margin: 2em 0 0 0;
    padding: 0 0 0 2%;
    /*background-color: PaleGoldenrod;  eee8aa  */
    z-index: 3;
    border: dotted black 1px;
    }
#links_level_1 {
    margin: 0 0 0 0;
    padding: 5px 0 0 10px;
    z-index: 4;
    }
.linkstyles {
    color: #800000;
    list-style-type: none;
    margin: 0 0 0 0;
    padding: 0 0 9% 0;
    font: 75% helvetica, verdana, arial, sans-serif;
    }
.opacity_emptydiv {
    position:absolute;
    height: 999em;
    top:0;left:0;bottom:0;
    width:100%;
    background: green;
    opacity: 0.5;
    z-index: 1;
    }
/*  End of Left Sidebar Related */
/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||  */
/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||  */
p.view {
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
    z-index:1;
    margin:0;
}      
/* Main Content Related */
#maincontent {
    float: right;
    width: 92%;
    margin: 0 0 20px -120px;
    padding: 0 4% 0 0;
    }
.maincontent_wrapper {
    background-color: #FFF;
    margin: 3% 0 0 120px;
    overflow: hidden;
    padding: 1% 0 0 0;
    font: verdana, arial, sans-serif;
    background-color: #FFF8DC;
    color: inherit;
    }  
h1 {
    margin: 0 0 0 0;
    padding: 0 0 2% 0;
    color:  #243C3C; /*2F4F4F;*/
    font: bold 110% trebuchet MS, arial, sans-serif;
    }
h2 {
    margin: 0% 0 0% 0%;
    padding: 0 0 2% 2%;
    color:  #243C3C; /*2F4F4F;*/
    font: bold 110% trebuchet MS, arial, sans-serif;
    }
p, h1, h2 {
position:relative;
padding:10px;
}
p {
    margin: 0 0 0 0;
    padding: 0 0 2% 4%;
    color:  #243C3C; /*2F4F4F;*/
    font: bold 100% trebuchet MS, arial, sans-serif;
    }  
hr {
    margin-left: 80px;
    height: .3em;
    width: 370px;
    color: #BDB76B;
    background-color: silver;
    }
/*   End of Main Content   */
/*  Beginning of Footer   */
#footer {
    clear: both;
    margin: 20px 0 0 29%;
    background: #ccc url(rotten_log.jpg);
    /*background-color: #BDB76B;*/
    height: 120px;
    width: 50%;
    line-height: 1.5em;
    text-align: center;
    border: dotted black 1px;
    }
p.totp_anchor {
    float: left;
    margin-left: 5%;
    padding-top: 8%;
    font: bold 75% verdana, sans-serif;
 
    }
.webmaster_style {
    float: right;
    margin: 2% 4% 0 0;
    color: #000000 !important;
    font: bold 55% verdana, sans-serif;
    }
.excuse_footer {
    padding-top: 1%;
    color: #FF4500;
    }
a.footer_contact {
    display: block;
    width: 10em;
    margin: 1% 4% 1% 3% !important;
    padding-top: 3px;
    padding-right: 3px;
    padding-bottom: 3px;
    padding-left: 5px;
    text-align: center;
    border: solid 1px #FF4500;
    color: #00FF00;
    font: bold 95% verdana, sans-serif;
    }
/*  End of Footer   */
/*  Pseudoselectors for links   */
a:link {
    color:  #600000;
    text-decoration: none;
    font-weight: bold;
    font-family: arial;
    }
a:visited {
    color: #A0522D;
    text-decoration: none;
    font-weight: bold;
    font-family: arial;
    }
a:hover {
    color: #0000FF; /* brown */
    text-decoration: underline;
    font-weight: bold;
    font-family: arial;
    }
 
a:active {
    color: red;
    text-decoration: none;
    font-weight: bold;
    font-family: arial;
    }
</style>
</head>
<body>
    <div id="container">
        <!--  Beginning of Masthead Container  -->
        <div id="masthead_container">
            <h1 class="masthead">Seem to be having difficulties</h1>
            <h1 class="masthead_indent">
                 with this website</h1>
            <h2 class="submasthead">and it will drive me crazy</h2>
            <h2 id="totp" class="submasthead_indent">until I get it right...</h2>   
        </div>
        <!--  End of masthead_container  -->
        <!-- Beginning of Main Content --> 
        <div id="maincontent">
            <div class="maincontent_wrapper">
            <h1>
                I'm working out the principles
            </h1>
            <h2>
                Trying to get it right.
            </h2>
            <p>
                So, excuse the styling.  It's makeshift. I'll adjust it when I get this
                basic layout straightened out.  And, culpa qui officia deserunt mollitia
                ffanimi, id est laborum et
                dolorum fuga. Et harum quidem rerum facilis est et expedita
                distinctio. Nam libero tempore, cum soluta nobis est eligendi
                optio cumque nihil impedit quo minus id quod maxime placeat
                facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.
                 Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus
                 saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.
            </p>
            <p>
                And, if you don't read Latin, suffice it to say that.....
            </p>
            <p>
              blah blah blah blah blah blah.......one should retain humor.
            </p>
            <p>
              Please
                <a href="email_form.html">
                    e-mail us
                </a>
              or call us by telephone at dee doo dah
            </p>
            </div>
        </div>
        <!-- End of Main Content -->
        <!-- Beginning of Left Side bar -->
        <div id="lsidebar">
            <ul id="links_level_1"> 
                <li class="linkstyles">
                    <a href="example_index.html">
                        Home
                    </a>
                </li>
                <li class="linkstyles">
                    <a href="example_about_us.html">
                            More About Us</a>
                </li>
                <li class="linkstyles">
                    <a href="example_services.html">
                        Our Services</a>
                </li>
            </ul>
            <div class="opacity_emptydiv"></div>    
        </div>
        <!--  End of Left Sidebar  --> 
        <!--   Beginning of Footer   -->
        <div id="footer">
            <p class="totp_anchor">
                <a href="#totp">
                    Return to Top of Page
                </a>
            </p>
            <div class="webmaster_style">
                Currently frustrated yet obsessed n00b
                <br />has designed but not implemented this web site
                <br />
                <a href="webmaster_email_form.html"
                        class="footer_contact">
                            Contact Webmaster
                </a>
        </div>
        <!--    End of Footer   --> 
    </div>
    <!--   End of Container Div    -->
</div>
<!-- End of Page Div -->
<p class="view"><img src="background_basic.jpg" width="100%" height="100%" alt="from the wood"></p>
</body>
</html>

AttachmentSize
example.jpg326.46 KB

CSS n00b