Center Aligning an image in an iFrame [Archive]

Click to See Complete Forum and Search --> : Center Aligning an image in an iFrame

Dark Dragon

09-11-2003, 12:41 PM

As the title implies..I want my images which, when the related link is clicked, to be centered in the iFrame. Do I put a <center> tag in the image tag?

toicontien

09-11-2003, 01:49 PM

You could try applying CSS to the iframe itself:

.center { text-align: center; }

-----

<iframe class="center">
.
.
.
</iframe>

OR:

.center { text-align: center; }

.imgCenter { margin-left: auto; margin-right: auto; }

-----

<iframe class="center">

<img src="" class="imgCenter">

</iframe>

This should work on all versions of IE, but the first way should work on all browsers.

Dark Dragon

09-11-2003, 02:05 PM

Oh!!..Okay, thanks a bunch..I will try it then.

Dark Dragon

09-11-2003, 02:15 PM

I am confused..do I put
center { text-align: center; }

<iframe class="center">
.
.
.
</iframe>

all of this in my code??? Plese excuse me if this seems dense but I am still learning this.

DaveSW

09-11-2003, 02:37 PM

right:

where you have your iframe tag, add

class="center"

into the line of code referring to it.

Then put

<style type="text/css"></style>

into the head section of the document.

Is that clearer?

But I don't think it works, if my memory serves me rightly (I tried a while back to centralise an iframe image, I wasn't succesful and I think I tried that.)

Dark Dragon

09-11-2003, 02:41 PM

Okay....I am gonna try it. Thanks.

Dark Dragon

09-11-2003, 02:47 PM

Well.. I obviously messed up because it isn't working..I am sure I added some extra tags where there shouldn't be but I haven't found it.

