Photo in middle with a href

J

John Larronn

Hi there,

Is there anyone who could help me with a little problem?

How can I put a photo in the middle of a new page using the following -
usual - code?

<a href="studie_tree.jpg">

Using this code, the photo is aligned at the left of the new page. But I
want to put it in the middle of the new page. Any ideas?

Thanks

John
 
A

Adrienne Boswell

Hi there,

Is there anyone who could help me with a little problem?

How can I put a photo in the middle of a new page using the following
- usual - code?

<a href="studie_tree.jpg">

Using this code, the photo is aligned at the left of the new page. But
I want to put it in the middle of the new page. Any ideas?

Thanks

John

There are several ways to do this, here's one:

<style type="text/css">
p.center {
text-align:center;
}
</style>
</head>
<body>
<p class="center"><a href="example.com"><img src="myimage.png"
alt="alternative text" height="100" width="100"></a></p>
 
D

Denis McMahon

Hi there,

Is there anyone who could help me with a little problem?

How can I put a photo in the middle of a new page using the following -
usual - code?

<a href="studie_tree.jpg">

Using this code, the photo is aligned at the left of the new page. But I
want to put it in the middle of the new page. Any ideas?

That's an anchor, not a photo.

Enclose the anchor in a paragraph, and apply a style to the paragraph:

<p style="text-align:center">
<a href="studie_tree.jpg">link text[or maybe <img
src="studie_tree_thumbnail.jpg">]</a>
</p>

Rgds

Denis McMahon
 
D

dorayme

"John Larronn said:
How can I put a photo in the middle of a new page using the following -
usual - code?

<a href="studie_tree.jpg">

Using this code, the photo is aligned at the left of the new page. But I
want to put it in the middle of the new page. Any ideas?

If you use links to enlargements a lot, from say, thumbnail
images on a website page, it is a great time saver to simply have
a link directly to the image. But, alas, you thereby lose control
over where the image get placed, most browsers default to top
left.

You can spend time to fix your problem in various ways. You can
make yourself a template html page with simple code to get
horizontal centring (to keep it simple for the moment) using such
as:

<div><img style="margin:auto; display:block;" src="..."
alt=""></div>

or

<div style="text-align: center;"><img src="..." alt=""></div>

And simply fill in the dots with the name of the image file when
you want to use such a link. Useful for galleries of thumbnails.
But time consuming because you need to name each destination html
file uniquely.

If you don't want to go to the trouble of this, there is one
simple technique to get a bit of grace from pics being displayed
jammed up to the left - *if* you already prepare your own
pictures and know your plan. You can include a bit of top and
left spacing outside of the substantial image content. The
browser does not know it is being tricked. You won't get centring
this way easily, but it looks better in many browsers.

There would be other ways perhaps, using javascript or
server-side scripting and organising.
 
J

John Larronn

Hi All,

Thank you very much indeed for helping me out.

I will study your answers.

I am building a website with about fifty photographs. They are thumbnails,
and when you click on them they appear in new pages - enlarged - aligned at
the left.

I will come back to you soon.

Kind regards,

John
 
D

Denis McMahon

Hi All,

Thank you very much indeed for helping me out.

I will study your answers.

I am building a website with about fifty photographs. They are
thumbnails, and when you click on them they appear in new pages -
enlarged - aligned at the left.

I will come back to you soon.

Ah

So it's not the "<a href="image file name"><img src="thumbnail"></a>"
that you want to be centered, but the resulting image when it opens in a
new window.

You can only do that by wrapping the image in html file and applying
styles to it there.

However, to save creating html files for each image, you could open them
in a new window (or tab, depending on the viewers browser settings)
using javascript to create the html that both loads the image and
applies the styles.

There's an example of this at:

http://www.sined.co.uk/tmp/picloader.htm

Rgds

Denis McMahon
 
J

Jonathan N. Little

Denis said:
However, to save creating html files for each image, you could open them
in a new window (or tab, depending on the viewers browser settings)
using javascript to create the html that both loads the image and
applies the styles.

Or better yet use a server side script to generate the page for each
image that would *always* work regardless of the user's browser
settings. Many scripts out there, but if you wish to roll your own it is
very simple in the language of your choice, and outline in pseudocode:

Get image name passed in query string

Filter value to insure safe
(
limit length to reasonable size
remove "bad" characters not allowed in filename
)

Validate value
(
compare to preset list
or
compare to listing that your script creates by reading the image
folder
)

If value valid image then
create page with image
Else
display error message
 
J

John Larronn

Hi All and Jonathan,

Thanks very much for your help!

I am now busy applying your advice to my site.

You have all been a great help.

Kind regards,

John
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,901
Latest member
Noble71S45

Latest Threads

Top