Reply
Using layers in CSS
Old 12-20-2005, 01:08 AM Using layers in CSS
Average Talker

Posts: 29
Could anyone tell me what the advantages and disadvantages are to using layers in CSS? I want to have a

background graphic and to display text over it, so do i just put somehting like

.imgbackground
{
z-index = -1;
}

I have read that using layers is going out of "fashion" and that there are some cross-browser issues with it.
jwalker80 is offline
Reply With Quote
View Public Profile
 
When You Register, These Ads Go Away!
Old 12-20-2005, 02:41 AM
vangogh's Avatar
Post Impressionist

Posts: 8,825
Name: Steven Bradley
Location: Boulder, Colorado
To have your text display on top of your image you need to give the text a higher z-index than the image. If you don't specify a z-index it defaults to 0. You can also give the image a -value for the z-index, but it's more common to have +values for what will be on top. You can pick any number you want. I typically use 5 or 10 just so I can sneak something in between the two layers later without having to change what I've already done.

An element needs to have a position before it can have a z-index so in this case you'd probably want something like:

#text {position:absolute; top:# of px; left:# of px; z-index:any # greater than 0}

where #text is the id of the block of text to display on top of the image.

You can actually have the text on top of the image without using z-index at all. If you put the text in a div you could give the div a background-image

div#text-on-top {background-image: url(path to your image); no-repeat}

The background-image will sit under whatever else is inside the div. the no-repeat is to prevent the image from you guessed it repeating. There are many cases where you want the image to repeat.

This second way may need a little more styling depending on where the text should sit relative to the image since you'll have a harder time having the text overlap only part of the image this way. It can be done. it just needs a little more css.

Positioning both the image and the text with the z-index might be easier.

Using layers is not going out of fashion. In fact they're replacing the use of tables for layout for a variety or reasons. I think what you were reading about was something specifically for older netscape browsers (I think it was for NN4, but I may be off a version) The concept was simliar as far as having objects on your page sit in layers on top of each other, but the technology behind both are different.

Using divs and css positioning is not going out of fashion and while different browsers (well basically Internet Explorer) have issues sometimes these are pretty easy to overcome in most cases and with IE 7 coming out sometime in out lifetime (or maybe it will be our childrens' lifetime) I imagine many of these issues will start to become less and less.
__________________
l Search Engine Friendly Web Design | Van SEO Design
l Tips On Marketing, SEO, Design, and Development | TheVanBlog
l Custom WordPress Themes
| Small Business Forum
vangogh is offline
Reply With Quote
View Public Profile Visit vangogh's homepage!
 
Reply     « Reply to Using layers in CSS
 

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off




   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML

 


Page generated in 0.12881 seconds with 12 queries