Layer zentrieren

Status
Nicht offen für weitere Antworten.
B

bouncerxs

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.
 
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>
 
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
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück