Positioning text relatively to a picture

J

John Doe

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
 
D

dorayme

John Doe said:
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?
 
N

Nik Coughlin

John Doe said:
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/
 
N

Nik Coughlin

dorayme said:
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.
 
D

dorayme

"Nik Coughlin said:
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...
 
N

Nik Coughlin

dorayme said:
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
 
D

dorayme

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.
[/QUOTE]

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>


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

Nik Coughlin

dorayme said:
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>[/QUOTE]

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.
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 :(
 
J

John Doe

dorayme said:
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.
 
J

John Doe

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

Bergamot

Beauregard said:
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.
 
B

Beauregard T. Shagnasty

Bergamot said:
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.
 
J

John Doe

Beauregard said:
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 ;-)
 
D

dorayme

"Nik Coughlin said:
:

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

dorayme

John Doe said:
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.
 

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

Forum statistics

Threads
473,743
Messages
2,569,478
Members
44,899
Latest member
RodneyMcAu

Latest Threads

Top