Der DIV-Tag ist aus DHTML nicht wegzudenken.
Erst mit ihm ist es möglich, ganze HTML-Bereiche
zu Blöcken zusammenzufassen, zu positionieren,
ein oder ausblenden, oder aber auch in Bewegung zu versetzen.

Die Vorgehensweise ist dabei sehr einfach.
1. HTML erzeugen
2. Den gewünschten Bereich in den Div-Tag setzen.

<p>Ein Text, ich weiß, benutz ich viel zu oft, aber mir fällt nichts anderes ein</p>
<img src="bild.png">
<p>Okay, noch eine Textzeile</p>

Im nächsten Schritt die HTML-Anweisungen in den Div-Tag setzen.

<div id="block1">
    <p>Eine Text, ich weiß, benutz ich viel zu oft, aber mir fällt nichts anderes ein</p>
    <img src="bild.png">
    <p>Okay, noch eine Textzeile</p>

</div>

Über JavaScript und DOM kann nun der gesamte DIV-Block beeinflusst werden,
z.B. genau positioniert, oder aus- und eingeblendet werden.

Beispiel Positionierung
elem=document.getElementById("block1");
elem.style.position="absolute";  'Soll nach Maßangaben absolute zum Fenster positioniert werden
elem.style.top="5cm=;  'Vom oberen Fensterrand 5cm entfernt.

Beispiel aus- und einblenden
elem=document.getElementById("block1");
elem.style.visibility="hidden"; oder zum einblenden elem.style.visibility="visible";

 


Das nächste Beispiel soll zeigen, wie sie einen ganzen Block
ein, bzw. ausblenden können. Dazu ein komplettes Dokument. 

Das Programm:        (Hier klicken um das Beispiel zu sehen)

<html>
<head>
<title>Div-Tag 1</title>
<script type="text/javaScript">
function verschwinden(a)
{
    elem=document.getElementById("tab1");
    if (a==0) { elem.style.visibility="hidden"; }
    if (a==1) { elem.style.visibility="visible"; }
}
</script>

</head>
<body>
<p><font size="4" color="#008000">Das ist ein Test, der zeigen soll, wieDIV-Blöcke <br>
mit DOM aus- und eingeblendet werden.</font></p>
<p>&nbsp;</p>
<div id="tab1">
<table border="1" width="100%">
    <tr>
        <td  bgcolor="#FFFF00"><font size="3"><b>Na, eine Tabelle halt </b></font></td>
        <td  bgcolor="#00FFFF"><font size="3"><b>Ich gehör auch dazu</b></font></td>
        <td  bgcolor="#C0C0C0"><font size="3"><b>ich nicht...</b></font></td>
    </tr>
    <tr>
        <td  bgcolor="#FFFF00"><font size="3"><b>Ich bin dann wohl einFeld</b></font></td>
        <td  bgcolor="#00FFFF"><font size="3"><b>Ich will aber kein Feld sein</b></font></td>
        <td  bgcolor="#C0C0C0"><font size="3"><b>ich auch nicht</b></font></td>
    </tr>
    <tr>
        <td  bgcolor="#FFFF00"><font size="3"><b>Immer bin ich&nbsp; unten :-((</b></font></td>
        <td  bgcolor="#00FFFF"><font size="3"><b>der links ist Pessimist und der rechts spinnt</b></font></td>
        <td  bgcolor="#C0C0C0"><font size="3"><b>grrr.... grummel...</b></font></td>
    </tr>
</table>

</div>
<p>&nbsp;</p>
<p><b><font color="#0000FF"
onMouseOver="verschwinden(0)">Berühr mich damit die Tabelle   verschwindet</font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<font color="#FF0000"
onMouseOver="verschwinden(1)">Berühr mich und sie ist wieder da...</font></b></p>
</body>
</html>