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

Sat Feb 11 16:37:10 MST 2006

On Sat, 2006-02-11 at 15:08 -0700, Craig White wrote:
> 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>
----
OK - fixed the syntax of the class definitions - I see the difference
between : and ; - that's what I get for using tools to write css for
me...didn't realize that.

Anyway, I put the picture in the background as you suggested within the
css and it completely disappears on print preview - which sort of tells
me that backgrounds don't print and I need the object to print so I am
still stymied.

Craig