CSS & Layers

freddieb · #1 (**permalink**) 02-03-2004, 05:00 PM

How many people are using layers with CSS for layout?
I am a Dreamweaver user and use layers all the time. Interested in how many others use them.
Doing this is easy with DW & layers:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Layer test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

</style>
</head>
<body bgcolor="#FFFFFF">
<div id="Layer1" style="position:absolute; left:6px; top:13px; width:133px; height:122px; z-index:1" class="blue"></div>
<div id="Layer2" style="position:absolute; left:21px; top:27px; width:147px; height:135px; z-index:2" class="green"></div>
<div id="Layer3" style="position:absolute; left:36px; top:39px; width:141px; height:160px; z-index:3" class="red"></div>
<div id="Layer4" style="position:absolute; left:50px; top:49px; width:173px; height:158px; z-index:4" class="yellow"></div>Try it
<div id="Layer5" style="position:absolute; left:65px; top:58px; width:175px; height:156px; z-index:5" class="purple"></div>
<div id="Layer6" style="position:absolute; left:82px; top:70px; width:196px; height:162px; z-index:6" class="pink"></div>
<div id="Layer7" style="position:absolute; left:94px; top:83px; width:203px; height:167px; z-index:7" class="brown"></div>
</body>
</html>

carbonize · #2 (**permalink**) 02-03-2004, 05:45 PM

Doing it in DW may be easy but have you checked the results in a wide selection of browsers? How will your page look to a search engine? or a text only browser?

Dragonsi · #3 (**permalink**) 02-03-2004, 05:50 PM

carbonize has a good point, I have used layers on a clients site but found that some browsers displayed the layered images I used in ever so slightly different positions. In this particular case, the resulting different locations of the layers made little negative effect, so I kept them there. However, if the positioning of these layers was critical then I would of removed them.

southplatte · #4 (**permalink**) 02-03-2004, 06:16 PM

I had at one time attempted use of layers. My thought was cool, positioning made easy.

to my dismay though, the differences I recieved from the browsers made my experiences extremely short lived. Even between IE5 and IE6 I found differences on the same page. Netscape was a beast of itself, though it usually displayed better than IE.

freddieb -- If you are using css, there is no need for layers really. You use the layers to specify your absolute and z-index position (as well as hight/width etc) in your example, however a better implementation would be to put the css in a separate file and specify the same absolute position and z-index for each section within it. All the other attributes can be used in the css sheet as well.

freddieb · #5 (**permalink**) 02-03-2004, 10:24 PM

I normally put all of my CSS in an external file, but put it on the same page for this post.

I currently test in IE6, Netscape 7, Opera 7, and Mozilla Firebird. I tweak the layers if there are any differences, but find very few in these browsers.

I used to find diferences in Netscape 4, but don't even test in that now.

carbonize · #6 (**permalink**) 02-04-2004, 07:44 AM

Yo ualso need to test in IE 5.5 as thats still a well used browser. I also know people that use Opera6 as they prefer it over 7.

drummin · #7 (**permalink**) 02-04-2004, 01:33 PM

I found I had trouble use <div id> tags and layers.
When using <div class> tags I had no trouble at all.
Maybe someone can explain why layers don't always work in <div id> tags.

spice · #8 (**permalink**) 02-04-2004, 07:10 PM

Did you define them properly in your css?

classes are like this:
.class { whatever }

id's must be defined like this:
#id { whatever }

Don't mix the two formats or name them the same. Also, if you're using IDs, they should be uniquely named (otherwise they would be classes!)

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode