SitePoint Sponsor

User Tag List

Page 5 of 5 FirstFirst 12345
Results 101 to 111 of 111
  1. #101
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi Thierry,

    Thanks for dropping in and thanks for your interesting solution

  2. #102
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Location
    San Francisco Bay Area
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 :: @thierrykoblentz
    tjkdesign.com | ez-css.org | css-101.org

  3. #103
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Location
    San Francisco Bay Area
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks YuriKolovsky
    Thierry :: @thierrykoblentz
    tjkdesign.com | ez-css.org | css-101.org

  4. #104
    SitePoint Zealot
    Join Date
    Jan 2008
    Location
    Hot Springs, Montana
    Posts
    195
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>
    Attached Images Attached Images

  5. #105
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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>

  6. #106
    SitePoint Zealot
    Join Date
    Jan 2008
    Location
    Hot Springs, Montana
    Posts
    195
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  7. #107
    SitePoint Zealot
    Join Date
    Jan 2008
    Location
    Hot Springs, Montana
    Posts
    195
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  8. #108
    SitePoint Zealot
    Join Date
    Jan 2008
    Location
    Hot Springs, Montana
    Posts
    195
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  9. #109
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    did anyone figure this out ?

  10. #110
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Yes if you read through the thread you will see many people figured this out .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  11. #111
    SitePoint Zealot
    Join Date
    Jan 2008
    Location
    Hot Springs, Montana
    Posts
    195
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Quote Originally Posted by shivd View Post
    did anyone figure this out ?
    edit: you figured it out, right?
    Last edited by rbfree; Jun 27, 2009 at 16:53.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •