• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Iframe usflösungsunabhängig zentrieren

Status
Für weitere Antworten geschlossen.
D

Dave1978

Neues Mitglied
Auf meiner Seite www.westwall3d.de habe ich ein Problem.

Die Inhalte werden alle in einem 600 Pixel Breiten IFrame dargestellt.
Ich möchte nun das dieser Frame immer zentriert dargestellt wird.

Also unabhängig von der verwendeten Darstellung.

Derzeit ist es noch so das bei Betrachtern die einen Widescreen haben, recht eins ehr breiter rand ist. Da ich nur weiss wie ich den Frame um einen festen betrag versetzen kann.

Was kann ich da tun?
 
Gib einfach die CSS-Eigenschaft margin:0 auto; an, dann wird immer automatisch zentriert. Mit dem IE 6 gibt es dabei jedoch Probleme, weil er die Eigenschaft nicht unterstützt. Wenn es dir wichtig ist, dass die Seite in allen Browsern gleich aussieht, dann (ja ich weiß, es gehört nicht zu den guten Methoden) umschließe das IFrame mit einem div, in dem du text-align:center; angibst.
 
Danke für die Tipps, werde versuchen das mal umzusetzen.

Mein Gott man kann es halt nicht allen Browsern recht machen...
 
Bitte???

Der IE6 unterstützt margin:0 auto nicht? Das wüsste ich aber da ich den Kram schon seit gut nem halben Jahr (wenn nicht noch länger) verwende um meine Layouts zu zentrieren o_O

MfG

NewLord
 
Der IE6 unterstützt es schon, wenn man einen korrekten Doctype angibt und er sich nicht im Quirks-Mode befindet.
 
threadi schrieb:
Der IE6 unterstützt es schon, wenn man einen korrekten Doctype angibt und er sich nicht im Quirks-Mode befindet.
Zum Vergrößern anklicken....

Echt? Komisch... Ich hab XHTML 1.0 Strict (und halte mich auch daran!), aber wenn ich margin:0 auto verwende bleibt es linksbündig. Steht sogar auf SELFHTML irgendwo bei CSS-Layouts.
 
Ich sollte vielleicht hinzufügen das ich mit Microsofts Expression Web arbeite.

Der Tip mit dem margin auto 0 keine Ahnung wo das hinkommen soll.

Verstehe auch nicht warum über die definition des Aussenrand wo irgendwas auf Null und was anderes auf Automatik gesetzt wird sich da was zentrieren soll.

Warum gibt es für eine solche wichtige funktion keinen direkten Befehl?
 
dying_hero schrieb:
Echt? Komisch... Ich hab XHTML 1.0 Strict (und halte mich auch daran!), aber wenn ich margin:0 auto verwende bleibt es linksbündig. Steht sogar auf SELFHTML irgendwo bei CSS-Layouts.
Zum Vergrößern anklicken....

Jo, da steht:

