div in einem iframe und bei overflow scrollen

[andynail]

Hallo zusammen

auf meiner Seite lade ich in iframes eine Linksammlung. Und die Seite passt auch das iframe der Größe des verfügbaren Platzes an.

Jetzt will ich aber in das iframe eine Seite laden, in dieser verschiedene Elemente am Seitenkopf stets zu sehen sein sollen. Und dafür dachte ich in ein div die Linksammlung, für diese ich eine Tabelle verwende, einbetten zu können.

Denn wie ich im Netz gesehen hatte gäbe es die Möglichkeit das man in einem div scrollen kann. Aber das div muß sich ja der Größe des iframes anpassen und bei einem overflow Effekt die Möglichkeit bieten scrollen zu können. Aber wenn ich mir die Größe des divs per alert anzeigen lasse, erscheint immer der gleiche Wert.

Also wie bekomme ich das hin das dass div mit den Steuerelementen immer zu sehen ist und sich damit die Größe des divs mit der Tabelle an den verfügbaren Platz des iframes anpasst?

Danke Gruß Andreas

[Matthias Apsel]

Om nah hoo pez nyeetz, andynail!

auf meiner Seite lade ich in iframes eine Linksammlung. Und die Seite passt auch das iframe der Größe des verfügbaren Platzes an.

Es ist noch nicht so lange her, da wurdest du darauf hingewiesen, dass IFrames ein ungünstiger Ansatz sind.

Jetzt will ich aber in das iframe eine Seite laden, in dieser verschiedene Elemente am Seitenkopf stets zu sehen sein sollen. Und dafür dachte ich in ein div die Linksammlung, für diese ich eine Tabelle verwende, einbetten zu können.

Eine Sammlung von Links ist wahrscheinlich keine Tabelle

Denn wie ich im Netz gesehen hatte gäbe es die Möglichkeit das man in einem div scrollen kann. Aber das div muß sich ja der Größe des iframes anpassen und bei einem overflow Effekt die Möglichkeit bieten scrollen zu können. Aber wenn ich mir die Größe des divs per alert anzeigen lasse, erscheint immer der gleiche Wert.

Wenn das IFrame nicht wäre, bräuchte sich das Div nicht der Größe anpassen.

Also wie bekomme ich das hin das dass div mit den Steuerelementen immer zu sehen ist und sich damit die Größe des divs mit der Tabelle an den verfügbaren Platz des iframes anpasst?

verzichte auf Frames, ebenso auf überflüssige Divs.

Zeige ein Beispiel. Lass dir Alternativen aufzeigen.

Matthias

[Gernot Back]

Hallo Matthias,

Eine Sammlung von Links ist _wahrscheinlich_ keine Tabelle

Höchstwahrscheinlich doch!

Insbesondere mit Rücksicht auf Tablettrechner und sonstige mobile Geräte ist die Verwendung des TABLE-Elements auch die einzige Möglichkeit, eine solche Linkliste ohne Browserweichen und JavaScript dazu zu bringen, sich gleichmäßig und plattformübergreifend über die gesamte Bildschirmbreite zu erstrecken.

Gruß Gernot

[andynail]

Hallo

also dann zeige ich Code. Dies ist jetzt ein wenig viel, aber ich wusste ja nicht was denn interessasnt sei.

der Code der die Elemente bereitstellt:

<div id="SiteBereich" style="position:absolute; left:4%; top:8%; margin-left:120px; height:92%; z-index:0" onmouseover="MenueUp()">  
  
<div id="Bereich" style="position:relative; z-index:1; width:100%; overflow:hidden">  
  
<table id="DatenBereich" border="0" align="center" cellspacing="0px">  
  
<tr ID="TRKennung" style="height:32px; display:none">  
<td id="TDKennung" style="background-image:url(Pictures/hintergrund-g-250.gif); background-repeat:repeat-x; color:#000; text-align:center; font-size:20; overflow-x:hidden"><div ID="Kennung" style="display:inline; white-space:nowrap"></div></td>  
</tr>  
<tr ID="TRAuswahl" style="display:none; background-color:#00ee00">  
<td id="TDAuswahl" style="padding-top:5px; padding-left:5px" >  
	<select style="width:50%; font-size:16; height:40px" ID="Titel" onBlur="this.style.backgroundColor='#ffffff'" onFocus="this.style.backgroundColor='#ffffcc'" onChange="javascript:Springen(this.selectedIndex)"></select>  
</td>  
</tr>  
<tr>  
<td id="FrameBereich" style="padding:0; border:0; border-style:solid; border-color:#00ee00; overflow:auto; background-color:#fff">  
<iframe onfocus="top.ScrollFrame = 'DatenFrame'" id='DatenFrame' name='DatenFrame' OnLoad='MenueUp(); top.ActiveLink = undefined; HideDaten()' frameborder='0' style='border:0' src='' allowtransparency="true"></iframe>  
  
