Iframe in den Hintergrund

[MrCoco]

Ich möchte ein Iframe in den hintergrund setzen und ein Bild (das Websiten-Logo) darüber legen (das Bild deckt nur einen kleinen Teil des Iframes aus). Ich habe das Iframe und das Logo in einen div getan. Aber irgendwie funktioniert das nicht! Der Quelltext beim Bild sieht dann so aus:
<div style="z-index:1; position: absolute; top:108px; left:300px">
<img src="../files/img/logo.png" width="100" height="22" alt="Logo">
</div>
Und beim Iframe so:
<div style="z-index:0; position: absolute; top:100px">
<iframe width="700" height="300"
src="xyz.html"
frameborder="0"></iframe>
</div>
Entdeckt jemand einen Fehler?
Oder warum geht's nicht?
Danke für eure Antworten!

[Uwe]

Hallo!

Entdeckt jemand einen Fehler?

Sogar noch mehr:
1. Dort wo du deine Nachricht eingegeben hast sind die Buttons unter "Formatierung einfügen:" ein sehr nützliches Feature dieses Forums.

2. Du benutzt einen iframe.

3. Du produzierst Div-Suppe.

4. Du benutzt inline-CSS und Angaben zur Darstellung im HTML.

5. "Aber irgendwie funktioniert das nicht!" ist keine Fehlerbeschreibung!

Oder warum geht's nicht?

Mangelnde Kenntnisse in Sachen HTML und CSS?
Ich kann dir anhand deines Posts jedenfalls nicht helfen.

Mit dem Zaunspfahl winkende Grüße,

Uwe

_________________________
SCNR!

[Matthias Apsel]

Om nah hoo pez nyeetz, MrCoco!

Ich möchte ein Iframe in den hintergrund setzen und ein Bild (das Websiten-Logo) darüber legen

Es ist nicht notwendig ein einzelnes Element in ein div zu packen. Alle Eigenschaften, die du dem div, gibst kannst du auch den Elementen selbst geben.

Verwende keine Inline-Style-Angaben sondern schreibe sie in eine eigene Datei.

suboptimaler Code

Sinnvoll wäre

<iframe ...></iframe>  
<img>

und das Bild absolut zu positionieren. Damit das zuverlässig funktioniert, könnte es sinnvoll sein, frame und Bild gemeinsam in ein Element, was nicht unbedingt ein div sein muss, zu packen.

<div>  
  <iframe ...></iframe>  
  <img>  
</div>

Entdeckt jemand einen Fehler?

warum brauchst du ein Frame?

Matthias

[MrCoco]

Es ist nicht notwendig ein einzelnes Element in ein div zu packen. Alle Eigenschaften, die du dem div, gibst kannst du auch den Elementen selbst geben.

Verwende keine Inline-Style-Angaben sondern schreibe sie in eine eigene Datei.

suboptimaler Code

Sinnvoll wäre

<iframe ...></iframe>

<img>

