10. januar 2002 - 15:40
Der er
4 kommentarer
Layer, midterstilling!!!!
Findes der et script som gør, at jeg kan bruge layer der tilpasser sig når jeg laver et midterstillet site?
10. januar 2002 - 16:17
#2
Jeg vil gerne sætte layer ind i den inderste midterstillet tabel. Definere et punkt inde i tabellen, således at layer altid er det samme sted i forhold til den midterstillet tabel
<body bgcolor=\"#FFFFFF\" text=\"#000000\">
<table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" height=\"100%\">
<tr>
<td align=\"center\">
<table width=\"700\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" height=\"300\">
<tr>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
10. januar 2002 - 22:45
#3
Hvis vi kun taler IE virker dette fint:
<table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" height=\"100%\">
<tr>
<td align=\"center\">
<table width=\"700\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" height=\"300\">
<tr>
<td valign=\"top\">
<div id=\"Layer1\" style=\"position:absolute; width:700px; height:300px; z-index:1; background-color: #666666; layer-background-color: #666666; border: 1px none #000000\">
<div align=\"center\">
<h3> </h3>
<h3> </h3>
<h3> </h3>
<h3><font color=\"#FFFFFF\">Dette er et layer der følger
den centrerede tabel</font></h3>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
10. januar 2002 - 22:53
#4
Skal det være crossbrowser virker dette script i IE 4+, NS 4 og 6 samt Opera 5+ :
Scriptet virker på den måde, at layeret positioneres i forhold til den transparente gif på 1x1 pixel der er indsat i den inderste tabel.
Endvidere er der tilføjet en reload på bodytagget.
<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) {
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);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function P7_Snap() {
var x,y,ox,bx,oy,p,tx,a,b,k,d,da,e,el,args=P7_Snap.arguments;a=parseInt(a);
for (k=0; k<(args.length-3); k+=4)
if ((g=MM_findObj(args[k]))!=null) {
el=eval(MM_findObj(args[k+1]));
a=parseInt(args[k+2]);b=parseInt(args[k+3]);
x=0;y=0;ox=0;oy=0;p=\"\";tx=1;da=\"document.all[\'\"+args[k]+\"\']\";
if(document.getElementById) {
d=\"document.getElementsByName(\'\"+args[k]+\"\')[0]\";
if(!eval(d)) {d=\"document.getElementById(\'\"+args[k]+\"\')\";if(!eval(d)) {d=da;}}
}else if(document.all) {d=da;}
if (document.all || document.getElementById) {
while (tx==1) {p+=\".offsetParent\";
if(eval(d+p)) {x+=parseInt(eval(d+p+\".offsetLeft\"));y+=parseInt(eval(d+p+\".offsetTop\"));
}else{tx=0;}}
ox=parseInt(g.offsetLeft);oy=parseInt(g.offsetTop);var tw=x+ox+y+oy;
if(tw==0 || (navigator.appVersion.indexOf(\"MSIE 4\")>-1 && navigator.appVersion.indexOf(\"Mac\")>-1)) {
ox=0;oy=0;if(g.style.left){x=parseInt(g.style.left);y=parseInt(g.style.top);
}else{var w1=parseInt(el.style.width);bx=(a<0)?-5-w1:-10;
a=(Math.abs(a)<1000)?0:a;b=(Math.abs(b)<1000)?0:b;
x=document.body.scrollLeft + event.clientX + bx;
y=document.body.scrollTop + event.clientY;}}
}else if (document.layers) {x=g.x;y=g.y;var q0=document.layers,dd=\"\";
for(var s=0;s<q0.length;s++) {dd=\'document.\'+q0[s].name;
if(eval(dd+\'.document.\'+args[k])) {x+=eval(dd+\'.left\');y+=eval(dd+\'.top\');break;}}}
if(el) {e=(document.layers)?el:el.style;
var xx=parseInt(x+ox+a),yy=parseInt(y+oy+b);
if(navigator.appName==\"Netscape\" && parseInt(navigator.appVersion)>4){xx+=\"px\";yy+=\"px\";}
if(navigator.appVersion.indexOf(\"MSIE 5\")>-1 && navigator.appVersion.indexOf(\"Mac\")>-1){
xx+=parseInt(document.body.leftMargin);yy+=parseInt(document.body.topMargin);
xx+=\"px\";yy+=\"px\";}e.left=xx;e.top=yy;}}
}
//-->
</script>
</head>
<body bgcolor=\"#FFFFFF\" text=\"#000000\" onLoad=\"P7_Snap(\'layerholder\',\'DivCenter\',0,0)\" onResize=\"location.reload()\">
<div id=\"DivCenter\" style=\"position:absolute; width:700px; height:300px; z-index:1; background-color: #FF00FF; layer-background-color: #FF00FF; border: 1px none #000000\"></div>
<table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" height=\"100%\">
<tr>
<td align=\"center\">
<table width=\"700\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" height=\"300\">
<tr>
<td valign=\"top\"><img src=\"images/transparent.gif\" alt=\"\" width=\"1\" height=\"1\" name=\"layerholder\">
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>