iframe embed in html5

KasselJulian · 27.02.2013

Hallo,

ich habe bisher auf einer HTML4-Site eine Seite via iframe eingebunden. Nun ist HTML5 gewünscht und ich habe es probiert mit CSS zu fixen, jedoch bin ich damit bei Safari und IE8 fehlgeschlagen.
Wie muss mein HTML5-Code aussehen um das gewünschte Ergebnis von HTML4 zu erzeugen?

CODE:

Code:

<!-- ALTER HTML4 CONTENT -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
    <meta charset="utf-8">
    <title>Einbindungs-Site</title>
    <style type="text/css">
        body, html{
            background:white;
            color:black;
        }
        .iframe_embed{
            display:block;    
        }    
    </style>
    </head>
<body>
Hallo,<br>
ich bin ein Content und binde nun die iframe-Webapp ein:
<iframe class="iframe_embed" src="index.html" width="700px" height="1000px" marginheight="0" marginheight="0" frameborder="0" scrolling="no" allowtransparency="1">
</iframe>
</body>
</html>

<!-- NEUER HTML5-CONTENT -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
    <meta charset="utf-8">
    <title>Einbindungs-Site</title>
    <style type="text/css">
        body, html{
            background:white;
            color:black;
        }
        .iframe_embed{
            display:block;
            margin:0;
            overflow:hidden;
            border:0;
            width:700px;
            height:1000px;
        }
    </style>
    </head>
<body>
Hallo,<br>
ich bin ein Content und binde nun die iframe-Webapp ein:
<iframe class="iframe_embed" src="index.html">
</iframe>
</body>
</html>

Cheers

MyBad · 27.02.2013

AW: iframe embed in html5

Was versuchst du denn zu fixen? Auch in HTML5 gibt es beim iframe weiterhin die Attribute für "width" und "height". Verstehe ich deine Frage nicht?

KasselJulian · 27.02.2013

AW: iframe embed in html5

MyBad schrieb:
Was versuchst du denn zu fixen? Auch in HTML5 gibt es beim iframe weiterhin die Attribute für "width" und "height". Verstehe ich deine Frage nicht?

width und height ja, den Rest leider nicht. Bei mir treten Scrollbalken und Frameborder auf, obwohl ich diese versucht habe mit CSS zu umgehen.

MyBad · 27.02.2013

AW: iframe embed in html5

Versuche es im CSS mal mit "border: none;". Habe ich jetzt nicht getestet. Aber normalerweise entfernt man so Rahmen von Elementen.

Edit: Ob der IE da aber mitmacht, weiß ich nicht. Zur not eben das Element doch mit den zusätzlichen Attributen notieren.

Eine reine CSS-Lösung würde mich aber auch interessieren. Aber gerade beim IE8 mit seiner beschränkten Unterstützung von HTML5 und CSS3 sehe ich da Probleme.

KasselJulian · 27.02.2013

AW: iframe embed in html5

MyBad schrieb:
Versuche es im CSS mal mit "border: none;". Habe ich jetzt nicht getestet. Aber normalerweise entfernt man so Rahmen von Elementen.

Edit: Ob der IE da aber mitmacht, weiß ich nicht. Zur not eben das Element doch mit den zusätzlichen Attributen notieren.

Eine reine CSS-Lösung würde mich aber auch interessieren. Aber gerade beim IE8 mit seiner beschränkten Unterstützung von HTML5 und CSS3 sehe ich da Probleme.

Ist ja schon gemacht (siehe Code oben).
Ich möchte mir keine Validierungsprobleme einfangen, ich möchte valides HTML5 schreiben also suche ich nur nach einer Option mit CSS.

Niksda · 27.02.2013

AW: iframe embed in html5

Hallo KasselJulian,
das was du suchst ist die CSS Eigenschaft "Overflow".
Hier nochmal zum nachlesen:
http://webkompetenz.wikidot.com/html-handbuch:eingebettete-frames

-Niksda

KasselJulian · 27.02.2013

AW: iframe embed in html5

Niksda schrieb:
Hallo KasselJulian,
das was du suchst ist die CSS Eigenschaft "Overflow".
Hier nochmal zum nachlesen:
http://webkompetenz.wikidot.com/html-handbuch:eingebettete-frames

-Niksda

Hi,
guck doch mal in meinem Code oben nach. Das habe ich von Anfang an verwendet!

Thomas2704 · 27.02.2013

AW: iframe embed in html5

Huhu.

Wenns weiter hilft.

Gib mal bei iframe width: 780 px ein dann haste kein Scrollbalken mehr.
Selbst der Alte Code zeigt ein Scrollbalken.

Wenn die Seite die du einbinden möchtes nur 700px breit ist dann gibt es auch kein Scrollbalken.

MfG

DarkFather · 27.02.2013

AW: iframe embed in html5

Thomas nimmt mir die Worte aus dem Mund.
Die "innere" Seite muss passen, sonst gehts nicht. Macht auch keinen Sinn.

Außerdem musst du auf dein Markup achten, so sieht ein HTML5-Header aus:

Code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Einbindungs-Site</title>

Bei dir ist noch der XHTML 1.0 Transitional drin, auch im "alten" Code ist der Header falsch.