homepage Welcome to WebmasterWorld Guest from 54.163.91.250
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
How do I create a fluid layer over an image?
jpalmer




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

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
JP

 

createErrorMsg




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

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>
</div>

You can style it like this...
#textdiv{
width:80%;
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.

cEM

jpalmer




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

Gidday cEM

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

Hooroo
JP

jpalmer




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

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>

Cheers
JP

createErrorMsg




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

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-image:url(path/to/yourimage.gif);
background-position:center;
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.

cEM

jpalmer




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

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.

Hooroo
JP

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved