seeking help here

R

Ross

I learnt from 2 nice persons that HTML tags <fig>
and <overlay> are not supported now since their proposal in HTML3.0, so what
can i do to imitate the effect of pasting an image over one or writing a
caption on it?
 
S

Spartanicus

Ross said:
I learnt from 2 nice persons that HTML tags <fig>
and <overlay> are not supported now since their proposal in HTML3.0, so what
can i do to imitate the effect of pasting an image over one

Over one what? Another image? If so then there are 2 methods, CSS or
using a graphics editor. I'd recommend using a graphics editor, it
almost certainly reduces the file size of the dependen(cy|ies) and since
CSS is optional it's not really appropriate for such a task.
or writing a caption on it?

Again, use a graphics editor.
 
R

Ross

unfortnuately, the overlayed image is generated dynamically. BTW, how is CSS
able to achieve that? thx
 
S

SpaceGirl

Ross said:
unfortnuately, the overlayed image is generated dynamically. BTW, how is CSS
able to achieve that? thx

You can use layered DIVs to do this, but it's not easy, and you'll run
into the usual problems of getting the CSS to work the same across all
browsers. You really SHOULD use an images, but this can be achieved
dynamicly as well via server modules such as ASPJpeg etc.

--


x theSpaceGirl (miranda)

# lead designer @ http://www.dhnewmedia.com #
# remove NO SPAM to email, or use form on website #
 
S

Spartanicus

Please don't top post in this group, corrected this once.
unfortnuately, the overlayed image is generated dynamically.

Then dynamically generate a combined image.
BTW, how is CSS
able to achieve that? thx

Negative margins or relative positioning. I repeat: using css is not
appropriate, positioning text on top of a graphic with css is especially
tricky and prone to failure.
 
E

Erik Ginnerskov

Ross said:
I learnt from 2 nice persons that HTML tags <fig>
and <overlay> are not supported now since their proposal in HTML3.0,
so what can i do to imitate the effect of pasting an image over one
or writing a caption on it?

That's pretty simple. You will have to use the css proberty position:

<div style="position:relative; height:150px">
<img src="pict1.jpg" width=150" height="100" style="z-index:1">
<img src="pict2.jpg" width=150" height="100" style="z-index:2;
position:absolute;top:50px;left:75px">
</div>

You can easily change the code to make a text being placed in z-index:2 by
using the p element.

Notice: It is importent to set position:relative to the containing div.
Otherwise you will have to position the z-index:2 picture in relation to the
upper left corner of the web page. And that position is variable with
different widths of user agents.
 
R

Richard

Ross said:
Could you kindly go to http://137.189.43.41/kkjj/other/getseq.html and
type any letter in the textbox and see the result? It seems that i cannot
directly use your codes? any modification about CSS? thanks a lot for your
kind help.
Yours sincerely,
Ross


height="100" style="z-index:2">position:absolute;top:50px;left:75px">
..............................................^^^

Remove the ">.

You could also use a background image in the division then enter the text
over it.

<div class="test" style="background:url(image.gif)">sample text</div>
 
R

Richard

Spartanicus said:
Please don't top post in this group, corrected this once.

Why should you read through it a second time just to find out the response
is "yep that works".
What if the post is 100kb to begin with?
I'm gonna scroll through that much text just to read a one line reply?

<begin war zone>
 
E

Erik Ginnerskov

Ross said:
Could you kindly go to http://137.189.43.41/kkjj/other/getseq.html
and type any letter in the textbox and see the result? It seems that
i cannot directly use your codes? any modification about CSS? thanks
a lot for your kind help.

Your form returned this code (part of it):

<img src="band.gif" width="150" height="100"
style="z-index:2">position:absolute;top:50px;left:75px">

which is wrong. It should be:

<img src="band.gif" width="150" height="100"
style="z-index:2;position:absolute;top:50px;left:75px">

