We came to the frontier where old style code programming to display page from html ground has evolve and changes. Who not know about html table, it’s spread all over the web in the past, to display text, image, everything using table tag. But now, the table became fade away, when CSS introduce div tag and the special thing about div tag is there are layering way for div tag.
The Layer of Div Tag
When it came to display more than one element inside of the page, let say you want to add dynamic text inside of image, you need to add more and more element at the top of it. Well, CSS provide layering div tag that support multiple elament to put at the top of another div tag. Here is the capture image of how div tag layer work,there are three div tag.
Div Tag Layer illustration
The div tag with title div container Layer 1, the position at the bottom and will act as dv tag cointainer for each div tag inside of the div tag container. The bottom div tag should set as layer 1, the next div tag at the top of div tag container is div tag with layer 2, and the final div tag at the top of div tag layer 2 is the div tag layer 3. Each time you click the bottom of div tag in Adobe Dreamweaver, all div tag at the top of it would be selected too. Because i set it as nested div tag, i put the inner most of div tag inside of the outer most of div tag. Here is the snapshot of code, the layer in CSS represented in code as z-index so you should be aware of z-index number when designing css layer.
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<style type=”text/css”>
<!–
#apDiv1 {
position:absolute;
left:34px;
top:19px;
width:285px;
height:235px;
z-index:1;
}
#apDiv2 {
position:absolute;
width:250px;
height:184px;
z-index:2;
left: 18px;
top: 27px;
}
#apDiv3 {
position:absolute;
width:200px;
height:115px;
z-index:2;
left: 19px;
top: 31px;
}
–>
</style>
</head>
<body>
<div id=”apDiv1″>Div Container
<div id=”apDiv2″>Div tag layer 2
<div id=”apDiv3″>Div tag layer 3
</div>
</div>
Layer 1</div>
</body>
</html>
The Drag And Drop of CSS
How to do this in Adobe Dreamweaver, it is the easy way to produce div tag layering element. While in design mode from Adobe Dreamweaver Toolbar, click layout toolbar. And click Draw Ap Div, then place it on the design space area and put text on it as Div Container Layer 1. Layer 1 in div tag could be set as z-index = 1. Now click the the div layer on the design space area, while still in selected element, now click the icon Draw AP Div at Layout toolbar, and drag it inside of the div container that we created before. Set the the text inside of ApDiv layer 2 with Div tag layer 2, now click apdiv tag layer 2, then click and drag another apdiv inside of div tag layer 2, and set the text inside of div tag layer 3 with div tag layer 3. That’s all, you see how to drag and drop CSS div tag and layering with z-index. This is usefull when you want to translate the beautifull web design into html with css.