>   
> und das Bild absolut zu positionieren. Damit das [zuverlässig funktioniert](http://selfhtml.apsel-mv.de/position/position.html), könnte es sinnvoll sein, frame und Bild gemeinsam in ein Element, was nicht unbedingt ein div sein muss, zu packen.  
>   
> ~~~html

<div>  

>   <iframe ...></iframe>  
>   <img>  
> </div>

Matthias

Vielen Dank für die Tipps!
Sorry ich weiss nicht wie ich diese style Eigenschaften in <iframe... und <img... einbaue.
So jedenfalls nicht:

<img src="logo.png" style="z-index:1; position: absolute; top:108px; left:40px width:300px; height:30px;"  
  
<iframe style="z-index:0; position: absolute; top:100px width:470px; height:31px;"  
src="xyz.html"  
frameborder="0"></iframe>

Oder soll ich die style Eigenschaften in eine eigene Datei schreiben? Wäre dankbar für deine Hilfe

[Matthias Apsel]

Om nah hoo pez nyeetz, MrCoco!

Vielen Dank für die Tipps!
Sorry ich weiss nicht wie ich diese style Eigenschaften in <iframe... und <img... einbaue.
So jedenfalls nicht:

An dieser Stelle wäre ein online-Beispiel wirklich hilfreich.

Schau im Wiki, wie stylesheets eingebunden werden sollten.

Matthias

[Uwe]

Vielen Dank für die Tipps!

Bitte lies dir diesen Artikel über "TOFU" durch und vermeide das bitte in Foren.

Sorry ich weiss nicht wie ich diese style Eigenschaften in <iframe... und <img... einbaue.
So jedenfalls nicht: [..]

Doch, genau so. Allerdings fehlt beim img das abschließende '>'. Den "border" vom iframe solltest du dann auch noch per CSS festlegen.

Oder soll ich die style Eigenschaften in eine eigene Datei schreiben? Wäre dankbar für deine Hilfe

Du kannst das CSS zum Testen (!!!) auch in den head-Bereich deines Dokuments schreiben. Am Ende ist eine externe Datei die beste Wahl, ja.

Für CSS im <head>:

<!-- anderes Zeug -->  
<head>  
<!-- anderes Zeug -->  
<style type="text/css">  
img {  
    /* styles für alle images */  
}  
iframe {  
    /* styles für alle iframes */  
}  
</style>  
<!-- anderes Zeug -->  
</head>  
<!-- anderes Zeug -->

Uwe

[Murmelin]

Aber irgendwie funktioniert das nicht!

Die wunderbare Fehlerbeschreibung eines DAU.

Meine Standard-Gegenfrage: Ist der Stecker eingesteckt, der Computer eingeschaltet?

Murmelin

[Matthias Apsel]

Om nah hoo pez nyeetz, Murmelin!

Aber irgendwie funktioniert das nicht!

Die wunderbare Fehlerbeschreibung eines DAU.

Meine Standard-Gegenfrage: Ist der Stecker eingesteckt, der Computer eingeschaltet?

ist dies wirklich nötig?

Matthias

[Klawischnigg]

Hi there,

Meine Standard-Gegenfrage: Ist der Stecker eingesteckt, der Computer eingeschaltet?

ist dies wirklich nötig?

Bestimmt. Wenn seine EDV-Anlage nicht fix mit dem E-Werk verdrahtet ist...

[MrCoco]

Ich möchte ein Iframe in den hintergrund setzen und ein Bild (das Websiten-Logo) darüber legen (das Bild deckt nur einen kleinen Teil des Iframes aus). Ich habe das Iframe und das Logo in einen div getan. Aber das Bild ist trotzdem im Hintergrund. Der Quelltext beim Bild sieht dann so aus:

<div style="z-index:1; position: absolute; top:108px; left:300px">  
<img src="../files/img/logo.png" width="100" height="22" alt="Logo">  
</div>

Und beim Iframe so:

<div style="z-index:0; position: absolute; top:100px">  
<iframe width="700" height="300"  
src="xyz.html"  
frameborder="0"></iframe>  
</div>

Entdeckt jemand einen Fehler?

Danke für eure Antworten!

(@Uwe: So besser? Ja ich bin noch ein Anfänger. Und was meinst du mit "div Suppe" ???)

[dave]

Hi,

Ich möchte ein Iframe in den hintergrund setzen und ein Bild (das Websiten-Logo) darüber legen (das Bild deckt nur einen kleinen Teil des Iframes aus). Ich habe das Iframe und das Logo in einen div getan.

Das div ist wie bereits erwähnt wurde unnötig.

<div style="z-index:1; position: absolute; top:108px; left:300px">

<img src="../files/img/logo.png" width="100" height="22" alt="Logo">
</div>

> Und beim Iframe so:  
> ~~~html

<div style="z-index:0; position: absolute; top:100px">  

> <iframe width="700" height="300"  
> src="xyz.html"  
> frameborder="0"></iframe>  
> </div>

Dein Code nur mit geänderten src-Attributen (ich habe deine relativ referenzierten Dateien schließlich nicht) sieht korrekt aus, oder?

(@Uwe: So besser? Ja ich bin noch ein Anfänger. Und was meinst du mit "div Suppe" ???)

Auch wenn ich nicht der Uwe bin: div-Suppe oder auch divitis ist wenn man unnötigerweise an allen möglichen Stellen div-Elemente verwendet.
Das tust du.

Beim nächsten mal am besten von Anfang an ein Online-Beispiel. Macht's viel einfacher.

Ich weiß nicht warum du einen IFrame denkst zu benötigen, aber meistens gibt es sinnvollere alternativen. Wenn du deinen Anwendungsfall erläuterst könnte man dir evtl. sagen was du besser machen könntest.

Inline-Style-Angaben sind dämlich.
Falls du hier nicht nur der Einfachheit halber die Angaben inline (also direkt beim Element mittels style="") notiert hast sondern dies auch "in echt" so ist würde ich dir dringend empfehlen dich damit zu beschäftigen wie man CSS-Angaben auslagern kann.

~dave

[Uwe]

(@Uwe: So besser? Ja ich bin noch ein Anfänger.

Nicht wirklich. Aber wenigstens sieht man jetzt besser was Text und was Code ist.

Kein Problem, dass du Anfänger bist aber merk dir bitte, je besser du dein Problem beschreibst (siehe Link im anderen Post) desto besser kann man dir helfen. Mir ist es sogar ab und zu passiert, dass ich durch den Versuch einer möglichst genauen Problembeschreibung selbst auf die Lösung gekommen bin.

Ausserdem solltest du dir angewöhnen Code einzurücken. So sieht man wesentlich einfacher wo ein Abschnitt anfängt und aufhört und es vereinfacht die Fehlersuche.

Und was meinst du mit "div Suppe" ???)

Du hast um einzelne Elemente (img und iframe) jeweils ein div gezogen anstatt die CSS-Styles direkt dem jeweiligen Element zu verpassen. Zusätzlich haben die Elemente auch noch Angaben zur Darstellung. Beides ist unnötig.

Noch ein Hinweis. Ich vermute, dass du das iframe zur Darstellung des Inhalts missbrauchst und das Logo immer darüber sein soll. Wenn es so ist, solltest du das unbedingt vermeiden und deine Seite überarbeiten.
Wenn das iframe einen berechtigten Zweck erfüllt (davon gibts m.M.n. nichtmal eine Hand voll) ignoriere diesen Hinweis :)

