Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Positioning text relatively to a picture

Reply
Thread Tools

Positioning text relatively to a picture

 
 
John Doe
Guest
Posts: n/a
 
      12-17-2007
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
 
Reply With Quote
 
 
 
 
dorayme
Guest
Posts: n/a
 
      12-17-2007
In article <4765cf7b$0$26718$(E-Mail Removed)>,
John Doe <(E-Mail Removed)> 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
 
Reply With Quote
 
 
 
 
Nik Coughlin
Guest
Posts: n/a
 
      12-17-2007

"John Doe" <(E-Mail Removed)> wrote in message
news:4765cf7b$0$26718$(E-Mail Removed)...
> 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/

 
Reply With Quote
 
Nik Coughlin
Guest
Posts: n/a
 
      12-17-2007

"dorayme" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> In article <4765cf7b$0$26718$(E-Mail Removed)>,
> John Doe <(E-Mail Removed)> 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.

 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      12-17-2007
In article <fk4ls0$2pq$(E-Mail Removed)>,
"Nik Coughlin" <(E-Mail Removed)> wrote:

> "dorayme" <(E-Mail Removed)> wrote in message
> news:(E-Mail Removed)...
> > In article <4765cf7b$0$26718$(E-Mail Removed)>,
> > John Doe <(E-Mail Removed)> 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
 
Reply With Quote
 
Nik Coughlin
Guest
Posts: n/a
 
      12-17-2007

"dorayme" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> In article <fk4ls0$2pq$(E-Mail Removed)>,
> "Nik Coughlin" <(E-Mail Removed)> wrote:
>
>> "dorayme" <(E-Mail Removed)> wrote in message
>> news:(E-Mail Removed)...
>> > In article <4765cf7b$0$26718$(E-Mail Removed)>,
>> > John Doe <(E-Mail Removed)> 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

 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      12-17-2007
In article <fk4pd1$bjn$(E-Mail Removed)>,
"Nik Coughlin" <(E-Mail Removed)> 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
 
Reply With Quote
 
Nik Coughlin
Guest
Posts: n/a
 
      12-17-2007

"dorayme" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> In article <fk4pd1$bjn$(E-Mail Removed)>,
> "Nik Coughlin" <(E-Mail Removed)> 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

 
Reply With Quote
 
Nik Coughlin
Guest
Posts: n/a
 
      12-17-2007

"Nik Coughlin" <(E-Mail Removed)> wrote in message
news:fk4s1e$gvd$(E-Mail Removed)...
> 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

 
Reply With Quote
 
John Doe
Guest
Posts: n/a
 
      12-17-2007
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.
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
OutOf Memory exception under Eclipse when using relatively small amount of heap lennyw@comcast.net Java 2 05-24-2006 08:13 PM
How to organize Python files in a (relatively) big project TokiDoki Python 10 10-20-2005 03:37 AM
How to relatively reference the path in c# asp.net Annie ASP .Net 3 09-11-2005 04:40 AM
Help with links within relatively positioned table Fat, Dumb and Happy HTML 2 03-01-2005 03:36 PM
HELP: Relatively positioning a block element to an inline element in Mozilla. Woolly Mittens HTML 8 09-22-2003 06:29 AM



Advertisments