CSS - Test Your CSS Skills Number 20

**Paul O'B** · May 26, 2009 06:28

Hi Thierry,

Thanks for dropping in and thanks for your interesting solution

**thierry koblentz** · May 29, 2009 21:34

Hi Paul,
Thanks
I'd like to participate more often as I think this forum is a great community, but I'm more a NNTP guy...

**thierry koblentz** · May 29, 2009 21:37

Thanks YuriKolovsky

**rbfree** · Jun 2, 2009 14:11

Hi,

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.

Code HTML4Strict:

<!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>  <!--  Corresponds to Pauls "opaque" 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>

**Paul O'B** · Jun 2, 2009 14:54

Hi,

I'd need to see the live page to give you a proper fix but the first rule of z-index is that only positioned elements can have a z-index defined.

You have this style:

Code:

#links_level_1 {
    margin: 0 0 0 0;
    padding: 5px 0 0 10px;
    z-index: 4;
}

As it is not a positioned element then the z-index has no effect. To make z-index applicable you can add position:relative (widthout co-ordinates) which will create a local stacking context.

e.g.

Code:

#links_level_1 {
    margin: 0 0 0 0;
    padding: 5px 0 0 10px;
    z-index: 4;
position:relative;
}

Nothing will have moved but the element will now adhere to the stacking index in relation to its siblings in that stacking context.

Be careful when using absolute elements for structured elements as they are removed from the flow and should content approach it will overlap if not controlled in some way. It's fine if you know this and can control the content accordingly but it is impossible to clear absolute elements and you can never have a footer under the page unless something else is holding the footer down.

Also the top of your page (doctype) is duplicated and corrupt.

Remove this section which will trigger quirks mode and breaks lots of things

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

 

<html>

<head>

    <title>Untitled</title>

</head>

 

<body>

**rbfree** · Jun 2, 2009 15:08

Thanks Paul, I'll chew on this info ASAP. All the rules, in and of themselves, are fairly straightforward. Now to remember them and how they interact... a project requiring time and practice. However, I definitely should have caught the lack of positioning on the links div, given what primitive knowledge I have gained so far. Alas...

Again, many thanks. Gotta get away from this for a minute or two. Best -- rbfree

**rbfree** · Jun 2, 2009 18:41

Well, I've made the corrections noted (ack, need to be more careful re. c&p errors!).... but I'm sure there is a principle I'm missing here. I'm obviously misunderstanding the concept of stacking context (despite some great readings on Paul's and others' sites). Ack.

Anyway, here's a url. The links don't work yet and the styling is rough...

Meanwhile, I need to rethink/reread and see what I'm missing. Ack.
http://comprehensiveforestry.com/exa...lewithcss.html

**rbfree** · Jun 2, 2009 19:11

Hmmmm, I might have it now. Just reread an article. Don't bother responding yet until I apply what I've learned. Thanks for all.

**shivd** · Jun 22, 2009 13:11

did anyone figure this out ?

**RyanReese** · Jun 22, 2009 13:14

Yes if you read through the thread you will see many people figured this out

.

**rbfree** · Jun 22, 2009 13:23

Do a search for "stacking context" and "z-index"

Meanwhile, when I get a minute I'll find links to the articles I read. But, it won't be for awhile, and meanwhile, you'll probably find everything you need.

Originally Posted by shivd

did anyone figure this out ?

edit: you figured it out, right?

User Tag List

Thread: CSS - Test Your CSS Skills Number 20

Thread Tools

Display

Bookmarks

Bookmarks

Posting Permissions