Photo in middle with a href

Discussion in 'HTML' started by John Larronn, Jan 23, 2011.

  1. John Larronn

    John Larronn Guest

    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
    John Larronn, Jan 23, 2011
    #1
    1. Advertising

  2. Gazing into my crystal ball I observed "John Larronn"
    <> writing in
    news:rC__o.6027$2:

    > 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>

    --
    Adrienne Boswell at Home
    Arbpen Web Site Design Services
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
    Adrienne Boswell, Jan 23, 2011
    #2
    1. Advertising

  3. On 23/01/11 18:40, John Larronn wrote:
    > 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
    Denis McMahon, Jan 23, 2011
    #3
  4. John Larronn

    dorayme Guest

    In article <rC__o.6027$2>,
    "John Larronn" <> wrote:

    > 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.

    --
    dorayme
    dorayme, Jan 23, 2011
    #4
  5. John Larronn

    John Larronn Guest

    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
    John Larronn, Jan 24, 2011
    #5
  6. On 24/01/11 02:07, John Larronn wrote:
    > 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
    Denis McMahon, Jan 24, 2011
    #6
  7. Denis McMahon wrote:
    > 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






    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Jan 24, 2011
    #7
  8. John Larronn

    John Larronn Guest

    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
    John Larronn, Jan 25, 2011
    #8
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. RC
    Replies:
    2
    Views:
    465
    John M Deal
    Nov 24, 2004
  2. CRON
    Replies:
    24
    Views:
    200,649
    Adrienne Boswell
    Jun 20, 2006
  3. Soren Vejrum
    Replies:
    4
    Views:
    567
    Lasse Reichstein Nielsen
    Jul 5, 2003
  4. saiho.yuen
    Replies:
    3
    Views:
    416
    kaeli
    Sep 14, 2004
  5. Replies:
    2
    Views:
    457
Loading...

Share This Page