Positioning text relatively to a picture

Discussion in 'HTML' started by John Doe, Dec 17, 2007.

  1. John Doe

    John Doe Guest

    Hi there !

    I'm working on some page using xhtml+css.
    I have the following problem: I need to position a picture (350x450)
    centered horizontally and on top vertically. That one is easy I think.
    BUT my problem is I need to position some links (text strings)
    relatively to the picture (within the picture) so the links remain at
    the same position relatively to the pic when the page is resized.

    To illustrate, let's say I have three links.
    First one should be at 100, 100, the second one at 250, 200, the third
    one at 175, 300 (assuming O,O is located in the top left corner).

    I tried a few things but none worked so any suggestion is welcome.

    Thanks
    John Doe, Dec 17, 2007
    #1
    1. Advertising

  2. John Doe

    dorayme Guest

    In article <4765cf7b$0$26718$>,
    John Doe <> wrote:

    > Hi there !
    >
    > I'm working on some page using xhtml+css.
    > I have the following problem: I need to position a picture (350x450)
    > centered horizontally and on top vertically. That one is easy I think.
    > BUT my problem is I need to position some links (text strings)
    > relatively to the picture (within the picture) so the links remain at
    > the same position relatively to the pic when the page is resized.
    >
    > To illustrate, let's say I have three links.
    > First one should be at 100, 100, the second one at 250, 200, the third
    > one at 175, 300 (assuming O,O is located in the top left corner).
    >
    > I tried a few things but none worked so any suggestion is welcome.


    Lets add a criteria you left out: what is it that you want to
    happen if the user changes the size of the text up?

    --
    dorayme
    dorayme, Dec 17, 2007
    #2
    1. Advertising

  3. John Doe

    Nik Coughlin Guest

    "John Doe" <> wrote in message
    news:4765cf7b$0$26718$...
    > Hi there !
    >
    > I'm working on some page using xhtml+css.
    > I have the following problem: I need to position a picture (350x450)
    > centered horizontally and on top vertically. That one is easy I think.
    > BUT my problem is I need to position some links (text strings) relatively
    > to the picture (within the picture) so the links remain at the same
    > position relatively to the pic when the page is resized.
    >
    > To illustrate, let's say I have three links.
    > First one should be at 100, 100, the second one at 250, 200, the third one
    > at 175, 300 (assuming O,O is located in the top left corner).
    >
    > I tried a few things but none worked so any suggestion is welcome.


    http://nrkn.com/linksRelativeToParent/
    Nik Coughlin, Dec 17, 2007
    #3
  4. John Doe

    Nik Coughlin Guest

    "dorayme" <> wrote in message
    news:...
    > In article <4765cf7b$0$26718$>,
    > John Doe <> wrote:
    >
    >> Hi there !
    >>
    >> I'm working on some page using xhtml+css.
    >> I have the following problem: I need to position a picture (350x450)
    >> centered horizontally and on top vertically. That one is easy I think.
    >> BUT my problem is I need to position some links (text strings)
    >> relatively to the picture (within the picture) so the links remain at
    >> the same position relatively to the pic when the page is resized.
    >>
    >> To illustrate, let's say I have three links.
    >> First one should be at 100, 100, the second one at 250, 200, the third
    >> one at 175, 300 (assuming O,O is located in the top left corner).
    >>
    >> I tried a few things but none worked so any suggestion is welcome.

    >
    > Lets add a criteria you left out: what is it that you want to
    > happen if the user changes the size of the text up?


    My example below actually handles this suprisingly well up to quite a large
    font size. It is certainly something that the OP should be aware of though.
    I imagine that their intention is to label elements within the picture with
    clickable text links.
    Nik Coughlin, Dec 17, 2007
    #4
  5. John Doe

    dorayme Guest

    In article <fk4ls0$2pq$>,
    "Nik Coughlin" <> wrote:

    > "dorayme" <> wrote in message
    > news:...
    > > In article <4765cf7b$0$26718$>,
    > > John Doe <> wrote:
    > >
    > >> Hi there !
    > >>
    > >> I'm working on some page using xhtml+css.
    > >> I have the following problem: I need to position a picture (350x450)
    > >> centered horizontally and on top vertically. That one is easy I think.
    > >> BUT my problem is I need to position some links (text strings)
    > >> relatively to the picture (within the picture) so the links remain at
    > >> the same position relatively to the pic when the page is resized.
    > >>
    > >> To illustrate, let's say I have three links.
    > >> First one should be at 100, 100, the second one at 250, 200, the third
    > >> one at 175, 300 (assuming O,O is located in the top left corner).
    > >>
    > >> I tried a few things but none worked so any suggestion is welcome.

    > >
    > > Lets add a criteria you left out: what is it that you want to
    > > happen if the user changes the size of the text up?

    >
    > My example below actually handles this suprisingly well up to quite a large
    > font size. It is certainly something that the OP should be aware of though.
    > I imagine that their intention is to label elements within the picture with
    > clickable text links.


    Perhaps in some browsers? Not in my Safari:

    http://netweaver.com.au/alt/pics/text_upped.png

    maybe a bit unusual, but it does not exactly improve all that
    much a couple of clicks down from here...

    I am sure you can improve by lining up the links (rather than
    staggering them).

    There is a way to do this sort of thing but it looks lousy on
    Windows machines... to em size the pic. And there are some tricky
    questions in this. No time to demo it...

    --
    dorayme
    dorayme, Dec 17, 2007
    #5
  6. John Doe

    Nik Coughlin Guest

    "dorayme" <> wrote in message
    news:...
    > In article <fk4ls0$2pq$>,
    > "Nik Coughlin" <> wrote:
    >
    >> "dorayme" <> wrote in message
    >> news:...
    >> > In article <4765cf7b$0$26718$>,
    >> > John Doe <> wrote:
    >> >
    >> >> Hi there !
    >> >>
    >> >> I'm working on some page using xhtml+css.
    >> >> I have the following problem: I need to position a picture (350x450)
    >> >> centered horizontally and on top vertically. That one is easy I think.
    >> >> BUT my problem is I need to position some links (text strings)
    >> >> relatively to the picture (within the picture) so the links remain at
    >> >> the same position relatively to the pic when the page is resized.
    >> >>
    >> >> To illustrate, let's say I have three links.
    >> >> First one should be at 100, 100, the second one at 250, 200, the third
    >> >> one at 175, 300 (assuming O,O is located in the top left corner).
    >> >>
    >> >> I tried a few things but none worked so any suggestion is welcome.
    >> >
    >> > Lets add a criteria you left out: what is it that you want to
    >> > happen if the user changes the size of the text up?

    >>
    >> My example below actually handles this suprisingly well up to quite a
    >> large
    >> font size. It is certainly something that the OP should be aware of
    >> though.
    >> I imagine that their intention is to label elements within the picture
    >> with
    >> clickable text links.

    >
    > Perhaps in some browsers? Not in my Safari:
    >
    > http://netweaver.com.au/alt/pics/text_upped.png
    >
    > maybe a bit unusual, but it does not exactly improve all that
    > much a couple of clicks down from here...
    >
    > I am sure you can improve by lining up the links (rather than
    > staggering them).
    >
    > There is a way to do this sort of thing but it looks lousy on
    > Windows machines... to em size the pic. And there are some tricky
    > questions in this. No time to demo it...


    It doesn't look as bad on Windows machines if you are sizing the picture
    *down* rather than up. But I dislike that method.

    You could always do this:
    http://nrkn.com/linksRelativeToParent/index2.html
    Nik Coughlin, Dec 17, 2007
    #6
  7. John Doe

    dorayme Guest

    In article <fk4pd1$bjn$>,
    "Nik Coughlin" <> wrote:

    > > Perhaps in some browsers? Not in my Safari:
    > >
    > > http://netweaver.com.au/alt/pics/text_upped.png
    > >
    > > maybe a bit unusual, but it does not exactly improve all that
    > > much a couple of clicks down from here...
    > >
    > > I am sure you can improve by lining up the links (rather than
    > > staggering them).
    > >
    > > There is a way to do this sort of thing but it looks lousy on
    > > Windows machines... to em size the pic. And there are some tricky
    > > questions in this. No time to demo it...

    >
    > It doesn't look as bad on Windows machines if you are sizing the picture
    > *down* rather than up. But I dislike that method.
    >


    You always have to have a big enough picture to cover the likely
    biggest, yes. But it is the resizing *down* on Windows that I
    complain about. Resizing up (even in top end Photoshop) is
    certainly mostly a dead loss. <g>


    > You could always do this:
    > http://nrkn.com/linksRelativeToParent/index2.html


    Honestly, Nick, just one or two clicks makes link 3 (which is
    between 1 and 2?) go off the right of that pic on my Safari.

    The sun is out and I am off for a swim.

    --
    dorayme
    dorayme, Dec 17, 2007
    #7
  8. John Doe

    Nik Coughlin Guest

    "dorayme" <> wrote in message
    news:...
    > In article <fk4pd1$bjn$>,
    > "Nik Coughlin" <> wrote:
    >
    >> > Perhaps in some browsers? Not in my Safari:
    >> >
    >> > http://netweaver.com.au/alt/pics/text_upped.png
    >> >
    >> > maybe a bit unusual, but it does not exactly improve all that
    >> > much a couple of clicks down from here...
    >> >
    >> > I am sure you can improve by lining up the links (rather than
    >> > staggering them).
    >> >
    >> > There is a way to do this sort of thing but it looks lousy on
    >> > Windows machines... to em size the pic. And there are some tricky
    >> > questions in this. No time to demo it...

    >>
    >> It doesn't look as bad on Windows machines if you are sizing the picture
    >> *down* rather than up. But I dislike that method.
    >>

    >
    > You always have to have a big enough picture to cover the likely
    > biggest, yes. But it is the resizing *down* on Windows that I
    > complain about. Resizing up (even in top end Photoshop) is
    > certainly mostly a dead loss. <g>


    It looks OK to me, on Windows here, with Opera/Safari/Firefox/IE 7. I think
    only IE 6 does pixel resizing of images and I don't have it handy so I can't
    check. Yes, upwards is a dead loss. Though there is always auto-tracing in
    Illustrator (or http://vectormagic.stanford.edu/ ), resizing the vector
    image and then rasterizing it. Not so great for photos though.

    >> You could always do this:
    >> http://nrkn.com/linksRelativeToParent/index2.html

    >
    > Honestly, Nick, just one or two clicks makes link 3 (which is
    > between 1 and 2?) go off the right of that pic on my Safari.


    By design! I think it is the least offensive way to deal with that -- if we
    are centering the image as requested by the OP, that space off to the right
    is going to be unused anyway. I am assuming that the coordinates provided
    correspond to something in the image, and the captions are to the right of
    whatever that is, so can't see a problem in running the captions off the
    edge.

    As to link 3 being between 1 and 2, I'm just using the OP's coordinates.

    > The sun is out and I am off for a swim.


    Enjoy your swim. It's overcast here, so it's just hot and muggy. It's so
    much nicer with the sun out :(
    Nik Coughlin, Dec 17, 2007
    #8
  9. John Doe

    Nik Coughlin Guest

    "Nik Coughlin" <> wrote in message
    news:fk4s1e$gvd$...
    > It looks OK to me, on Windows here, with Opera/Safari/Firefox/IE 7. I
    > think only IE 6 does pixel resizing of images and I don't have it handy so
    > I can't check.


    Oh, by it, I mean the em sizing version at
    http://nrkn.com/linksRelativeToParent/index3.html

    Probably more problems will arise with that, I didn't test it more than
    briefly
    Nik Coughlin, Dec 17, 2007
    #9
  10. John Doe

    John Doe Guest

    dorayme wrote:

    > Lets add a criteria you left out: what is it that you want to
    > happen if the user changes the size of the text up?
    >


    Hi and thank you for taking time to help me out.
    To answer your question, I hadn't really thought of the possibility of
    resizing text by the user. Anyway, I see things and especially those
    links as fixed sizes. I mean it's a 'delicate' layout supposed to mimic
    in a way a magazine cover so I don't want it to be messed up if the user
    decides to resize text. I don't know if it's possible to 'lock' text's
    size but that would be fine with me.
    John Doe, Dec 17, 2007
    #10
  11. John Doe

    John Doe Guest

    Nik Coughlin wrote:

    >I imagine that their intention is to label elements within
    > the picture with clickable text links.


    Yup, that's right.
    John Doe, Dec 17, 2007
    #11
  12. John Doe

    John Doe Guest

    John Doe, Dec 17, 2007
    #12
  13. John Doe

    John Doe Guest

    Nik Coughlin wrote:
    >


    > Oh, by it, I mean the em sizing version at
    > http://nrkn.com/linksRelativeToParent/index3.html


    A rather interesting design but I don't think I can use it.
    I use a photography as pic, it's a bitmap. And more important, it's not
    abstract so resizing it up would very likely make it look bad.
    Unless, maybe, I got a photo, let's say, 3 time bigger originally,
    resize it down at level 0 to allow user to increase size 3 times up
    without loss of definition/quality. However I don't know if it's possible.
    John Doe, Dec 17, 2007
    #13
  14. Michael Fesser, Dec 17, 2007
    #14
  15. John Doe wrote:

    > .. I use a photography as pic, it's a bitmap.


    You don't want to use a bitmap image on the Web.

    --
    -bts
    -Friends don't let friends drive Vista
    Beauregard T. Shagnasty, Dec 17, 2007
    #15
  16. John Doe

    Bergamot Guest

    Beauregard T. Shagnasty wrote:
    > John Doe wrote:
    >
    >> .. I use a photography as pic, it's a bitmap.

    >
    > You don't want to use a bitmap image on the Web.


    FYI, it doesn't have to be the Windows .bmp file type to be a bitmap
    image. Jpg is a bitmap image, too.

    --
    Berg
    Bergamot, Dec 17, 2007
    #16
  17. Bergamot wrote:

    > Beauregard T. Shagnasty wrote:
    >> John Doe wrote:
    >>> .. I use a photography as pic, it's a bitmap.

    >>
    >> You don't want to use a bitmap image on the Web.

    >
    > FYI, it doesn't have to be the Windows .bmp file type to be a bitmap
    > image. Jpg is a bitmap image, too.


    Technically true, but my experience is when people mention "bitmap" they
    nearly always mean a Windows .bmp file. Would you agree?

    Just recently in my ISP's local web spaces newsgroups, an amateur posted
    a question about his site. I found multi-megabyte .bmp's used as images,
    because that was the default output of his graphic software package.

    --
    -bts
    -Motorcycles defy gravity; cars just suck
    Beauregard T. Shagnasty, Dec 17, 2007
    #17
  18. John Doe

    John Doe Guest

    Beauregard T. Shagnasty wrote:

    > Technically true, but my experience is when people mention "bitmap" they
    > nearly always mean a Windows .bmp file. Would you agree?


    lol I didn't mean .bmp which I never use. I planned to use jpg or png,
    both widely used since eons on the web and afaik both bitmap graphic
    formats ;-)
    John Doe, Dec 17, 2007
    #18
  19. John Doe

    dorayme Guest

    In article <fk4s1e$gvd$>,
    "Nik Coughlin" <> wrote:

    > "dorayme" wrote:


    > > You always have to have a big enough picture to cover the likely
    > > biggest, yes. But it is the resizing *down* on Windows that I
    > > complain about. Resizing up (even in top end Photoshop) is
    > > certainly mostly a dead loss. <g>

    >
    > It looks OK to me, on Windows here, with Opera/Safari/Firefox/IE 7. I think
    > only IE 6 does pixel resizing of images and I don't have it handy so I can't
    > check.
    >


    Perhaps when I think Windows I am over conscious of IE 6 (for
    which I keep and use a winbox)! What I found was that it was the
    high frequency notes like straight lines, perfect curves and such
    that got the most appalling treatment by IE. It is a particularly
    interesting and potentially useful technique to employ for the
    occasional special headings that you want in a special font - and
    as you know, the smooth curves in fonts are an important part of
    their beauty.

    Last time I looked at this, it was a simple enough context:

    http://netweaver.com.au/alt/imageResizing/arrowingUpAndDown.html

    On my Safari, FF, Camino, brilliant.

    iCab, not too bad at all either.

    Opera, Mac IE: absolutely dreadful. And so too in Win IE 6.

    There are quite a few issues. One is that it would be nice just
    to give a width in em and let the browser work out the
    appropriate height. (To save the partly experimental and partly
    mathematical method of eming the proportions).

    If I recall, working out an em height beforehand did not help the
    browsers which simply don't like em sizing. Perhaps they are very
    crude in how thay calculate the em, in big and crude steps... I
    don't know. But Safari and FF are sure pretty impressive. I
    faintly recall one browser respecting the width but taking the
    natural height! But I cannot confirm this right now.

    > > The sun is out and I am off for a swim.

    >
    > Enjoy your swim. It's overcast here, so it's just hot and muggy. It's so
    > much nicer with the sun out :(


    It was ridiculous. I got there. It stormed over. It poured with
    rain and I swam. Fine! (As Luigi would say). But not as nice for
    seeing fish and sandy bottoms and stuff to pass the time as one
    arms and legs along. Soon as I got out, the clouds cleared, the
    brilliant sun came out. Great timing! Look, I don't mind that
    much. But I do rather object when I see the sun winking at me and
    indicating that it was a deliberate plan which he hatched with
    the clouds and the wind to provoke me. Might have to send Officer
    White to have a word to him.

    --
    dorayme
    dorayme, Dec 17, 2007
    #19
  20. John Doe

    dorayme Guest

    In article <476675d0$0$20875$>,
    John Doe <> wrote:

    > dorayme wrote:
    >
    > > Lets add a criteria you left out: what is it that you want to
    > > happen if the user changes the size of the text up?
    > >

    >
    > Hi and thank you for taking time to help me out.
    > To answer your question, I hadn't really thought of the possibility of
    > resizing text by the user. Anyway, I see things and especially those
    > links as fixed sizes. I mean it's a 'delicate' layout supposed to mimic
    > in a way a magazine cover so I don't want it to be messed up if the user
    > decides to resize text. I don't know if it's possible to 'lock' text's
    > size but that would be fine with me.


    I was thinking maybe you thought this, but I felt too polite to
    mention it.

    Get into the habit of thinking that a webpage is somewhat of an
    abstract form for an author. It is a recipe to deliver something
    to people who use a lot of different types of devices, have
    different eyesight requirements and so on. You will just go wrong
    from the very start if you use the mag cover model.

    --
    dorayme
    dorayme, Dec 17, 2007
    #20
    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. Annie
    Replies:
    3
    Views:
    7,506
    Annie
    Sep 11, 2005
  2. Woolly Mittens
    Replies:
    8
    Views:
    421
    Woolly Mittens
    Sep 22, 2003
  3. Fat, Dumb and Happy
    Replies:
    2
    Views:
    385
    Fat, Dumb and Happy
    Mar 1, 2005
  4. Replies:
    2
    Views:
    8,710
  5. Replies:
    8
    Views:
    1,218
    Mick White
    Apr 19, 2005
Loading...

Share This Page