Uwe

[dave]

Hi,

[…] Zusätzlich haben die Elemente auch noch Angaben zur Darstellung.

Damit meinst du z.B. das width- und height-Attribut des img-Elements?
Ausgerechnet die finde ich (allgemein) durchaus berechtigt.

Durch diese Angaben wird der Platz den das Bild benötigt von Anfang an reserviert und Texte die ggf. um dieses Bild fließen oder darauf folgen "hüpfen" nicht rum wenn es etwas länger dauert bis das Bild geladen ist.

~dave

[Uwe]

Hallo dave!

Damit meinst du z.B. das width- und height-Attribut des img-Elements?
Ausgerechnet die finde ich (allgemein) durchaus berechtigt.

Eher die des iframes, das img aber eigentlich auch.

Durch diese Angaben wird der Platz den das Bild benötigt von Anfang an reserviert und Texte die ggf. um dieses Bild fließen oder darauf folgen "hüpfen" nicht rum wenn es etwas länger dauert bis das Bild geladen ist.

Du hast recht, das ist aber ein technischer Umstand dem man sich beugt.
Ich mag es trotzdem nicht und normalerweise platziert man inline auch keine übergroßen Grafiken (Ladezeit) sondern verlinkt sie oder setzt sie als Hintergrundbild. Das ist aber wieder ein anderes Thema.

Uwe

[MrCoco]

Also weil so viele danach gefragt haben:
Das Iframe ist ein Youtube-Video.
Und ich habe jetzt gemerkt, dass das Bild nur bei YouTube als Iframe nicht funktioniert. Bei SELFHTML hat's geklappt.
Wisst ihr dazu etwas?

Ich danke allen die eine sinnvolle Antwort geschrieben haben!

[Uwe]

[..]nicht funktioniert[..]

Dass das keine Fehlerbeschreibung ist, solltest du mittlerweile aber gelernt haben.

Uwe

[MrCoco]

nicht funktioniert.

Tut mir leid... ich meine das Bild ist nicht zu sehen.

[Matthias Apsel]

Om nah hoo pez nyeetz, MrCoco!

nicht funktioniert.

zeig doch mal online!

Verwende die von mir vorgeschlagene Struktur
positioniere das <img> wie gewünscht

ich meine das Bild ist nicht zu sehen.

könnte bedeuten, es liegt unter dem Iframe, deine Idee mit z-index war dann gar nicht so verkehrt. Z-Index wirkt jedoch nur auf Elemente, deren position-Wert nicht 'static' ist.

gib also dem Iframe noch ein position relative und einen passenden z-index.

Falls das nicht hilft:
Ist dein Code valide?
Was sagt ein Entwicklerwerkzeug wie z.B. Firebug

Matthias

[Uwe]

Falls das nicht hilft:

...welcher Browser+Version ist im Einsatz? ;)

Uwe

[MrCoco]

könnte bedeuten, es liegt unter dem Iframe, deine Idee mit z-index war dann gar nicht so verkehrt. Z-Index wirkt jedoch nur auf Elemente, deren position-Wert nicht 'static' ist.

gib also dem Iframe noch ein position relative und einen passenden z-index.

Vielen Dank das hat geholfen!!!

Danke aber auch allen anderen Antworten und Tipps!!!

Die Frage ist beantwortet. Lg MrCoco.