Center Image

Forum Moderators: open

Message Too Old, No Replies

Center Image

Rain_Lover

11:22 am on Mar 26, 2010 (gmt 0)

Hi,

I created a simple slideshow:

<html>
<body>

<div>
<iframe src="image1.jpg" width="448" height="336" name="iframe_a">
</iframe>
</div>
<br>
<div>
<a href="image1.jpg" target ="iframe_a"><img src="image1.jpg" width="80" height="60"></a>
&nbsp;
<a href="image2.jpg" target ="iframe_a"><img src="image2.jpg" width="80" height="60"></a>
&nbsp;
<a href="image3.jpg" target ="iframe_a"><img src="image3.jpg" width="80" height="60"></a>
</div>

</body>
</html>

The problem is my images are of different sizes and they don't center in the iframe. How can I resolve the problem? Any suggestion is greatly appreciated!

Kind regards
Rain lover

[edited by: incrediBILL at 3:33 pm (utc) on Mar 26, 2010]
[edit reason] removed specifics, see TOS #13 [webmasterworld.com...] [/edit]

birdbrain

12:28 pm on Mar 26, 2010 (gmt 0)

Hi there Rain_Lover,

do it like this...

iframe page...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>
<style type="text/css">
iframe {
width:448px;
height:336px;
}
#links {
margin-top:18px;
}
#links a {
margin-right:12px;
}
#links a img {
width:80px;
height:60px;
}

</style>
<body>

<div>
<iframe src="[blue]image1.html[/blue]" name="iframe_a"></iframe>
</div>

<div id="links">
<a href="[blue]image1.html[/blue]" target ="iframe_a"><img src="image1.jpg" alt=""></a>
<a href="[blue]image2.html[/blue]" target ="iframe_a"><img src="image2.jpg" alt=""></a>
<a href="[blue]image3.html[/blue]" target ="iframe_a"><img src="image3.jpg" alt=""></a>
</div>

</body>
</html>

image1.html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
body {
padding:0;
margin:0;
}
img {
 display:block;
 width:448px;
 height:336px;
 }
</style>

</head>
<body>

<div>
<img src="image1.jpg" alt="">
</div>

</body>
</html>

image2.html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
body {
padding:0;
margin:18px 0 0 24px;
}
img {
 display:block;
 width:400px;
 height:300px;
 }
</style>

</head>
<body>

<div>
<img src="image2.jpg" alt="">
</div>

</body>
</html>

image3.html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
body {
padding:0;
margin:68px 0 0 74px;
}
img {
 display:block;
 width:300px;
 height:200px;
 }
</style>

</head>
<body>

<div>
<img src="image3.jpg" alt="">
</div>

</body>
</html>

birdbrain

Rain_Lover

1:00 pm on Mar 26, 2010 (gmt 0)

Hi birdbrain,

Thanks for the answer, but I can't create a single page for each image. I'm going to have a slideshow of 200 images and it can be very cumbersome and time-consuming.
Thanks for the suggestion, though! :-)

penders

2:54 pm on Mar 26, 2010 (gmt 0)

...but I can't create a single page for each image.

This is where a bit of server-side script (such as PHP) could be used to effectively generate your 200+ pages for you. In actual fact you'd have just 1 additional page that holds your image and pass a query string to that page which governs which image to show.

So, following birdbrain's example, your links become something like:


<a href="showpic.php?pic=image1.jpg" target="iframe_a"><img src="image1.jpg" alt=""></a> 
<a href="showpic.php?pic=image1.jpg" target="iframe_a"><img src="image2.jpg" alt=""></a>  
<a href="showpic.php?pic=image1.jpg" target="iframe_a"><img src="image3.jpg" alt=""></a>

Or, don't use an IFRAME.

Rain_Lover

4:04 pm on Mar 28, 2010 (gmt 0)

Dear penders,

Looks very promising! But I know absolutely nothing about PHP and really need help to realize how to set it up. I'd be grateful if you could help me.

birdbrain

4:41 pm on Mar 28, 2010 (gmt 0)

Hi there Rain_Lover,

as your host does not allow javascript are you certain that it has a php option?

birdbrain

penders

5:10 pm on Mar 28, 2010 (gmt 0)

as your host does not allow javascript are you certain that it has a php option?

Who says? JavaScript is client-side and not in any way dependent on the host. JavaScript would be a viable alternative to using an IFRAME, and possibly what many would choose to implement a simple slideshow.

birdbrain

5:35 pm on Mar 28, 2010 (gmt 0)

Hi there penders,

I asked that question about the php option because Rain_Lover has stated on
another forum that his/her host - "Google Sites" - does not permit JavaScript. ;)

birdbrain

Rain_Lover

8:37 pm on Mar 28, 2010 (gmt 0)

@ birdbrain,

Not sure, but I can give it a try.

penders

9:14 pm on Mar 28, 2010 (gmt 0)

>> Rain_Lover has stated on another forum that his/her host - "Google Sites" - does not permit JavaScript. ;)

Ah, I see! :)

(I very much doubt that "Google Sites" permits PHP either.)

Center Image

Rain_Lover

birdbrain

Rain_Lover

penders

Rain_Lover

birdbrain

penders

birdbrain

Rain_Lover

penders

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week