Andreas: iframe vertikal in die Mitte und das nicht unbeweglich

SELF-Forum

iframe vertikal in die Mitte und das nicht unbeweglich

Andreas
– Informationen zu den Bewertungsregeln

Hallo

Per Javascript will ich ein inframe vertikal zentriert auf die Seite bekommen. Das klappt ja mit der Zeile:

parent.document.getElementById('Datenbereich').style.top=(parent.document.body.offsetHeight/2)-(document.body.scrollHeight/2)

Doch so bleibt das iframe dann ja fest stehen. Und auch wenn ich nur die Angabe 50% mache sitzt es fest.

Wie aber hät ich denn die Möglichkeit das bei Änderung der Seitengröße sich dem das iframe anpasst?

Es gäbe ja auch andere Varianten, iw zb den Inhalt des iframes zu zentrieren. Doch wäre diese mal eine interessante.

Danke gruß Andreas

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. iframe vertikal in die Mitte und das nicht unbeweglich

    Axel Richter
    – Informationen zu den Bewertungsregeln

    Hallo,

    Per Javascript will ich ein inframe vertikal zentriert auf die Seite bekommen. Das klappt ja mit der Zeile:

    parent.document.getElementById('Datenbereich').style.top=(parent.document.body.offsetHeight/2)-(document.body.scrollHeight/2)

    Doch so bleibt das iframe dann ja fest stehen. Und auch wenn ich nur die Angabe 50% mache sitzt es fest.

    Wie aber hät ich denn die Möglichkeit das bei Änderung der Seitengröße sich dem das iframe anpasst?

    Dafür ist CSS besser geeignet als JavaScript.

    Beispiel:

      
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
        "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>Beschreibung der Seite</title>  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
<style type="text/css">  
div#festerInhalt {  
 width:190px;  
}  
iframe {  
 height:300px;  
 width:500px;  
 position:absolute;  
 top:50%;  
 margin-top:-150px;  
 left: 210px;  
}  
</style>  
</head>  
<body>  
<div id="festerInhalt">  
<h1>Überschrift</h1>  
<ul>  
 <li>Navigationspunkt 1</li>  
 <li>Navigationspunkt 2</li>  
 <li>Navigationspunkt 3</li>  
</ul>  
<p>Textabsatz</p>  
</div>  
<iframe src="cssPositionFixed.html"></iframe>  
</body>  
</html>

    Der Trick ist, dass der IFrame mit seiner Oberkante in der Mitte des ViewPorts positioniert ist (position:absolute; top:50%) und dann aber per (margin-top:-150px) um die Hälfte seiner Höhe wieder nach oben gerückt wird. Da bei jeder Seitengrößenänderung neu gerendert wird und damit das CSS neu wirkt, wird das dynamisch.

    viele Grüße

    Axel

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. iframe vertikal in die Mitte und das nicht unbeweglich

      Andreas
      – Informationen zu den Bewertungsregeln

      Hallo Axel

      ich muß das per javascript zuweisen. Es ändern sich die Höhen der Seiten und ggf. muß das iframe genau an den Seitenanfang.

      Und das mit diesem Trick. Großen Dank dafür, denn er ist genial!

      Gruß Andreas

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln