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

Sat Feb 11 15:08:15 MST 2006

On Sat, 2006-02-11 at 14:11 -0700, Joseph Sinclair wrote:
> Try applying a z-index to the styles.
> Spec details http://www.w3.org/TR/CSS21/visuren.html#q29
> 
> It also often helps to not have the lower layer as a parent of the upper layer.
> 
> You might also want to use classes here, since upper/lower layering is likely to come up more than once.
> Remember, you can apply multiple sets of rules to a single element, and it's generally best to reserve ID selectors for very specific circumstances.
> It's also probably a good idea to put the image in the background, it makes everything easier to manage.
> I put a third div in this example, to show a different way to accomplish what you seem to be trying to do.
> 
> Example:
> In the stylesheet:
> 
> #section1 { height: 118px; width: 130px; left: 36px; top: 20px; position:
> absolute; visibility: visible; background-image: url(/images/pic.gif); background-repeat: no-repeat; }
> #section2 { height: 150px; width: 752px; left: 36px; top: 20px; position:
> absolute; visibility: visible; }
> .lower-layer { z-index: 1000; }
> .upper-layer { z-index: 2000; background-color: transparent; }
> 
> In the content:
> 
>   <div id="section1" class="lower-layer" />
>  <div id="section2" class="upper-layer">
>    <h2>Some text</h2>
>  </div>
>   <div id="someOtherSection" class="lower-layer" style="background-image: url(/images/anotherImage.png); background-repeat: no-repeat;">
>    <p class="upper-layer">Some Other text</p>
>   </div>
----
OK - thanks for the reference. I had been groping around at w3
http://www.w3.org/TR/html4/ but didn't think of looking in the css
section - my knowledge of css is somewhat limited but I have been using
it everywhere on this project so it is very to the point.

The z-axis stuff is reasonably understandable - the curious thing is
that when I adjusted to it - it still does the same thing in print
preview...

the entire test.html is below (no bitching about GoLive please...I swear
I am doing this in Quanta Plus...I started the original form in GoLive)

Anyway, I definitely could just put the graphic on the background as you
had suggested but I really want to see if I can make absolute
positioning work - which is does...until I go to print or print preview
and it seems to unravel there. I am doing this on a Linux system and
judging with Firefox but I did scp a copy back to my Windows system and
it did the same thing with Firefox and IE on WinXP.

Lastly, this is for my RonR project which is going amazingly well and I
have essentially completed the first application suite and it kicks
butt. Not shabby for 3 weeks from buying Rails book. I am being very
persnickety about form printing. Now I have to figure out migrations and
moving this from 'development' into 'production'  ;-)

the total code of the test.html file...

<!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: 100px; left: 36px; top: 20px;
position: absolute; visibility: visible; }
#section2 { height: 150px; width: 752px; left: 36px; top: 20px;
position: absolute; visibility: visible; }
.lower-layer { z-index: 1000 }
.upper-layer { z-index: 2000 background-color: transparent: }
--></style>
        </head>

        <body>
                <div id="section1" class="lower-layer">
                        <img
src="../../../public/images/tobyLogo_2005.gif" alt="" height="112"
width="128" border="0" />
                        <div id="section2" class="upper-layer">
                                <h1>REFERRAL NOTE</h1>
                        </div>
                </div>
        </body>
</html>