Layerprobbs

[doc]

Tach Leute,

wer kennt sich mit Layern und Graphiken (CSS?) aus?
Folgendes Problem:
Ich habe eine Tabelle in einer Tabelle, zwecks h&v-center. Nun will ich Graphiken in die innere Tab. setzen - kein Problem, soweit. Allerdings gibts dann Design-Probbs: im Klartext...

Damit ich optimale Objektausrichtung erreiche nehme ich Layer - das hat aber den Nachteil, daß die Tabellenwirkung nutzlos ist (was Ausrichtung angeht).
Daher zwei theoretische Lösungsvorschläge:
a) die Layer von der Tabelle abhängig machen
b) überlappende Text- und Graphikobjekte erstellen

... nur weiß ich leider auf keins von beiden ne Lösung :(

cu doc

[holger kuehne]

Hi
Um dir bei deinem Problem zu helfen, waere es gut, wenn du dein "Design Problem" etwas genauer beschreiben wuerdest. Dann koennte man auch sagen auf welche Art (Layer oder nur Tabellen) das ganze am elegantesten loesbar ist.
Ausserdem reicht eine Tabelle voellig aus um z.B. Bilder horizontal und vertikal zu zentrieren:
<table width=100% height=100%><tr>
<td valign=center align=center><img src="bild1.gif" width=100 height=24 alt="" border="0"><img src="bild2.gif" width=100 height=24 alt="" border="0"></td>
</tr></table>

Holger

[doc]

Hi
Um dir bei deinem Problem zu helfen, waere es gut, wenn du dein "Design Problem" etwas genauer beschreiben wuerdest. Dann koennte man auch sagen auf welche Art (Layer oder nur Tabellen) das ganze am elegantesten loesbar ist.
Ausserdem reicht eine Tabelle voellig aus um z.B. Bilder horizontal und vertikal zu zentrieren:
<table width=100% height=100%><tr>

»»  <td valign=center align=center><img src="bild1.gif" width=100 height=24 alt="" border="0"><img src="bild2.gif" width=100 height=24 alt="" border="0"></td>

</tr></table>

Holger

re holger,

die doppelte tabelle deshalb, weil ich gehört hab, daß viele ihre browser "nur etwas aufziehen" - wenn da mit "tabelle in tabelle" arbeite paßt sich die innere immer dynamisch an - ist somit immer in der mitte (ich find das ganz praktisch). aber du hast recht, prinzipiell kann man objektpositionierung auch ohne layer machen, allerdings mit erheblich mehr aufwand !!
darum wollt ich gern wissen ob es überhaupt diese möglichkeit gibt - layer an tabellen dynamisch anzupassen...

denn sobald du zB eine website aufrufst, die für 1024 optimiert ist (incl. layer) dann aber manuell den browser zusammenschiebst - siehst du nur noch ein bischen vom inhalt (den rest mußt du scrollen, falls möglich...ich habe festgestellt, daß es weitverbreitet ist NOSCROLLings einzubauen (!) )

cu doc

[holger kuehne]

nächster Versuch:

Zuerst nochmal zu den Tabellen:
Wenn man wie du beschreibst den "Browser nur etwas aufzieht" dann ist es meines Wissens nach voellig egal ob es sich um eine Tabelle in der Tabelle handelt oder um eine einfache Tabelle. Das Problem ist naemlich das altbekannte resize Problem von Netscape. (Beim IE ist immer alles zentriert, egal wie gross ich den Browser ziehe) Und das tritt in beiden Faellen auf.
Loesung:
/**
  * resize.js 0.3 970811
  * by gary smith
  * js component for "reloading page onResize"
  */
if(!window.saveInnerWidth)
{ window.onresize = resizeIt;
  window.saveInnerWidth = window.innerWidth;
  window.saveInnerHeight = window.innerHeight; }
function resizeIt()
{ if (saveInnerWidth < window.innerWidth
  saveInnerWidth > window.innerWidth
  saveInnerHeight > window.innerHeight
  saveInnerHeight < window.innerHeight )
{ window.history.go(0); }}

zur Anpassung von Layern an Tabellen:
Mit Netscape ist es leider unmöglich layer an Tabellen dynamisch anzupassen.
Was moeglich ist, ist ein dynamisches Anpassen an die Windowgroesse. Und das funktioniert mit NS und IE!
Abfrage fuer NS: window.innerWidth und window.innerHeight
Abfrage fuer IE:  document.all.bodyname.offsetWidth und document.all.bodyname.offsetHeight
Dann koennen die Layer je nach Windowgroesse ausgerichtet werden. (z.B genau in der mitte)
Aber das ist nicht ohne etwas (oder auch sehr viel) Aufwand moeglich. :-)

