iframe mitte im browser fenster plazieren

bluex

Ensign
Registriert
Juni 2004
Beiträge
143
mhh habe das mal mit iframe probiert.bloss funktioniert das mit der mittig plazierung des iframes aufm browser noch nicht so recht.

im netz habe ich irgendwas gelesen...das man mit js die fensterbreite errechenn lassen muss usw.....bloss war dabei keine ausreichende dokumentation dabei :-(

hat jmd da eine ausführliche dokumentation für?
 
Hallo,

sollte das iframe eine feste Höhe haben, so kannst du es mittels CSS folgendermaßen zentrieren:

Code:
position: absolut; // oder "relative"
top: 50%;
margin: -x auto; // für "x" die halbe Elementhöhe einsetzen

Sollte die Höhe des Elements allerdings nicht fest sein, so kannst du diese mittels offsetHeight ermitteln.

MfG mh1001
 
PHP:
<html>
<head>
<title></title>

</head>
<body bgcolor="#958D80" background="textur.bmp">
<center><IFRAME width="800" height="567" name=mainframe src="main.htm" frameborder="0"></center>

</body>
</html>

so habs mal angepasst...ist das so okay?
PHP:
<html>
<head>
<title></title>

</head>
<body bgcolor="#958D80" background="textur.bmp">
<center><IFRAME width="800" height="567" name="inhalt" src="main.htm" 

frameborder="0"

style="position:relative; left:50%; top:50%;"


></center>

</body>
</html>
 
Zuletzt bearbeitet:
Zu erst solltest du dich einigen ob du jetzt Markup oder CSS zum Designen nimmst :)
Und wieso nimmst dus nicht so wie es mh1001 gesagt hast, bei deiner Lösung ist der linke obere Rand genau in der Mitte und noch ein paar kleinere Abweichungen. Schreib iframe klein.

So, genug gemeckert ^^
 
PHP:
<html>
<head>
<title></title>

</head>
<body bgcolor="#958D80" background="textur.bmp">
<iframe width="800" height="567" name="inhalt" src="main.htm" 

frameborder="0" style="position:relative; top:50%;margin: -283 auto;">
</body>
</html>

habs jetzt mal angepasst
 
Noch nicht ganz. ;)
Zuerst fehlt bei deinem Dokument noch ein Doctype und zum anderen würde das Element so nicht in der Mitte sitzen sondern seine obere linke Ecke in der Viewportmitte haben. ;)
Daneben gilt der "center"-Tag als missbilligt.

So sollte es klappen:

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>Beispiel</title>
</head>

<body> 
   <iframe width="800" height="567" name="mainframe" src="main.htm" style="position: absolute; top: 50%; left: 50%; margin-left: -400px; margin-right: -284px; border-width: 0;"></iframe> 
</body> 
</html>
Die Zuweisung der Hintergrundfarbe und des Hintergrundbilds ist besser in einem Stylesheet aufgehoben. Nebenbei ist ein Hintergrundbild im Bitmap-Format auch nicht das Wahre.

// Edit: Huch, da geht ja alles an mir vorbei - so langsam wie ich bin. ;) Obiges bezog sich auf deinen vorherigen Post, bzw. jetzt noch teilweise noch auf deinen anderen.
 
Zuletzt bearbeitet:
Das war ein kleiner Schreibfehler meinserseits - es muss natürlich "margin-top" und nicht "margin-right" heißen.

MfG mh1001

//Edit: Allerdings würde mich dennoch interesieren, wozu das iframe überhaupt benötigst. In meinen Augen ist das an dieser Stelle absolut unnütz und bringt nicht einen Vorteil mit sich.
 
vielen lieben dank, hat super funktioniert!
das we ist gerettet :)
 
Würde sich mit nem <div> genauso und einfacher lösen lassen :)

außerdem hast du vergessen den iframe wieder zu schließen.
 
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head>  
<title>Telefans.de | Die Fan Community zur Band TELE</title>
</head> 
<body bgcolor="#958D80" background="textur.bmp"> 
<iframe width="800" height="567" name="mainframe" src="main.htm" style="position: absolute; top: 50%; left: 50%; margin-left: -400px; margin-top: -284px; border-width: 0;"></iframe>
</body> 
</html>

eine freundin hat mir eben per mail geschrieben, dass sie den header nicht mehr erkennen kann. da ich nun davon ausgehe, dass sie eine sehr geringe auflösung hat (tippe mal 800x600///habs eben mal in dieser auflösung getestet...und ja man sieht wirklich nur noch die hälfte) sieht sie nun teile des iframes nicht mehr.das muss wohl an diesem code ausschnitt liegen.
HTML:
margin-top: -284px
mh irgendwie kann die code variante doch nicht so toll sein oder... :(
 
Zuletzt bearbeitet:
Hallo,

der genannte Effekt ist natürlich vollkommen normal, da ab dieser Viewporthöhe das DIV-Element auch nicht mehr ganz in diesen passt.
Um diese unschöne Darstellung zu umgehen, kannst du mit Hilfe des CSS-Attributs min-height (und min-width) eine Mindesthöhe (bzw. -Breite) festlegen.
Da der Internetexplorer dies natürlich mal wieder bis einschließlich Version 6 nicht unterstützt, kannst du dies für diesen zum Beispiel seperat Mittels JavaScript realisieren, indem du die Viewporthöhe/-breite ermittelst und gegebenenfalls eine entsprechende Höhe/Breite setzt.

MfG mh1001
 
Zurück
Oben