Is using layers OK?

autopost · Jan 10, 2008

Is using layers OK? 
Or is it frowned upon? 
 
Or should I be using CSS? 
 
I want to use layers to have Flash adverts that expand out. 
(Erm... I know most of the time these things are sooo annoying... but I'll be doing it in a subtle and less obtrusive way!) 
 
Any opinions would be greatful. 
 
Thanks. 
 
 
JamWhen you say layre, do you mean <layer> or <div>? 
 
If it's <div> then go for it.Well... I'm not sure... 
Using layers, I want to overlap things. 
So, I assume that I must use <layer>? 
 
Or can I use <div> to do overlapping as well?No, an actual layer is not ok. Its a dead element. Same thing with <ilayer>. 
 
Yes a div can over lap, scroll, do whatever you want it to with css. 
 
Is this what you mean by overlap? 
<a class="postlink" href="http://quasi-ke.servebeer.com/divtst.htm">http://quasi-ke.servebeer.com/divtst.htm</a> 
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
<head> 
<title>over under</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> 
<style type="text/css"> 
#under { 
height:200px; 
width:200px; 
z-index:1; 
border:1px solid #000000; 
background-color:blue; 
} 
#over { 
height:200px; 
width:200px; 
z-index:2; 
border:1px solid #000000; 
margin-top:-100px; 
margin-left:100px; 
background-color:green; 
} 
</style> 
</head> 
<body> 
<div id="under">This div is under</div> 
<div id="over">This div is over</div> 
</body> 
</html> 
 
This is the css making the divs do that 
 
<style type="text/css"> 
#under { 
height:200px; 
width:200px; 
z-index:1; 
border:1px solid #000000; 
background-color:blue; 
} 
#over { 
height:200px; 
width:200px; 
z-index:2; 
border:1px solid #000000; 
margin-top:-100px; 
margin-left:100px; 
background-color:green; 
} 
</style>Thanks for the reply. 
I'm still a bit confused. 
What does the 'z-index:1' do? 
I assumed this determined which was on top? 
I tried swapping the values of these. 
But this had no effect?the higher the z-index, the higher it will be. A div with z-index:2; will go above a z-index:1; and 3 above that and so on and so fourth. Default value is 0.Well... I did the following (I changed the z-index values): 
 
 
<html> 
<head> 
<title>over under</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> 
<style type="text/css"> 
#under { 
height:200px; 
width:200px; 
z-index:5; 
border:1px solid #000000; 
background-color:blue; 
} 
#over { 
height:200px; 
width:200px; 
z-index:2; 
border:1px solid #000000; 
margin-top:-100px; 
margin-left:100px; 
background-color:green; 
} 
</style> 
</head> 
<body> 
<div id="under"></div> 
<div id="over"></div> 
</body> 
</html> 
 
 
And under was still under??http://quasi-ke.servebeer.com/divtst.htm 
look again. I forgot 
position:relative; put that in both of the blocks. z-index is a type of positioning (z axis) so it needs a type of positioning. Just like if you use top bottom left and right you need a positioning. 
<a class="postlink" href="http://www.w3schools.com/css/css_positioning.asp">http://www.w3schools.com/css/css_positioning.asp</a> here is more on it, look the last two links. You can see how z-index can be used to create a background image, which can be very conveiniant sometimes.Thanks for the reply. 
Your link doesn't seem to work though? 
Can you give the code?

Thanks.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
<head> 
<title>over under</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> 
<style type="text/css"> 
#under { 
height:100px; 
position:relative; 
width:100px; 
z-index:1; 
border:1px solid #000000; 
background-color:blue; 
} 
#over { 
height:100px; 
position:relative; 
width:100px; 
z-index:2; 
border:1px solid #000000; 
margin-top:-50px; 
margin-left:50px; 
background-color:green; 
} 
#under2 { 
height:100px; 
position:relative; 
width:100px; 
z-index:3; 
margin-top:-50px; 
margin-left:100px; 
border:1px solid #000000; 
background-color:blue; 
} 
#over2 { 
height:100px; 
position:relative; 
width:100px; 
z-index:2; 
border:1px solid #000000; 
margin-top:-50px; 
margin-left:150px; 
background-color:green; 
} 
</style> 
</head> 
<body> 
<div id="under">This div is under</div> 
<div id="over">This div is over</div> 
<div id="under2">This div is now over</div> 
<div id="over2"> This div is now under</div> 
</body> 
</html> 
 
neither link works?

OK... kewl... I get it now.

BUT... why do I need to use <div>?? 
I can achieve the same results by applying the style on the object I want to apply it to? 
Let me know. 
Thanks.Originally posted by jammer20002 
I can achieve the same results by applying the style on the object I want to apply it to?If you can get the same effect without adding extra tags then do it, your page will load slightly faster, be rendered slightly faster and your code will be more semantic. 
<div> tags are handy because they have no default rendering applied to them (other than display:block), be careful when you apply the same styles to another element which may have default styles applied to it.Yes, like lava lamp said, you can do the same thing i did with this div with a list, table, , any block element you want. But a div is just a stand alone block, it is the easiest to use. Like if you used a table it would want to stretch and the cells would snap tegether, it would also not be semantically corect. A paragraph will have spaces around it and is designed for text and it would not be semantically correct to use for this either.

Is using layers OK?

autopost

Guest