</td>  
<td id="SubBereich" style="padding:0; border:5; border-left:0; border-style:solid; border-color:#00ee00; display:none">  
<iframe onfocus="top.ScrollFrame = 'SubFrame'" allowtransparency="true" id="SubFrame" name="SubFrame" frameborder="0" style="border:0; width:0"></iframe>  
</td>  
<td id="Scroll" style="background:transparent; vertical-align:top" rowspan="3">  
<div style="position:absolute; margin-left:-2px; z-index:10; opacity:0.6; filter:alpha(opacity=60);">  
	<input id="ScrollTop" type="Button" onfocus="this.blur()" style="width:50px; height:50px; background: url('Pictures/top.png') no-repeat #eee; background-position:center" title="zum Seitenanfang scrollen"><br>  
	<input id="ScrollBottom" type="Button" style="width:50px; height:50px; background: url('Pictures/bottom.png') no-repeat #eee; background-position:center" title="zum Seitenende scrollen">  
</div>  
<div style="position:relative; z-index:1; top:3px; margin-left:2px; opacity:0.15; filter:alpha(opacity=15); background-color:#000; height:100px; width:50px"></div>  
</td>  
</tr>  

Und der Code zur Anpassung:

[code lang=javascript]
function BereichAnpassen()
{
var SiteHeight = top.document.body.offsetHeight - top.document.getElementById("SiteBereich").offsetTop - 90
if (SiteHeight < top.DatenHeight)
{

	top.document.getElementById("DatenFrame").style.width = top.DatenWidth + ((top.BIndex != 0) \* 25) + "px"  
	top.document.getElementById("DatenFrame").style.height = SiteHeight - top.document.getElementById("TRKennung").offsetHeight - top.document.getElementById('TRAuswahl').offsetHeight - ((top.BIndex != 0) \* 10) + "px"  
	top.document.getElementById("SubFrame").style.height = SiteHeight - top.document.getElementById("TRKennung").offsetHeight - top.document.getElementById('TRAuswahl').offsetHeight - ((top.BIndex != 0) \* 10) + "px"  

}  
else  
{  
	top.document.getElementById("DatenFrame").style.width = top.DatenWidth + "px"  
	top.document.getElementById("DatenFrame").style.height = top.DatenHeight - top.document.getElementById("TRKennung").offsetHeight - top.document.getElementById('TRAuswahl').offsetHeight + "px"  
	top.document.getElementById("SubFrame").style.height = top.DatenHeight - top.document.getElementById("TRKennung").offsetHeight - top.document.getElementById('TRAuswahl').offsetHeight + "px"  

}  
if (top.document.getElementById("SubBereich").style.display == "") top.document.getElementById("SubFrame").style.width = top.frames['SubFrame'].document.getElementById("Inhalt").offsetWidth + ((top.frames['SubFrame'].document.getElementById("Inhalt").offsetHeight > top.document.getElementById("SubBereich").offsetHeight) \* 25) + "px"  
top.document.getElementById("SiteBereich").style.width = top.document.body.clientWidth - top.document.getElementById("SideBar").offsetLeft - 120 + "px"  
top.document.getElementById("Bereich").style.top = (SiteHeight/2) - (top.document.getElementById("DatenBereich").offsetHeight /2) + 32 + "px"  
top.document.getElementsByName("MenueBereiche")[top.document.getElementsByName("MenueBereiche").length-1].style.left = top.document.getElementById("BereichBar").offsetWidth + 150 - top.document.getElementsByName("MenueBereiche")[top.document.getElementsByName("MenueBereiche").length-1].offsetWidth + "px"  

}

Und wieso nicht eine Linkliste in eine Tabellenspalte zu schreiben und mit Rahmen versehen?

Und damit weiterhin in Hoffung Hilfe zu bekommen.

Gruß Andreas

[Matthias Apsel]

Om nah hoo pez nyeetz, andynail!

also dann zeige ich Code. Dies ist jetzt ein wenig viel, aber ich wusste ja nicht was denn interessasnt sei.

Ein online-Beispiel wäre wesentlich sinnvoller. Nur sehr wenige werden sich durch diesen Code wühlen, um zu sehen, wie es eigentlich aussehen soll. Stell ein online-Beispiel bereit, dann bekommst du Alternativen vorgeschlagen.

Tabellenlayout, inline-styles, unnötige IDs und Klassen blähen den Quelltext auf und machen Änderungen unnötig schwer.

• verzichte auf Tabellenlayout
• verzichte auf inline-style-Angaben
• verzichte auf den Großteil der IDs, dafür gibt es sicher passende Selektoren zur Not auch mal 'ne Klasse

Ohne es geprüft zu haben: Du kannst sicher auch auf das Javascript verzichten. Falls nicht

• Lege Variablen fest, das spart das mehrfache Durchsuchen des DOM nach einem Element mit getElementById

Matthias