Für <body> ist die CSS-Eigenschaft text-align:center angegeben (und für div#Seite wieder zurückgesetzt), da der Internet Explorer ab Version 6 im standardkonformen Modus zwar Block-Elemente über margin:auto zentriert, allerdings text-align fälschlich auch auf Block-Elemente anwendet.
Zum Vergrößern anklicken....

SELFHTML: Stylesheets / CSS-basierte Layouts / Mehrspaltige Layouts
SELFHTML Forumsarchiv / 2004 / Oktober / margin:auto im IE

Folglich geht es. Habs schon oft ohne text-align erfolgreich verwendet.

@Dave1978: dein Problem ist zunächst, dass du für deine Seite eine absolute Positionierung verwendest. Dadurch nimmst du alle HTML-Elemente, wie auch das iframe, aus dem Fluss. D.h. du kannst sie nicht einfach mit margin zentrieren. In deinem Fall wäre

Code: 
position: absolute;left: 50%;

die Lösung. Siehe auch:
http://www.html.de/css/18198-div-mittig-zentrieren.html
http://www.html.de/html-und-xhtml/12421-gesamten-website-inhalt-zentrieren.html
http://www.html.de/css/10833-top-0px-ohne-position-absolute.html

Um das nutzen zu können musst du entweder html und css lernen und es selbst einfügen oder deinen Web-Editor näher studieren.
 
Ja ich kann in den Quellcode Modus wechseln.

Nein leider tut das alles nicht. Da wird es wohl keine Lösung geben. Danke für die Versuche. Vielleicht klappts ja mit Web 3.0, irgendwann....
 
Zuletzt bearbeitet:
Das klappt sehr wohl. Die "50%" musst du nur anpassen an einen Wert der deiner Seite gerecht wird. Diese Angabe legt ja nur den "Abstand" vom linken Rand fest. Wenn deine Seite nun 600 Pixel breit ist muss dieser Prozentwert verringert werden, z.B. auf 32%. Kann ich jetzt nicht genau sagen.

Dennoch wäre es die bessere Lösung, wenn du auf "position: absolute" komplett verzichtest. Dann kannst du dein "Problem" recht schnell lösen.
 
Ich hab ne völlig leere seite genommen, die css datei gelöscht!

Das heisst ne völlig leere seite.

Da benutze ich nun die Funktion zum einfügen eines Inlineframes, in welcher ebenfalls eine leere seite geöffnet werden soll.

YPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Language" content="de" />
<title>www.westwall3d.de</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>


&nbsp;<iframe name="I1" id="I1" src="ohne_titel_2.htm" marginwidth="1" marginheight="1" style="width: 500px; height: 180px; margin:0 auto">Ihr Browser unterstützt Inlineframes nicht oder zeigt sie in der derzeitigen Konfiguration nicht an.</iframe>


Und es tut sich absolut nichts.

Und das mit den 50% prozent funktioniert auch nicht, kann nicht funktionieren. Die Prozentzahlen wäre abhängig von der fensterbreite und die ist ja variabel. Um ein 500ps fenster auf nem 1000er fenster zu zentrieren bräuchte man 25%, bei nem 2000er als beispiel schon 37,5% haut also nicht hin.

Aber kann mir jemand sagen warum es für eine solch offentsichtlich Wichtige Sache keine Funktion gibt?

Man müsste doch einfach sagen positioniere auf xx% der Seitebreite das Centrum einer Ebene. Alternativ über einen festgelgten Punkt, den man mittig der ebene festlegt.

Habs jetzt mit den Div´s gemacht, muss meine Seite dafür etwas umstellen aber es geht nun. Nicht schön aber funktional.
 
Zuletzt bearbeitet:
Hallo,

normalerweise zentriert man horizontal mit "margin:0 auto;". Richtige Browser verstehen das.
Der IE macht damit Probleme. Da muss man dann im Elternelement des zu zentrierenden Elements ein "text-align:center" einfügen, auch wenns eigentlich falsch ist, weil die Eigenschaft normalerweise nur Inline-Elemente zentrieren sollte. Damit gehts dann definitiv auch im IE.

Es gibt noch eine andere, aber auch gefährliche, Lösung zum horizontalen Zentrieren (was sich auch für das vertikale anwenden lässt):
Du positionierst das Element absolut, mit "left:50%". Jetzt steht der linke Rand in exakt der Mitte (des Fensters, nicht der Auflösung, die ist irrelevant). Nun muss das Element noch einen negativen linken Abstand bekommen und zwar in Höhe der halben Breite, also z.B.:
Code: 
position:absolute;
left:50%;
width:600px;
margin-left:300px;
Jetzt ist das Element auch horizontal zentriert.
ABER: Wenn das Fenster kleiner ist, als das Element breit ist (hier: 600px), dann wandert der Inhalt langsam links aus dem Fenster raus. Und da man mit Scrollbalken nur nach rechts oder unten scrollen kann, verschwindet der Inhalt links unwiderruflich im Nirwana und kann nur durch ein größeres Browserfenster wieder hergeholt werden. Das hilft aber Handy/PDA-Nutzern mit vielleicht 200px Breite rein gar nichts. Die Site wird unbenutzbar. KO.

Schöne Grüße,
-Efchen
 
Die den DIV hat das jetzt funktioniert. Und das ist die Hauptsache vielleicht versuche ich es in einer ruhigen Stunde nochmal.
 
Efchen schrieb:
Code: 
position:absolute;
left:50%;
width:600px;
margin-left:300px;
Zum Vergrößern anklicken....
Es müßte margin-left: -300px; heißen.

Eine weitere Möglichkeit zum horizontal und vertikalen zentrieren:
Ein Element mit 50% top und 50% left positionieren.
Ein weiteres Element mit position:absolute; wieder aus diesem Bereich hinausschieben.
Das erste Element kann dafür die kleinste mögliche Größe haben.
css:
Code: 
  #fixpunkt {
position:absolute;
left:50%;
top: 50%;
width: 1px;
height: 1px;
border: 1px solid black;
}

  #fixpunkt h1 {
position:absolute;
left:-300px;
top: -200px;
width : 600px;
line-height: 400px;
border: 1px solid black;
text-align: center;
}
html:
Code: 
<div id="fixpunkt">
<h1>Hier ist die Mitte</h1>
</div>
<div> und <h1> sind nur ein Bespiele. In der Praxis sind geeignete Elemente meist schon im Queltext vorhanden.
Bei einem iframe muß es natürlich height und nicht line-height heißen. Text-align ist dann auch überflüssig.
 
Zuletzt bearbeitet:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben