Re: OT: Using CSS for layering (was RE: web design and scree…

Top Page
Attachments:
Message as email
+ (text/plain)
Delete this message
Reply to this message
Author: Joseph Sinclair
Date:  
To: Main PLUG discussion list
Old-Topics: Re: OT RE: web design and screen resolution
Subject: Re: OT: Using CSS for layering (was RE: web design and screen resolution)
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, 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 -
> To subscribe, unsubscribe, or to change you mail settings:
> http://lists.PLUG.phoenix.az.us/mailman/listinfo/plug-discuss
>

---------------------------------------------------
PLUG-discuss mailing list -
To subscribe, unsubscribe, or to change you mail settings:
http://lists.PLUG.phoenix.az.us/mailman/listinfo/plug-discuss