OT: Using CSS for layering (was RE: web design and screen resolution)

Sat Feb 11 18:06:25 MST 2006

On Sat, 2006-02-11 at 17:32 -0700, Joseph Sinclair wrote:
> You're still placing the text as a child of the background image.  Try placing the text in a sibling div or try placing the image as a child of the text.
> 
----
I'm starting to feel like a moron - this looks great until I try to
print preview it...

<!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>
                <meta http-equiv="content-type"
content="text/html;charset=utf-8" />
                <meta name="generator" content="Adobe GoLive" />
                <title>Referral Note</title>
                <link
href="../../../public/stylesheets/th_stylesheet.css" rel="stylesheet"
type="text/css" media="all" />
                <style type="text/css" media="screen"><!--
#section1 { height: 118px; width: 128px; left:  36px; top: 2px;
position: absolute; visibility: visible; }
#section2 { height: 150px; width: 634px; left: 155px; top: 2px;
position: absolute; visibility: visible; }
.lower-layer { z-index: 10; }
.upper-layer { z-index: 20; background-color: transparent; }
--></style>
        </head>

        <body>
                <div id="section1" class="lower-layer"><img
src="http://www.tobyhouse.com/images/tobyLogo_2005.gif" alt=""
height="112" width="128" border="0" />
                </div>
                <div id="section2" class="upper-layer">
                        <h1>REFERRAL NOTE</h1>
                </div>
                        <div id="test" class="upper-layer"><p>More
text</p>
                </div>
        </body>
</html>