[RESOLVED] Putting an image as a frame around an iframe?
I have a site I'm trying to display in a mobile format, but on a wide screen. I'm convinced the iframe is the way to go.
I'm trying to load the iframe inside an image of an iPhone. You can see an example here.
Once you see it, you should be able to tell what I'm trying to do.
I've got this CSS down to allow for the iframe to be displayed inside the iPhones screen...
And here's the associated HTML...
I have no idea why, but I'm being forced to keep that iframe snippet with the google website in there. If I take that out, then the phone image doesn't display. I have no idea what the Google website has to do with my image.
Why is that?
Is this the best way to do this? Something easier out there?
Getting this to display in IE8 seems to be a whole other nightmare.
The abovecode does not make sense:
- The overlay is position absolute, but the iframe isn't. Why not???
- The overlay is smaller than the iframe. if it is supposed to surround the iframe, it should be an underlay (behind) not an overlay, and should be larger.
- Why does the iframe have a background image??? Surely that serves no purpose, and I'mnot sure it is valid anyway?
- If I've misunderstood, and the iframe is intended to hold the background image, then that is wrong anyway. Use <img> to display an image "behind" the foreground.
- Consider using z-index with position absolute to put the backgrouns behind the foreground.
Once I figured all this out, I was much better off, too... Here's what I did and it's valid and it worked.
I realized about half of this before reading your response, and the rest after reading your response. Thanks for your help (and the boost!).
margin: 0 auto 30px;
/*Mobile iframe CSS*/
Good to hear that you got it working, but one point:
The URL should be terminated with a slash "/". It's quicker that way.
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)
Tags for this Thread