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

Sat Feb 11 14:11:08 MST 2006

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>

Craig White wrote:
> On Mon, 2006-02-06 at 21:17 -0500, FoulDragon at aol.com wrote:
> 
>>Also remember:
>> 
>>1024x768 screen != 1024x768 window.
>> 
>>I have my desktop at 1600x1200 (<3 my 21" CRT) but almost never run an
>>app at 1600x1200.
> 
> ----
> along these lines...I'm struggling with 'printing' html and I don't
> exactly know how to handle this. On screen...I have no problems but
> print preview - I have a problem
> 
> Consider 2 layers defined in <head>
> 
> #layer1 { height: 118px; width: 100px; left: 36px; top: 20px; position:
> absolute; visibility: visible; }
> #layer2 { height: 150px; width: 752px; left: 36px; top: 20px; position:
> absolute; visibility: visible; }
> --></style>
>   </head>
>     <body>
>       <span id="layer1">
>          <img src="/images/pic.gif" alt="" height="112" width="128"
>           border="0" />
>          <span id="layer2">
>            <h2>Some text<</h2>
>          </span>
>       </span>
> 
> In print preview...text in layer2 is 'below' rather than on same
> horizontal plane as picture in layer1. Inside normal browser mode (not
> printed/not print preview), the objects are perfectly where I want them.
> 
> I have tried both <span> and <div> tags but the same results.
> 
> I am trying not to 'force' the location with <table> as I am trying to
> reform my ways.
> 
> What is the trick?
> 
> Craig
> 
> ---------------------------------------------------
> PLUG-discuss mailing list - PLUG-discuss at lists.plug.phoenix.az.us
> To subscribe, unsubscribe, or to change  you mail settings:
> http://lists.PLUG.phoenix.az.us/mailman/listinfo/plug-discuss
> 