Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

How do I create a fluid layer over an image?



5:24 am on Jan 22, 2005 (gmt 0)

10+ Year Member

Greetings and Gidday folks

This is probably simple, but I can't find a solution elsewhere and I'm getting frustrated trying to nut it out. (shoulda bought that O'Reillys CSS book I saw the other day!)

All I want is a bunch of text (in a layer) to centre over an image positioned in a page using a table *AND* for it (the text layer) to be "fluid" and automatically centre in 800x600 and 1024x768, and in IE, NS,OPera and FF of course!

Can get the layer OK, using static or absolute in 800x600, but as soon as the screen res changes, there goes the (text) layer postioning.

Anyone out ther got some code they'd care to share?

Thanks in advance


3:18 pm on Jan 22, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

When you say "layers," I assume this means you are using DW or FP to absolutely position elements on top of one another. If so, you're going to have to rely on some scripting to accomplish what you want.

See, CSS has no way of knowing what a users screen resolution is. This isn't a problem if your positioning scheme doesn't rely on precise pixel locations, but when you're using absolute positioning, that's exactly what you need. You have to tell the brwoser to place this element at exactly 40px from the top and 50px from the left. WHen screen resolution changes, the location on screen of these coordinates changes, too.

So to get an absolutely positioned box centered on screen, you'll have to rely on scripting to detect the screen resolution of each user and alter the stylesheet settings to deliver the correct numbers.

Another option would be to apply the background image directly to the element in which the text resides, as in...

<div id="textdiv">
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>

You can style it like this...
background:url(path/to/yourimage.gif) center no-repeat; /*or whatever*/

This connects the background image and the text directly, rather than seperating the two into different containers, which then have to be identically positioned. Now you only have one element to position where you need it.

If my assumptions here, which I take from your use of the term "layers," are wrong, let us know and try posting some of the actual code you're using your page...both the relevant bits of html and css.



6:29 am on Jan 23, 2005 (gmt 0)

10+ Year Member

Gidday cEM

Yes, am using DW and thanks, will try it out and let you know.



10:12 pm on Jan 23, 2005 (gmt 0)

10+ Year Member

Gidday again cEM

Thank you. Worked just dandy, apart from the image appearing as a black block in NS 4.7x. Don't suppose you've got a work around? <grin>



10:36 pm on Jan 23, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

apart from the image appearing as a black block in NS 4.7x. Don't suppose you've got a work around? <grin>

Other than uninstalling Netscape 4.7x? No.

Actually, yes, but only partially. The problem is that NN4.x has hideous support for almost all of the background properties. In particular, it doesn't support background-position at all, and has iffy support for background-image.

First, I would try splitting the shorthand background property into individual properties.

As in...

background-repeat: no-repeat;

I don't suspect this will have any effect, but it;s worth a shot. Otherwise, you would need to fall back on delivering an NN4.x only stylesheet that doesn't use the background properties that nn4 doesn't like.

There are probably better ways to isolate NN4, but offhand you could put the NN4 styles in a <link> tag with media="all", followed by a link tag with media="screen" for all other browsers. be sure the properties in the second stylesheet provide new information for any property set in the first in order to overide them.

But, god...NN4.7? Yuck.



11:51 pm on Jan 23, 2005 (gmt 0)

10+ Year Member

Hi cEM

Oh turd .... duelling style sheets ..., just what I wanted, NOT! <grin>

yeah .... NN4.x .... I know, but my stats tell me there are still visitors in the 100s to my sites who use it. I guess like me, they just couldn't bring themselves to use M$. I just wish they'd upgrade to FF or Moz., maybe time to tell 'em, eh? ;-)

Up til now, I've been sticking with tables and design styles that are compatible across the board, but there's only so much you can do, before the old "I wish I could do ...", comes up and voila, CSS is the way to do it, except for all the bugs of course .... sigh ....

BTW .... anyone who lobs in on this post looking for CSS info, I did a WebmasterWorld search for "CSS book", where I 'discovered' these threads at [webmasterworld.com...]
[webmasterworld.com...] and [webmasterworld.com...] with bucket loads of useful CSS info, there for the browsing.

Thanks again cEM, for your help, much appreciated.



Featured Threads

Hot Threads This Week

Hot Threads This Month