hyperlink a positioned image?

Discussion in 'HTML' started by abby, Mar 1, 2005.

  1. abby

    abby Guest

    Please help,
    Using CSS how can I position an image center/center on a page AND
    hyperlink the image??
    The following markup does not appear to allow for a hyperlink
    <style type="text/css">
    body
    {
    background-image:
    url('smiley.gif');
    background-repeat:
    no-repeat;
    background-position:
    center;
    }
    </style>

    Thank you!

    (posted also in alt.html.critique)
    abby, Mar 1, 2005
    #1
    1. Advertising

  2. abby

    Steve Pugh Guest

    "abby" <> wrote:

    >Using CSS how can I position an image center/center on a page AND
    >hyperlink the image??


    img.foo {psoition: absolute; top: 50%; left: 50%; margin-top -100px;
    margin-left: -100px;}

    <a href="bar.html"><ing class="foo" src="foo.gif" alt="Foo Bar"
    width="200" height="200"></a>

    Change the margin-top and margin-height values to half the dimensions
    of your image.

    If you have other content on the page then that content may
    over/underlap the image, possibly making it unclickable.

    >The following markup does not appear to allow for a hyperlink
    ><style type="text/css">
    >body
    >{
    >background-image:
    >url('smiley.gif');
    >background-repeat:
    >no-repeat;
    >background-position:
    > center;
    >}
    ></style>


    A background-image is decoration. It serves no functional purpose
    (though obviously it serves a decorative purpose with all the
    implications for user experience that implies). If an image is to be a
    link then it has a functional purpose then it must not be a background
    image.

    >(posted also in alt.html.critique)


    Please don't multi-post. If you must, cross-post and pick one group
    for followups. This response cross-posted and followups set to
    alt.html.

    Steve

    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
    Steve Pugh, Mar 1, 2005
    #2
    1. Advertising

  3. abby

    abby Guest

    Steve Pugh wrote:
    > "abby" <> wrote:
    >
    > >Using CSS how can I position an image center/center on a page AND
    > >hyperlink the image??

    >
    > img.foo {psoition: absolute; top: 50%; left: 50%; margin-top -100px;
    > margin-left: -100px;}
    >
    > <a href="bar.html"><ing class="foo" src="foo.gif" alt="Foo Bar"
    > width="200" height="200"></a>
    >
    > Change the margin-top and margin-height values to half the dimensions
    > of your image.
    >
    > If you have other content on the page then that content may
    > over/underlap the image, possibly making it unclickable.
    >
    > >The following markup does not appear to allow for a hyperlink
    > ><style type="text/css">
    > >body
    > >{
    > >background-image:
    > >url('smiley.gif');
    > >background-repeat:
    > >no-repeat;
    > >background-position:
    > > center;
    > >}
    > ></style>

    >
    > A background-image is decoration. It serves no functional purpose
    > (though obviously it serves a decorative purpose with all the
    > implications for user experience that implies). If an image is to be

    a
    > link then it has a functional purpose then it must not be a

    background
    > image.
    >
    > >(posted also in alt.html.critique)

    >
    > Please don't multi-post. If you must, cross-post and pick one group
    > for followups. This response cross-posted and followups set to
    > alt.html.
    >
    > Steve
    >
    > --
    > "My theories appal you, my heresies outrage you,
    > I never answer letters and you don't like my tie." - The Doctor
    >
    > Steve Pugh <> <http://steve.pugh.net/>



    Thanks a million Steve
    ....that worked fine (once I changed spelling for "psoition" and "ing
    class" and also added a ":" to "margin-top" :)
    I used your markup at http://www.cregg-house.com (yeah, they insisted
    on a splash page image)

    --
    Abby
    abby, Mar 1, 2005
    #3
  4. abby

    abby Guest

    Thanks a million Steve
    ....that worked fine (once I changed spelling for "psoition" and "ing
    class" and also added a ":" to "margin-top" :)
    I used your markup at http://www.cregg-house.com (yeah, they insisted
    on a splash page image)

    --
    Abby
    ps/ sorry about the multi-post!
    abby, Mar 1, 2005
    #4
    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. John A Grandy
    Replies:
    3
    Views:
    323
    darrel
    Jun 15, 2004
  2. =?Utf-8?B?TWFya3VzIFJ5dHRlcmt1bGw=?=

    Positioning of "non-positioned controls" (datasource etc)

    =?Utf-8?B?TWFya3VzIFJ5dHRlcmt1bGw=?=, Mar 15, 2006, in forum: ASP .Net
    Replies:
    0
    Views:
    343
    =?Utf-8?B?TWFya3VzIFJ5dHRlcmt1bGw=?=
    Mar 15, 2006
  3. Fat, Dumb and Happy
    Replies:
    2
    Views:
    385
    Fat, Dumb and Happy
    Mar 1, 2005
  4. Guybrush Threepwood
    Replies:
    1
    Views:
    458
    Mitja Trampus
    Dec 14, 2005
  5. Remy
    Replies:
    2
    Views:
    610
Loading...

Share This Page