How to center iFrame content

<p>I am building an image gallery for my new website, using tables and iframe.<br>

I am satisfied with the result for horizontal images (see attached file).<br>

But I would like to <strong>center the vertical images</strong>, which now appear to the left (see attached file).<br>

Here's the HTML code I used for the iframe:<br>

<br /><iframe name="frmPhotos" src="images/TestiFrame/wolf.jpg" frameborder="no" height="550" scrolling="no" width="100%"></iframe><br /><br /><br /><br>

I tried adding the following code to the iframe line without success:<br>

align="center"<br>

<br>

<br>

If you know the solution, thanks in advance for sharing!</p>

<div>[ATTACH=full]971696[/ATTACH]</div>

<p>Oups, the screen capture below shows how the vertical images appear.<br>

I've added a black frame so you can better see the alingment.<br>

Also, I should state that all the images that appear are NOT mine. They are used here only for test purpuses.</p><div>[ATTACH=full]577639[/ATTACH]</div>

<p>I'm rather new at this sort of thing, too, but this <em>might</em> answer your question. Mightn't hurt to try, anyway:</p>

<p><a href="http://www.webmasterworld.com/html/3114774.htm">http://www.webmasterworld.com/html/3114774.htm</a></p>

<p>It's been awhile since I've used iframes, but shouldn't the content you're referring to have the center alignment?</p>

<p>You can also put the iframe code in a div code, as in</p>

<blockquote>

<p><div align="center"><iframe blah blah blah></iframe></div></p>

</blockquote>

<p>Another solution might be to use some css code, but again, you probably need to center your image in the content referred to by the iframe (which looks to be your flickr page, possibly?).</p>

<p>One more thought: some browsers have compatibility problems with iframes. Are you using Firefox? Then try IE and see what it looks like.</p>

<p>See if this works.</p>

<p>The following code will center the image on your iframe page (the one with the image, not the one with the gallery.) Replace image width with the number of pixels wide you want the image to display-- probably the actual width in pixels of the image. (I had to upload as a graphic because photo.net was stripping some of the the html code out)</p>

<p>Once it's centered on that page, it should stay centered in the iframe on the gallery page</p><div>[ATTACH=full]577667[/ATTACH]</div>

<p>I think you should try to avoid iFrames completely for this. Apart from having quite some quirks in Internet Explorer, iFrames also do not work well for bookmarking (regardless of browser). It's an 'old' technique, and there are better options: <div> and CSS would work here. Using an iFrame with a page from another website causes even more issues in newer browsers due to security settings.</p>

<p>Being lazy, I'd just take JAlbum (which creates pages much like this, certainly without iFrames), build an album and study the HTML it outputs.</p>

<p>Wouter, could you please expand on what kinds of problems using an iFrame can cause? The Internet Bird Collection (ibc.lynxeds.com) uses iFrames in the code they offer to allow videos hosted on the site to be embedded elsewhere. This is the only time I use them (so far, anyway), to embed an IBC video, and I'm curious about what kind of trouble this might cause.</p>

<p>I'm not saying they do not work, but iframes are not the best solution, certainly not if you want to load just a picture in it, rather than a full HTML document.</p>

<p>First, the issue with bookmarks; you typically bookmark the original page, which contains only a reference to the originally loaded iFrame. Users can find this very annoying, because it is unexpected behaviour (same problem with normal frames, and is also not always resolved with DIVs).<br>

The security issues are more pressing, if (that's an if) the page you embed in the iFrame has a different domain name than the original frame. Check for example <a href="http://jszen.blogspot.com/2005/03/cross-domain-security-woes.html">here</a> for more info.<br>

There is some ugliness in an iFrame on a low resolution screen, suddenly turning into scrollable content. This may be a case of personal preference, but I see it as poor design when that happens. And given the amount of cellphones accessing the internet, you should consider how low-resolution devices render it.</p>

<p>Given the look of the site you show above, I think you should have a look at using DIV's instead. If you do want to use iFrames, indeed you should center the image on the HTML page referencing the large photos, as Damon said. In your example, you link to the large JPEG for the iFrame instead, but that won't work if you want to use alignment, you need an additional near-empty HTML document.</p>

 

<p>And that's another point: creating a HTML page to only contain a single photo for each photo is a bit extra work you should not need to take - the iFrame solution just does not seem flexible enough here to me. With DIVs, you'd have one HTML page handling all.</p>

 

<p>Wouter's right. Not the optimal solution.</p>

<p>How does your gallery work? Does it display a full sized photo while you hover over a thumbnail, or does it display it once it's clicked, (or both?) There are very simple solutions for all of these that don't require iframes.</p>

<p>For instance, there are javascript "rollover galleries" all over the web that work in a similar way to rollover scripts for buttons, etc-- an A image that changes to B image while the mouse is over the button. What's different is that a rollover gallery displays the B image (in this case, the full sized image) in a div.</p>

 

 

<p> </p>

<p>(Thanks, Wouter; what you wrote clarified things for my own question.)</p>

<p>Thank you all for yours kind responses. I'm only now (Monday evening) reading them, as I had unexpected business to attend to...<br>

To answer some of the questions, I mainly use Firefox. I didn't know about the problems iFrames pose for IE. The page I built is not from Flickr, but from my personnal site currently under construction (with white dominating as in Flickr).<br>

The way the gallery I built with iFrame works, the main large image changes with a click on a smaller image. The hoover option could be good too..<br>

I will look into JAlbums and DIVs and rollover galleries, even though I'm a tad discouraged at the propect of having to start all over again. None of those things ring a bell. I am totally new at website creation and barely understand basic HTML. I was so proud to have managed to create what I had (despite the centering problem).<br>

But if iFrames are going to be a problem, I'd rather get it right. I'll look more into this in the days to come. In the meantime, if anyone comes accross a specific site which could help me to configure a similar looking gallery using Divs or rollovers, it would again be much appreciated!</p>

 

<p>Hi Cathrine<br>

There is a very easy way to centre images in an iframe.<br>

1) re-size the image to the max on the long side such that it still fits in the iframe.<br>

2) Adjust the canvas size on the short side to be identical to the relevant size of the iframe. Ensure he background colour is set to white (or the colour of your website)<br>

You know have an image that will fit exactly into you iframe. So when it is displayed the image will be in thecentre.<br>

I do this ith a batch image processor - But if you do not have too many images you could hand work them.<br>

BFN :-)</p>