<div vs. <div as a Layer

Forum Moderators: not2easy

Message Too Old, No Replies

<div vs. <div as a Layer

I need help on the different uses of the <div> tag

bumpaw

8:07 pm on Feb 1, 2004 (gmt 0)

Is there an explanation around for the different uses for <div>. I have been happily using layers, but I see there are times that a non-layered <div> tag would be more appropriate. I'm interested in the CSS aspects of the two.

SuzyUK

8:51 pm on Feb 1, 2004 (gmt 0)

Hi bumpaw - Welcome to WebmasterWorld

Is there an explanation around for the different uses for <div>.

There's only one <div> element... the only difference, I presume from your use of the word "layer" is which WYSIWYG editor you use

a layer is a div... a div is an HTML "division".. but layer is the word that a certain software (DW?) product uses for a positioned div....

the CSS aspects of the two are that a "layer" is Absolutely positioned and the software controls the co-ordinates.. a "non-layered" div is one where you insert it (as opposed to the software) and you control any positioning required

Suzy

<edit>typos</edit>

[edited by: SuzyUK at 11:16 pm (utc) on Feb. 1, 2004]

bumpaw

9:54 pm on Feb 1, 2004 (gmt 0)

Hey Suzy, Thanks for the response. Yes the term "layer" was in my mind associated with DW, but then I came on this nice tutorial that had a topic on "CSS Layers". I'll drop the code in here with a DW layer and his styled <div> so you can see the source of my questioning.

<style type="text/css">
<!--
div {
position: relative;
left: 218px;
top: 225px;
}
-->
</style>
</head><body>
<!--from Dreamweaver//-->
<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1"></div>
<!--LAYER 1 ON TOP:(from asrvision tutorial)//--> 
<div style="position:relative; font-size:50px; z-index:2;">LAYER 1</div> 
<div style="position:relative; top:-50; left:5; color:red; font-size:80px; z-index:1">LAYER 2</div> <!--LAYER 2 ON TOP:(from asrvision tutorial) //-->
<div style="position:relative; font-size:50px; z-index:3;">LAYER 1</div> 
<div style="position:relative; top:-50; left:5; color:red; font-size:80px; z-index:4">LAYER 2</div>