Nocheinmal zu dem was ich schon geschrieben habe:
Ob es einfacher ist etwas mit Tabellen zu positionieren oder mit Layern, haengt von deinem konkreten Problem ab. Deshalb: beschreib doch bitte noch einmal genau was du wie positionieren willst. (ein Link falls vorhanden oder ein Quelltext wenn er nicht zu lang ist waere am besten) Das einzige was ich verstanden habe ist, dass alles zentriert dargestellt werden soll und auch bei Veraenderung der Windowgroesse wieder automatisch zentriert wird.
Das muesste eigentlich mit Tabellen und dem Gary Smith's resize funktionieren

Holger

[doc]

nächster Versuch:

Zuerst nochmal zu den Tabellen:

Jo, danke dir - das klappt erstmal!

zur Anpassung von Layern an Tabellen:

*umpf*

Nocheinmal zu dem was ich schon geschrieben habe:
Ob es einfacher ist etwas mit Tabellen zu ...

wegen der "besseren" beschreibung:
sorry, aber den code zu posten wäre nich so klug, schätz ich - der is echt e bissl groß und komplex - ich müßte ihn kürzen und schlanker machen - alle möglichen ALTs klauen usw. - das wäre zu viel *g*

aber vielleicht hilft ein bsp:
stell dir vor da ist ein bild (Kreis mit einzelnen Sektionen) und dann hab ich versch. Texte für die Sektionen vorbereitet (diese sollen dann in die einzelnen Kreis-Sektionen quasi "reingeschrieben" werden - also halb außerhalb halb innerhalb des Kreises), wenn ich jetzt mit normalen Bildern/Tabellen arbeite kann ich diesen clipping-effekt nicht herstellen. mit layern: kein problem!
und da haben wir das problem: layerpositionen sind ja eigentlich absolut - die tabelle und normal positionierte pics/texte repositionieren sich selber wieder (nach einem browserresize) - layer tun das nich.
------
zu deinem lösungsvorschlag:
du willst die layer immer mittig reinitialisieren - das mag in wenigen fällen optisch klappen. mir ist allerdings schleierhaft wie ich die layern mittig und gleichzeitig noch in einem bestimmten areal positionieren soll - das ganze natürlich auch dynamisch!
------
ich bin schlimm, ich weiß ;o)

doc

[doc]

nächster Versuch:

Zuerst nochmal zu den Tabellen:

Jo, danke dir - das klappt erstmal!

--->>> muß mich korrigieren, beim IE 4 funzt es nich ganz - wenn ich da den browser maximiere und auf refresh drücke dann landet der ganze spaß oben ???

fragender doc

[holger kuehne]

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

[ichschonwieder]

Nachtrag:
Ein peinlicher Fehler ist mir unterlaufen:
im body tag fehlt: id="body1"
Ohne den Bodynamen kann der IE nicht die Hoehe und die Breite des Browserfensters berechnen.
Ich hoffe das war alles an Fehlern.
Holger

[doc]

Nachtrag:
Ein peinlicher Fehler ist mir unterlaufen:
im body tag fehlt: id="body1"
Ohne den Bodynamen kann der IE nicht die Hoehe und die Breite des Browserfensters berechnen.
Ich hoffe das war alles an Fehlern.
Holger

hi nochmal,

Zeile 46: Scriptfehler bei IE4 "Ungültiges Argument"
komisch ... ich find da nix - ansonsten geht fast
(es werden keine texte angezeigt)
im NS alles ok.

doc