Anyway, I don't see the connection between your form and the code I posted.
You can see my code demonstrated here (the explaining texts are in Danish,
but still the code is the same:

1: http://www.hjemmesideskolen.dk/html/div.asp - A short way down the page,
I have written som text with white letters on top of a picture, using this
technique.

Watch the code behind the pages. By the way, the technique is testet in
several different browsers, it works fine in NS 6+, Mozilla 1+, FireFox,
Opera 6+, IE 5+
 
K

kchayka

Erik said:
http://www.hjemmesideskolen.dk/html/div.asp - A short way down the page,
I have written som text with white letters on top of a picture, using this
technique.

it works fine in NS 6+, Mozilla 1+, FireFox, Opera 6+, IE 5+

FYI, there is a flaw in your design - it depends on an absolute
font-size to "work fine".

When the text is zoomed enough so it's readable for me (150% in moz/FF),
there is overlap between the text at the end of div.cont2, and the
paragraph that follows it. This is caused by setting explicit dimensions
and font-size on the "cont2" class and its child elements, combined with
unnecessary absolute positioning.

You could probably simplify this quite a bit by just putting the image
and its caption in a container, floating the container left, and just
positioning the caption within that container. There should be no need
to further position the paragraphs that follow the image.
 
L

Leif K-Brooks

Richard said:
Why should you read through it a second time just to find out the response
is "yep that works".
What if the post is 100kb to begin with?
I'm gonna scroll through that much text just to read a one line reply?

Please show us where Spartanicus advocated not snipping quotes.
 
R

Ross

indeed, i can't understand the last 2 responses, do you recommend me reading
HTML book, part of <DIV> or CSS book? thx.
 
N

Neal

Richard:
Why should you read through it a second time just to find out the
response
is "yep that works".

Did you have to in this reply?

If you snip irrelevant stuff, the only hassle with bottom-posting is
eliminated.
 
K

kchayka

Ross said:
do you recommend

I recommend you stop top-posting and learn to trim quotes because those
are the accepted conventions of this newsgroup. If you want to play
here, you should follow the rules. Otherwise, those who are most
qualified to help you are the most likely to ignore you. If you can do
this you show that you are trainable, too, which never hurts. :)
<URL:http://allmyfaqs.com/faq.pl?How_to_post>

And never, *ever*, follow the advice of "Richard" <[email protected]>
(a.k.a. Richard the Stupid). He is an idiot. If you spend some time
lurking here, you will come to know this. :)
me reading HTML book, part of <DIV> or CSS book? thx.

The subject of books, tutorials, editors, etc. comes up often enough,
you should find a list easily enough in the google groups archives. I've
only read the W3C specs, which can be a tad overwhelming for a newbie.
 
E

Erik Ginnerskov

FYI, there is a flaw in your design - it depends on an absolute
font-size to "work fine".

The artistic head line at the top of the page and the picture with the
overlayered text are independent of the font-size. That's what I wanted to
show on that page.
When the text is zoomed enough so it's readable for me (150% in
moz/FF),

Maybe you should consult an optician or just decreace the solution of your
screen? ;)

I'm an elderly man forced to use spectacles for reading. My screen size is
17" and the screen solution is 1024px by 768px. I have no trouble reading
the text.
You could probably simplify this quite a bit by just putting the image
and its caption in a container, floating the container left, and just
positioning the caption within that container. There should be no need
to further position the paragraphs that follow the image.

I do know that way of making a web page. But the subject of this page is to
show the method of positioning elements.

The method you suggest is showed at
http://www.hjemmesideskolen.dk/html/float.asp - but since you do not read my
native language, you couldn't know. ;)
 
J

Jukka K. Korpela

Ross said:
I learnt from 2 nice persons that HTML tags <fig>
and <overlay> are not supported now since their proposal in
HTML3.0, so what can i do to imitate the effect of pasting an image
over one or writing a caption on it?

Multiposting surely won't help you. In
comp.infosystems.www.authoring.html you at least used a sensible
Subject line.

Try explaining what you wish to accomplish, instead of referring to
obsolete tags. And post to a single group, with a useful Subject line.

But briefly, the way to past an image over another or write a caption
on an image is to use an image processing program and produce the
desired appearance as a single image.
 

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

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,902
Latest member
Elena68X5

Latest Threads

Top