Putting ein Bild wie ein Rahmen um ein iframe?

Ich habe eine Website, die ich versuche, um die Anzeige in einem mobilen format, aber auf einem breiten Bildschirm. Ich bin überzeugt, der iframe ist der Weg zu gehen.

Ich versuche zum laden des iframe in ein Bild eines iPhones. Sie können sehen, ein Beispiel hier.

Sobald Sie es sehen, sollten Sie in der Lage zu sagen, was ich zu tun versuche.

Ich habe diesen CSS-down zu ermöglichen, für die iframe angezeigt werden im inneren des iPhones Bildschirm...

/*iframe Overlay*/
#over{
    position: absolute;
    top: 84px;
    left: 133px;
    width: 485px;
    height: 320px;
}

iframe{
    width: 100%;
    height: 550px;
    background-image: url(../images/iphone5_hollow_750x380.png);
    background-repeat: no-repeat;
}

Und hier ist der zugehörige HTML -... 

   <div id="over"><iframe src="http://webfro.gs/south/tour"></iframe></div>
        <iframe src="http://www.google.com">
            You don't have iframe support, unfortunately
        </iframe>
    </div>

Fragen...

Ich habe keine Ahnung, warum, aber ich bin gezwungen, zu halten, dass die iframe-snippet mit der google-website in dort. Wenn ich das herausnehmen, dann kann das Handy das Bild nicht anzeigen.

Warum ist das so?

Ist dies der beste Weg, dies zu tun? Etwas einfacher ist es?

Immer diese Anzeige im IE8 scheint ein ganz anderer Alptraum.

Irgendwelche Gedanken?

  • Sollten Sie zunächst fixieren Sie Ihre HTML - Sie haben mis-matched DIV-tags. Jede öffnung div-tag benötigt ein closing-tag, und Sie können sich nicht überlappen.
  • Okay. Ich räumte das <div> tags. Ich bin noch immer die gleichen Probleme, obwohl...
InformationsquelleAutor webfrogs | 2013-07-05
  1. 8

    Ok, zunächst müssen wir ändern die html ein wenig. Alles, was Sie brauchen, ist:

    <div id="over">
    <iframe src="http://webfro.gs/south/tour"></iframe>
</div>

    Dann für die CSS:

    #over {
    background-image: url("../images/iphone5_hollow_750x380.png");
    background-repeat: no-repeat;
    height: 380px;
    width: 750px;
    margin: 0 auto 30px;
    position: relative;
}

iframe {
    height: 321px;
    width: 483px;
    position: absolute;
    top: 28px;
    left: 134px;
}
    • Ok. Es scheint, ich hatte einige Dinge nach hinten. Danke, TW!
    • Irgendwelche Ideen, wie man diese sichtbar im IE8? Wenn ich nach oben ziehen, dort den iframe gedehnt ist, und das Bild von dem Handy gar nicht zeigen. Gedanken?
    • Es sieht gut zu mir im IE8. Haben Sie aktualisiert?
    • Ich Tat aktualisieren. Es ist einfach sehr buggy. Ich muss immer wieder klicken Sie auf "Kompatibilitätsansicht", wenn ich sehen wollen, ist es richtig. IE8 ist unsere corporate-browser. Ich habe bereits die Website aufrufen "Respond.min.js" damit IE8 zu Rendern, Medien-Anfragen, aber es wird nicht helfen, mich zu Debuggen, die Probleme mit IE8...
    • Ich fürchte, du musst eine neue Frage stellen. Ich habe es in einem nativen IE8-browser und der iPhone-Bild und iframe-Platzierung perfekt aussieht. Die Frage, die ich denke, Sie meint das ist die eigentliche iframe-Inhalte nicht ordnungsgemäß reagiert. Ich schaute auf die Seite im Vollbildmodus an und das Problem tritt dort auch.
    • Ok. Ich danke Ihnen sehr!

    InformationsquelleAutor tw16
Schreibe einen Kommentar