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@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@lists.plug.phoenix.az.us
> To subscribe, unsubscribe, or to change you mail settings:
> http://lists.PLUG.phoenix.az.us/mailman/listinfo/plug-discuss
>
---------------------------------------------------
PLUG-discuss mailing list -
PLUG-discuss@lists.plug.phoenix.az.us
To subscribe, unsubscribe, or to change you mail settings:
http://lists.PLUG.phoenix.az.us/mailman/listinfo/plug-discuss
&References=43EE52EC.9080709@stcaz.net&In-Reply-To=43EE52EC.9080709@stcaz.net&CC=%22Joseph%20Sinclair%22%20<plug-discuss@stcaz.net>,%20%22Main%20PLUG%20discussion%20list%22%20<plug-discuss@lists.plug.phoenix.az.us>&Body=On%202006-02-11%2020:43,%20Joseph%20Sinclair%20wrote:%0A>%20Try%20applying%20a%20z-index%20to%20the%20styles.%0A>%20Spec%20details%20http://www.w3.org/TR/CSS21/visuren.html#q29%0A>%20%0A>%20It%20also%20often%20helps%20to%20not%20have%20the%20lower%20layer%20as%20a%20parent%20of%20the%20upper%20layer.%0A>%20%0A>%20You%20might%20also%20want%20to%20use%20classes%20here,%20since%20upper/lower%20layering%20is%20likely%20to%20come%20up%20more%20than%20once.%0A>%20Remember,%20you%20can%20apply%20multiple%20sets%20of%20rules%20to%20a%20single%20element,%20and%20it's%20generally%20best%20to%20reserve%20ID%20selectors%20for%20very%20specific%20circumstances.%0A>%20It's%20also%20probably%20a%20good%20idea%20to%20put%20the%20image%20in%20the%20background,%20it%20makes%20everything%20easier%20to%20manage.%0A>%20I%20put%20a%20third%20div%20in%20this%20example,%20to%20show%20a%20different%20way%20to%20accomplish%20what%20you%20seem%20to%20be%20trying%20to%20do.%0A>%20%0A>%20Example:%0A>%20In%20the%20stylesheet:%0A>%20%0A>%20#section1%20%7B%20height:%20118px;%20width:%20130px;%20left:%2036px;%20top:%2020px;%20position:%0A>%20absolute;%20visibility:%20visible;%20background-image:%20url(/images/pic.gif);%20background-repeat:%20no-repeat;%20%7D%0A>%20#section2%20%7B%20height:%20150px;%20width:%20752px;%20left:%2036px;%20top:%2020px;%20position:%0A>%20absolute;%20visibility:%20visible;%20%7D%0A>%20.lower-layer%20%7B%20z-index:%201000;%20%7D%0A>%20.upper-layer%20%7B%20z-index:%202000;%20background-color:%20transparent;%20%7D%0A>%20%0A>%20In%20the%20content:%0A>%20%0A>%20%20%20<div%20id=%22section1%22%20class=%22lower-layer%22%20/>%0A>%20%20<div%20id=%22section2%22%20class=%22upper-layer%22>%0A>%20%20%20%20<h2>Some%20text</h2>%0A>%20%20</div>%0A>%20%20%20<div%20id=%22someOtherSection%22%20class=%22lower-layer%22%20style=%22background-image:%20url(/images/anotherImage.png);%20background-repeat:%20no-repeat;%22>%0A>%20%20%20%20<p%20class=%22upper-layer%22>Some%20Other%20text</p>%0A>%20%20%20</div>%0A>%20%0A>%20%0A>%20%0A>%20Craig%20White%20wrote:%0A>%20>%20On%20Mon,%202006-02-06%20at%2021:17%20-0500,%20FoulDragon@aol.com%20wrote:%0A>%20>%20%0A>%20>>Also%20remember:%0A>%20>>%20%0A>%20>>1024x768%20screen%20!=%201024x768%20window.%0A>%20>>%20%0A>%20>>I%20have%20my%20desktop%20at%201600x1200%20(<3%20my%2021%22%20CRT)%20but%20almost%20never%20run%20an%0A>%20>>app%20at%201600x1200.%0A>%20>%20%0A>%20>%20----%0A>%20>%20along%20these%20lines...I'm%20struggling%20with%20'printing'%20html%20and%20I%20don't%0A>%20>%20exactly%20know%20how%20to%20handle%20this.%20On%20screen...I%20have%20no%20problems%20but%0A>%20>%20print%20preview%20-%20I%20have%20a%20problem%0A>%20>%20%0A>%20>%20Consider%202%20layers%20defined%20in%20<head>%0A>%20>%20%0A>%20>%20%0A>%20>%20In%20print%20preview...text%20in%20layer2%20is%20'below'%20rather%20than%20on%20same%0A>%20>%20horizontal%20plane%20as%20picture%20in%20layer1.%20Inside%20normal%20browser%20mode%20(not%0A>%20>%20printed/not%20print%20preview),%20the%20objects%20are%20perfectly%20where%20I%20want%20them.%0A>%20>%20%0A>%20>%20I%20have%20tried%20both%20<span>%20and%20<div>%20tags%20but%20the%20same%20results.%0A>%20>%20%0A>%20>%20I%20am%20trying%20not%20to%20'force'%20the%20location%20with%20<table>%20as%20I%20am%20trying%20to%0A>%20>%20reform%20my%20ways.%0A>%20>%20%0A>%20>%20What%20is%20the%20trick?%0A>%20>%20%0A>%20>%20Craig%0A>%20>%20%0A>%20>%20---------------------------------------------------%0A>%20>%20PLUG-discuss%20mailing%20list%20-%20PLUG-discuss@lists.plug.phoenix.az.us%0A>%20>%20To%20subscribe,%20unsubscribe,%20or%20to%20change%20%20you%20mail%20settings:%0A>%20>%20http://lists.PLUG.phoenix.az.us/mailman/listinfo/plug-discuss%0A>%20>%20%0A>%20---------------------------------------------------%0A>%20PLUG-discuss%20mailing%20list%20-%20PLUG-discuss@lists.plug.phoenix.az.us%0A>%20To%20subscribe,%20unsubscribe,%20or%20to%20change%20%20you%20mail%20settings:%0A>%20http://lists.PLUG.phoenix.az.us/mailman/listinfo/plug-discuss%0A>%20%0A>%20 "Reply to this message")
(text/plain)