DHTML Fenster - HTMLopen.de

Kompatibilität: Ms Internet Explorer, Netscape

In diesem Beispiel wird gezeigt wie man Elemente in Fünf verschiedene Positionen positionieren kann: In der Mitte, oben Links, unten Links, oben Rechts und unten Rechts.

[ Das Beispiel zeigen ]

HTML Code für deine Website

<HTML> <HEAD>  <TITLE>HTMLopen - Dynamic HTML Beispiele</TITLE> <style> BODY{background-color:white} A{color:Navy; text-decoration:none} A:hover{color:red} A:visited:{color:#808080} </style> <script> /******************************************************************************** This script is made by and copyrighted to Thomas Brattli at www.bratta.com Visit for more great scripts. This may be used freely as long as this msg is intact! (I always appriciate links to my page) ********************************************************************************///Simple browsercheck var n = (document.layers) ? 1:0; var ie = (document.all) ? 1:0; /******************************************************************************** Here's the pageobject, see www.bratta.com/dhtml for tutorial on how it works. ********************************************************************************/ function makePageObject(){ this.x=0; this.x2=(n)?innerWidth:document.body.offsetWidth; this.y=0; this.y2=(n)?innerHeight:document.body.offsetHeight; this.x50=this.x2/2; this.y50=this.y2/2; this.x10=(this.x2*10)/100 this.y10=(this.y2*10)/100 this.x15=(this.x2*15)/100 this.y15=(this.y2*15)/100 return this; } /******************************************************************************** Making the objects, crossbrowser and makes a moveIt function that will move theobject easely ********************************************************************************/ function makeObj(obj,nest){ nest=(!nest) ? '':'document.'+nest+'.' this.css=(n) ? eval(nest+'document.'+obj):eval('document.all.'+obj+'.style') this.moveIt=b_moveIt; return this } function b_moveIt(x,y){ this.css.left=x this.css.top=y } /******************************************************************************** Here we call the object constructor to make objects, then we move them to a choosen place on the page. ********************************************************************************/ function init(){ //first we make a page object page=new makePageObject() //then we make the layer objects oCenter=new makeObj('divCenter') oRightTop=new makeObj('divRightTop') oRightBottom=new makeObj('divRightBottom') oLeftTop=new makeObj('divLeftTop') oLeftBottom=new makeObj('divLeftBottom') //now we place them //The divs has a width and height of 100, so we divide that with 2 to place it at center oCenter.moveIt(page.x50-50,page.y50-50) oRightTop.moveIt(page.x2-100,page.y) oRightBottom.moveIt(page.x2-100,page.y2-100) oLeftTop.moveIt(page.x,page.y) oLeftBottom.moveIt(page.x,page.y2-100) } //Calls the init function on pageload; onload=init; </script> </HEAD><BODY><div id="divCenter" style="position:absolute; font-family:arial; font-size:10pt; padding:5pt; width:100; height: 100; clip:rect(0,100,100,0); background-color:#CCCCCC; layer-background-color:#CCCCCC">Mitte</div> <div id="divRightTop" style="position:absolute; font-family:arial; font-size:10pt; padding:5pt; width:100; height: 100; clip:rect(0,100,100,0); background-color:#CCCCCC; layer-background-color:#CCCCCC">Oben rechts</div> <div id="divRightBottom" style="position:absolute; font-family:arial; font-size:10pt; padding:5pt; width:100; height: 100; clip:rect(0,100,100,0); background-color:#CCCCCC; layer-background-color:#CCCCCC">Unten rechts</div> <div id="divLeftTop" style="position:absolute; font-family:arial; font-size:10pt; padding:5pt; width:100; height: 100; clip:rect(0,100,100,0); background-color:#CCCCCC; layer-background-color:#CCCCCC">Oben links</div> <div id="divLeftBottom" style="position:absolute; font-family:arial; font-size:10pt; padding:5pt; width:100; height: 100; clip:rect(0,100,100,0); background-color:#CCCCCC; layer-background-color:#CCCCCC">Unten links</div> </BODY> </html>

Elemente in einem Dokument positionieren

[File ZIP runterladen], Bilder und andere Files sind im ZIP file inbegriffen