View Full Version : Using CSS to position images around an iframe

12-17-2011, 09:26 PM
I am trying to learn enough about CSS to solve a problem, but I've hit brick wall and perhaps someone can give me a bump in the right direction.

I have 4 graphics, which are the top, bottom, left and right sides of an iPhone. When they are properly aligned, the result is a box with a window in the middle. I want the window to display an iframe. The iframe displays a mobile website. I have a javascript that loads different mobile sites into the iframe by entering the url into a text box and submitting the script. You can get an idea of what I currently have at The ProSocial Mobile Phone Simulator | ProSocialTools.com (http://prosocialtools.com/pro-social-mobile-phone-simulator/)

The current version uses a table with the phone set into a background image and the iframe floated on top of it. But this doesn't work on an iPad. I figured out that if I can split up the image as described above, I can make the iframe bigger and hide the scroll bars that Internet Explorer insists on displaying. (I know I can turn off scrolling, but that would stop users from scrolling the mobile site, I only want to hide the scroll bars).

My problem is that I have no idea how to position these 5 elements with HTML so that I can get it onto a Wordpress page. When I try positioning them with divs, they seem to go where they want to, not where I want them to. I guess there is a step I am missing somewhere, like maybe I need to create a container and then position the elements relative to their positions inside the container? I don't know. I need help.

Can anyone point me toward the light? Thank you in advance!!!

12-18-2011, 03:14 PM
I should mention that I'm completely open to having someone solve this problem for me with reasonable financial renumeration. I have already invested too many hours into trying to make it work myself.


12-19-2011, 12:25 PM
Tim do you have an example of how it looks on a WordPress page somewhere online that we can see? It'll help to see the page not working in order to figure out how to get it to work.

When you're creating the WordPress page are you creating it through the admin backend using the editor inside WordPress or are you creating a new page template specifically for the page?

12-26-2011, 05:36 PM
Van, I had posted a link to the online version above. After messing around with it all weekend, I hit the right solution at around 1am Monday morning, and it's good to go. It's still not perfect, but it's far better than what I had. Here is a link: The ProSocial Mobile Phone Simulator | ProSocialTools.com (http://prosocialtools.com/pro-social-mobile-phone-simulator/)

The solution was to put my divs inside of another div, and use div style for positioning the elements. The resulting code looked like this:

<div style="z-index:0;position:relative;height:487px;width:33px; margin-top:-7px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px; top:0px; left:0px;"><img src="http://prosocialtools.com/images/ip4-left.jpg"> </div>

The only issue right now is that my iframe isn't really centered on the display window, and this is because I'm covering a part of the right side to hide the scroll bars that IE insists on adding to the iframe. I'm pretty sure there are better ways to accomplish this with HTML5 and ajax, but that is presently over my head.

I would love to get "shrink to fit" working. :-)


01-02-2012, 04:08 PM
Glad to see you got things working for the most part. I just checked my own site though, and it doesn't look the same in your simulator as it does on a phone, at least not phones I've checked. I checked both the site in my signature and this forum. It looks like your simulator is first rendering things as if it were larger and then chopping off whatever is to the right of the screen.

When I view my site on a phone, the 2 columns on the right should drop down below the main content. That's how I usually see it on a phone. With the forum everything should just shrink up to fit.

Just wanted to let you know.

01-02-2012, 10:06 PM
A couple things:

- I can't enter in cnn.com or http:// www.cnn.com. It requires that I enter http:// www.cnn.com (Note: Ignore the spaces in the URLS...added them because the forum automatically converts it to a link with title.)
- There is no easy way to make "shrink to fit" work. You would have to come up with a server side app that can screenshot the website and then shrink that image. There's no way to scale all of the contents of a container in a web browser (unless the only content is an image).
- Did you try using a table to make your design work? The markup is considerably simpler and you might save some headaches.
- My table layout uses scrollbars in the iframe. I wouldn't get rid of them since it's hard to know you can scroll otherwise. If you really don't want them, add this attribute to the iframe: scrolling="no"

<table cellspacing="0" cellpadding="0">
<td colspan="3" style="width: 397px; height: 134px; background: red;">header image</td>
<td style="width: 38px; height: 487px; background: blue;">left</td>
<td><iframe frameborder="0" style="height: 100%; width: 100%;" src="http://m.cnn.com"></iframe></td>
<td style="width: 38px; height: 487px; background: green;">right</td>
<td colspan="3" style="width: 397px; height: 134px; background: orange;">header image</td>

08-02-2012, 04:57 PM
don't use tables in your designs. Use css. If you still need help with this you can try
On your stylesheet:
.phoneWrap {
width:set your width to whatever you need;
.topImage {
same as phoneWrap width;
.leftImage {
.phoneContent {
rightImage {
/*You may have to play around a bit with the others, but this shoudl be the base.*/
On your page:
<div class="phoneWrap">
<div class="topImage"></div>
<div class="leftImage"></div>
<div class="phoneContent">Phone Screen</div>
<div class="rightImage"></div>
<div class="bottomImage"></div>

08-02-2012, 07:39 PM
I agree. I think you worked this out already, but I'd stay away from using tables for layout. Use tables when you have tabular data to present on a page, but otherwise avoid them for layout.