✔ Layer zentrieren

bouncerxs · 3. September 2001

Wie kenn ich einen Layer bei jeder Auflösung zentrieren. Ich kenn das nur mit der postion: absolute ??? Bei der wird ja nach der Bildschirmkante gemessen und sieht bei anderen Auflösungen dumm aus.

MasterG · 3. September 2001

Mit Dreamweaver und Extension von Massimo Foti

Falls Du mit Dreamweaver arbeitest (ab 3) gibt es eine Extension von Massimo Foti. Der macht es mit einem relativ aufwendigen Javaskript.
Hier der generierte Sourcecode:

Code:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--
function MM_findObj(n, d) { //v3.0
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x;
}

function tmt_DivAlign(theDiv,h,v,hPx,vPx){
	var obj,fun,dw,dh,lw,lh,x,y;
	fun = (document.getElementById) ? "document.getElementById" : "MM_findObj";
	obj = (document.getElementById) ? document.getElementById(theDiv) : MM_findObj(theDiv);
	if(obj){if(document.all){
	dw = document.body.clientWidth;dh = document.body.clientHeight;}
	else{dw = innerWidth;dh = innerHeight;}
	if(document.layers){lw = obj.clip.width;lh = obj.clip.height;}else{
	lw = obj.style.width.replace("px","");lh = obj.style.height.replace("px","");}
	x = (document.layers) ? ".left" : ".style.left";
	y = (document.layers) ? ".top" : ".style.top";
	if(h == "l"){eval(fun+"('"+theDiv+"')"+x+"="+hPx);}
	if(h == "c"){eval(fun+"('"+theDiv+"')"+x+"="+dw+"/2-"+lw+"/2");}
	if(h == "r"){eval(fun+"('"+theDiv+"')"+x+"="+dw+"-"+lw+"-"+hPx);}
	if(v == "t"){eval(fun+"('"+theDiv+"')"+y+"="+vPx);}
	if(v == "m"){eval(fun+"('"+theDiv+"')"+y+"="+dh+"/2-"+lh+"/2");}
	if(v == "b"){eval(fun+"('"+theDiv+"')"+y+"="+dh+"-"+lh+"-"+vPx);}}
}
//-->
</script>
</head>

<body bgcolor="#FFFFFF" onLoad="tmt_DivAlign('test','c','m','0','0')">
<div id="test" style="position:absolute; width:200px; height:115px; z-index:1; left: 362px; top: 209px">Layer in der Mitte</div>

</body>
</html>

Dunsti · 3. September 2001

warum so aufwendig

da gibts doch auch ne ganz einfache Lösung:

mit document.width (bzw. screen.width bei Vollbild) und document.heigth (bzw, screen.heigth) findest Du zunächst mal heraus, wie groß der Bereich ist, in dem das Layer zentriert wird.
Wenn Du nun von der Hälfte dieses Bereiches die Hälfte von Deinem Layer abziehst, hast Du die absolute Position:

left = document.width / 2 - layer.width / 2;
top = document.heigth / 2 - layer.heigth / 2;

oder hab ich da jetzt nen Denkfehler?

Gruß
Dunsti

✔ Layer zentrieren

bouncerxs

MasterG

Dunsti

Neue Beiträge