nicht angemeldet
Hi ich bins wieder
Ich hab mal ein Script gebastelt, mit dem hoffentlich ein Paar deiner Probleme loesbar sind:
Dort ist eine Tabelle mit 3Zeilen a 2 Spalten definiert. (das macht also 6 Tabellenzellen)
Diese Tabelle ist vertikal und horizontal zentriert, und die Tabellenzellen haben definierte Breiten. Dann habe ich noch 6 absolut positionierte div's definiert, fuer jede Tabellenzelle eine.
Die div's werden nach jedem browserresize automatisch wieder richtig ausgerichtet.
Die div's werden dabei so positioniert, dass sie, wenn die Browsergroesse genau der inneren Tabellenbreite (in meinem Fall 550) entspricht richtig ausgerichtet werden.
Die Funktion layerpositionieren berechnet also nur den linken oberen Rand der inneren Tabelle und verschiebt dann alle Layer um den entsprechenden (x,y) Wert. Wichtig ist dann nur noch, dass diese Funktion im body onload aufgerufen wird.
So genug geschwafelt hier der Quelltext:
<html>
<head>
<title>Hilfe die div's kommen</title>
<style type="text/css">
<!--
div {
position:absolute;
width:10;
height:90;
visibility:hidden;
}
-->
</style>
<script language="JavaScript">
<!--
window.onresize = resize;
window.saveInnerWidth = window.innerWidth;
window.saveInnerHeight = window.innerHeight;
function resize() {
if (saveInnerWidth < window.innerWidth
saveInnerWidth > window.innerWidth
saveInnerHeight > window.innerHeight
saveInnerHeight < window.innerHeight )
{
window.location.reload();
}
}
function layerpositionieren() {
if (document.layers){
var links=window.innerWidth;
var oben=window.innerHeight;}
else if (document.all){
links=document.all.body1.offsetWidth;
oben=document.all.body1.offsetHeight;}
if (links>550) links-=550;
else links=0;
if (oben>300) oben-=300
else oben=0;
oben=oben/2;
links=links/2;
for (i=0;i<6;i++){
if (document.all){
document.all.tags("div")[i].style.left+=links;
document.all.tags("div")[i].style.top+=oben;
document.all.tags("div")[i].style.visibility="visible";}
if (document.layers){
document.layers[i].left+=links;
document.layers[i].top+=oben;
document.layers[i].visibility="show";}
}
return
}
//-->
</script>
</head>
<body onload="layerpositionieren()" text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000" topmargin=0 leftmargin=0 marginheight=0 marginwidth=0>
<div id="lay1" style="left:80; top:10;"><table bgcolor=#CCCCCC><tr><td>hier steht der Layertext1</td></tr></table></div>
<div id="lay2" style="left:80; top:110;"><table bgcolor=#CCCCCC><tr><td>hier steht der Layertext2</td></tr></table></div>
<div id="lay3" style="left:80; top:210;"><table bgcolor=#CCCCCC><tr><td>hier steht der Layertext3</td></tr></table></div>
<div id="lay4" style="left:330; top:10;"><table bgcolor=#CCCCCC><tr><td>hier steht der Layertext4</td></tr></table></div>
<div id="lay5" style="left:330; top:110;"><table bgcolor=#CCCCCC><tr><td>hier steht der Layertext5</td></tr></table></div>
<div id="lay6" style="left:330; top:210;"><table bgcolor=#CCCCCC><tr><td>hier steht der Layertext6</td></tr></table></div>
<table width=100% height=100% bgcolor=yellow border=0 cellpadding=0 cellspacing=0>
<tr><td valign=center align=center><table width=550 border=0 cellpadding=0 cellspacing=0>
<tr><td bgcolor=red width=250 align=center><img src="dummys.gif" width=250 height=100 alt="Bild1" border="0"></td><td bgcolor=blue width=300 align=center><img src="dummys.gif" width=300 height=100 alt="Bild2" border="0"></td></tr>
<tr><td bgcolor=green width=250 align=center><img src="dummys.gif" width=250 height=100 alt="Bild3" border="0"></td><td bgcolor=magenta width=300 align=center><img src="dummys.gif" width=300 height=100 alt="Bild4" border="0"></td></tr>
<tr><td bgcolor=#00CCFF width=250 align=center><img src="dummys.gif" width=250 height=100 alt="Bild5" border="0"></td><td bgcolor=#009900 width=300 align=center><img src="dummys.gif" width=300 height=100 alt="Bild6" border="0"></td></tr>
</table></td></tr></table>
</body>
</html>
Holger