Here is the code so far on my page...the error is somewhere..

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css"></style>
<title>Untitled Document</title>
<body background="imgs/blkcrk.gif" bg properties="fixed">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<img alt="gallery (1K)" src="imgs/gallery.gif" height="37" width="216" />
<style type="text/css">
p {color: #FFFFFF}
</style>

<p align="center">Here is a test page where I have selected images appearing in
an iFrame.
I also used the Layout Tool from DreamWeaver. This page is
best view in Internet Explorer 5.</p>
<table width="1006" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="468" height="417" valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="494" height="417"><iframe name="myIframe" iframe class="center" frameborder="0" vspace="0" hspace="0" marginwidth="0" marginheight="0"
width="60%" height="65%" src="imgs/imtitle.jpg" scrolling="yes"></iframe>
</td>
</tr>
</table>
</td>
<td width="538">
<p>
<style type="text/css">
a.link {
color: white;
text-decoration: none;
font-weight: bold;
}
a.link:hover {
color: fuchsia;
}
</style>
<a href="imgs/elderman.gif" target="myIframe" class="link"> Elderly Man Drawing</a></p>
<p><a href="imgs/anime1.jpg" target="myIframe" class="link">Elf Warrior</a></p>
<p><a href="imgs/anime2.jpg" target="myIframe" class="link">Little girl with a tiny Black Mage</a></p>
<p><a href="imgs/anime3.jpg" target="myIframe" class="link">A Demi-Human</a></p>
<p><a href="imgs/anime4.jpg" target="myIframe" class="link">A girl</a></p>
<p><a href="imgs/churrocopy.gif" target="myIframe" class="link">A creature of some sort</a></p>
<p><a href="imgs/bmage.jpg" target="myIframe" class="link">A Black Mage</a></p>
<p><a href="imgs/armrdblkmage.gif" target="myIframe" class="link">Type C Black Mage</a></p>
<p><a href="imgs/drgn2blue.gif" target="myIframe" class="link">Old Style Dragon Emblem</a></p>
</td>
</tr>
</table>

I is is probably so obvious it is painful :D

DaveSW

09-11-2003, 02:51 PM

Here's my cleaned up version, but without the images I can't see if it works.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content=
"text/html; charset=iso-8859-1">
<style type="text/css">

</style>
<title>Untitled Document</title>
</head>
<body background="imgs/blkcrk.gif" bg="" properties="fixed">
<img alt="gallery (1K)" src="imgs/gallery.gif" height="37" width=
"216">
<p align="center">Here is a test page where I have selected
images appearing in an iFrame. I also used the Layout Tool from
DreamWeaver. This page is best view in Internet Explorer 5.</p>
<table width="1006" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="468" height="417" valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="494" height="417"><iframe name="myIframe" class=
"center" frameborder="0" vspace="0" hspace="0" marginwidth="0"
marginheight="0" width="60%" height="65%" src="imgs/imtitle.jpg"
scrolling="yes"></iframe></td>
</tr>
</table>
</td>
<td width="538"><a href="imgs/elderman.gif" target="myIframe"
class="link">Elderly Man Drawing</a><br>
<br>

<p><a href="imgs/anime1.jpg" target="myIframe" class="link">Elf
Warrior</a></p>
<p><a href="imgs/anime2.jpg" target="myIframe" class=
"link">Little girl with a tiny Black Mage</a></p>
<p><a href="imgs/anime3.jpg" target="myIframe" class="link">A
Demi-Human</a></p>
<p><a href="imgs/anime4.jpg" target="myIframe" class="link">A
girl</a></p>
<p><a href="imgs/churrocopy.gif" target="myIframe" class="link">A
creature of some sort</a></p>
<p><a href="imgs/bmage.jpg" target="myIframe" class="link">A
Black Mage</a></p>
<p><a href="imgs/armrdblkmage.gif" target="myIframe" class=
"link">Type C Black Mage</a></p>
<p><a href="imgs/drgn2blue.gif" target="myIframe" class=
"link">Old Style Dragon Emblem</a></p>
</td>
</tr>
</table>
</body>
</html>

Dark Dragon

09-11-2003, 02:58 PM

Thank you for your efforts but I fear it still doesn't work. :(

I am beginning to think that it is my IE5..maybe it doesn't support all that.

Thanks again for trying so hard to help.

PeOfEo

09-11-2003, 05:49 PM

Ok well the text align property is not going to work I think, why not use, darn thats a doosy since all browsers read code differently you might try using padding:50%; or something but that might just enlarge the iframe in ie or do one of those bizzare ie crap outs.

Dark Dragon

09-11-2003, 06:23 PM

It's okay..it isn't really important..I tried to do a similar thing on my other site..have the selected image appear centered in the next frame...thanks anyway.

PierceThorne

09-11-2003, 07:52 PM

This works in IE 5.0 and 6.0 (and presumably more, see http://www.w3.org/TR/REC-CSS2/colors.html for spec)

your "inner.html" file (what's in the src= of your iframe)
<html>
<head>
<title>Inner</title>
<style>
body {
background-image: url(http://piercethorne.com/images/PiercingThoughts.gif);
background-position: center center;
background-repeat: no-repeat;
}
</style>
</head>
<body>
</body>
</html>

Despite the uncoolness of not being CSS, tables seem to do perfectly, as well, and might offer support for down-level browsers. The file inside your IFRAME should contain only a table that fills the space given to it, and has only one TD, as so:

<html>
<head>
<title>Inner</title>
</head>
<body>

<table border="0" width="100%" height="100%">
<tr>

<td valign="center" align="center"><img src="http://piercethorne.com/images/PiercingThoughts.gif" /></td>
</tr>
</table>
</body>
</html>

Some behavioral differences between the two: the CSS solution will never invoke scroll bars, because there's no content (you're just making a watermark, and if that gets clipped, oh well.) The table-based solution will create scroll bars if the iframe is too small, since the image is "real content" on the page.

Dark Dragon

09-11-2003, 09:03 PM

Well..I used the iFrame so I can allocate a name to it as I link images to it...I haven't figured out how to name cells in a table.

I am beginning to rethink the iFrame idea though as it seems like a real pain in the tush to make it work....could I perhaps add a center attribute in my link tags?

So for the table idea how do I add a name to it so I can have my images appear in it..same with the other iFrame code you show...html>
<head>
<title>Inner</title>
<style>
body {
background-image: url(http://piercethorne.com/images/PiercingThoughts.gif);
background-position: center center;
background-repeat: no-repeat;
}
</style>
</head>
<body>
</body>
</html>

I notice it has no name so how do I make content from a link appear in it?

PierceThorne

09-12-2003, 12:59 AM

I suppose understanding your objective would probably help ;) The example gives you the ability to center an image in an iframe. If you give the iframe a name, as in

outer.html
.
.
.
<iframe name="myIframe" ... > ... </iframe>

then it's as simple as a link that says

<a href="somenewpagewithimage.html" target="myIframe">Click me!</a>

to put a new page in the iframe. But that's a lot of work, especially if you have lots of images -- you need to cruft up an HTML file for each image <urk> or have the server build a page for you on the fly (using ASP, PHP, CFM, pick your poison...)

Sounds like you just want to change an image on the fly, and you want that image centered somewhere on the page. If that's so, try this:

<html>
<head>
<title></title>
<body>
<table width="100%" height="80%">
<tr>
<td valign="center" align="center"><img src="" name="theImage" />
</td>
</tr>
</table>
<script>

document.theImage.src =

"http://piercethorne.com/images/PiercingThoughts.gif"

alert("Now, pretend something happens")

document.theImage.src = "http://piercethorne.com/images/flame.gif"

</script>
</body>
</html>

That's a little contrived, but uses the centering trick above with the ability to change an image on the fly. Do some research, because the script I show isn't completely portable (but that's the makings of a different thread ;) )

DaveSW

09-12-2003, 08:07 AM

Pierce: I'm guessing but it sounds like an image gallery

<iframe name="myIframe" ... > ... </iframe>

<a href="image.jpg" target="myIframe">Click me!</a>

For this reason you can't add extra code inside the iframe, so he's looking for a way to get the iframe to center it's content.

If your images are all the same size then you just set the iframe to be that size, but where you have some in landscpe and some in portrait...

Basically I don't think he want's to make a html page for each image.

Right/wrong DD?

Dark Dragon

09-12-2003, 12:30 PM

Quite right Dave..I am not interested in making a new page for each image...all I wanted is for my image to appear centered in an iFrame..or, if I choose, to appear centered in my min frame of a frameset...this seems to be quite troublesome too.

I considered using a pop up type window but considering how many people dislike them, as do I, I realized this is not a good route to take....

I suppose I can use a Image viewer..where you click the "next" button to see the next pic.

By using the iFrame or frameset, I don't need to create separate pages for each individual image.

But, there has got to be a easier and less complicated way to do this though.