seeking help here

Discussion in 'HTML' started by Ross, Dec 27, 2004.

  1. Ross

    Ross Guest

    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?
     
    Ross, Dec 27, 2004
    #1
    1. Advertising

  2. Ross

    Spartanicus Guest

    "Ross" <> wrote:

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

    --
    Spartanicus
     
    Spartanicus, Dec 27, 2004
    #2
    1. Advertising

  3. Ross

    Ross Guest

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

    "Spartanicus" <> wrote in message
    news:...
    > "Ross" <> wrote:
    >
    >>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.
    >
    > --
    > Spartanicus
     
    Ross, Dec 27, 2004
    #3
  4. Ross

    SpaceGirl Guest

    Ross wrote:
    > 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 #
     
    SpaceGirl, Dec 27, 2004
    #4
  5. Ross

    Wÿrm Guest

    "Ross" <> wrote in message
    news:cqomop$166r$...
    <snip>

    > image over one or writing a caption on it?


    http://www.kolumbus.fi/ace/ng/css-overlay.html

    Something like that? Tested quickly only in IE 6, FireFox v1.0 and Opera
    v7.54 and in those it works, not sure about any other browser or
    versions...
     
    Wÿrm, Dec 27, 2004
    #5
  6. Ross

    Spartanicus Guest

    "Ross" <> wrote:

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

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


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

    --
    Spartanicus
     
    Spartanicus, Dec 27, 2004
    #6
  7. Ross wrote:
    > 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.

    --
    Yours
    Erik Ginnerskov
    http://hjemmesideskolen.dk - http://html-faq.dk
    http://ginnerskov.frac.dk
     
    Erik Ginnerskov, Dec 27, 2004
    #7
  8. Ross

    Ross Guest

    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


    "Erik Ginnerskov" <> wrote in message
    news:...
    > Ross wrote:
    >> 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.
    >
    > --
    > Yours
    > Erik Ginnerskov
    > http://hjemmesideskolen.dk - http://html-faq.dk
    > http://ginnerskov.frac.dk
    >
    >
     
    Ross, Dec 27, 2004
    #8
  9. Ross

    Richard Guest

    Ross wrote:

    > 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>
     
    Richard, Dec 27, 2004
    #9
  10. Ross

    Richard Guest

    Spartanicus wrote:

    > "Ross" <> wrote:


    > 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>
     
    Richard, Dec 27, 2004
    #10
  11. Ross wrote:
    > 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+

    --
    Yours
    Erik Ginnerskov
    http://hjemmesideskolen.dk - http://html-faq.dk
    http://ginnerskov.frac.dk
     
    Erik Ginnerskov, Dec 27, 2004
    #11
  12. Ross

    Ross Guest

    Thanks for all your help, especially the last two kind persons!!!! I'm
    saved!!


    "Richard" <Anonymous@127.001> wrote in message
    news:...
    > Ross wrote:
    >
    >> 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>
    >
    >
    >
    >
    >
     
    Ross, Dec 27, 2004
    #12
  13. Ross

    kchayka Guest

    Erik Ginnerskov wrote:
    >
    > 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.

    --
    Reply email address is a bottomless spam bucket.
    Please reply to the group so everyone can share.
     
    kchayka, Dec 27, 2004
    #13
  14. Richard wrote:
    > Spartanicus wrote:
    >
    >>"Ross" <> wrote:

    >
    >>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?


    Please show us where Spartanicus advocated not snipping quotes.
     
    Leif K-Brooks, Dec 27, 2004
    #14
  15. Ross

    Ross Guest

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

    "kchayka" <> wrote in message
    news:...
    > Erik Ginnerskov wrote:
    >>
    >> 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.
    >
    > --
    > Reply email address is a bottomless spam bucket.
    > Please reply to the group so everyone can share.
     
    Ross, Dec 27, 2004
    #15
  16. Ross

    Neal Guest

    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.
     
    Neal, Dec 27, 2004
    #16
  17. Ross

    kchayka Guest

    Ross wrote:
    > 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" <Anonymous@127.001>
    (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.

    --
    Reply email address is a bottomless spam bucket.
    Please reply to the group so everyone can share.
     
    kchayka, Dec 27, 2004
    #17
  18. kchayka wrote:

    >> http://www.hjemmesideskolen.dk/html/div.asp -


    > 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. ;)

    --
    Yours
    Erik Ginnerskov
    http://hjemmesideskolen.dk - http://html-faq.dk
    http://ginnerskov.frac.dk
     
    Erik Ginnerskov, Dec 27, 2004
    #18
  19. Ross

    Karl Core Guest

    "kchayka" <> wrote in message
    news:...

    > And never, *ever*, follow the advice of "Richard" <Anonymous@127.001>
    > (a.k.a. Richard the Stupid). He is an idiot. If you spend some time
    > lurking here, you will come to know this. :)


    Richard who?
    ;-)


    --
    -Karl Core
    Please Support "Project Boneyard":
    http://www.insurgence.net/info.aspx?action=band&item=boneyard
     
    Karl Core, Dec 27, 2004
    #19
  20. "Ross" <> wrote:

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

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html
     
    Jukka K. Korpela, Dec 27, 2004
    #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. Devon Null
    Replies:
    15
    Views:
    484
    Devon Null
    Jun 8, 2007
  2. George Hester

    Try over here likely more to the point here

    George Hester, Sep 30, 2004, in forum: Javascript
    Replies:
    0
    Views:
    120
    George Hester
    Sep 30, 2004
  3. FAQ server
    Replies:
    0
    Views:
    161
    FAQ server
    Aug 10, 2006
  4. FAQ server
    Replies:
    0
    Views:
    137
    FAQ server
    Oct 7, 2006
  5. FAQ server
    Replies:
    0
    Views:
    156
    FAQ server
    Dec 4, 2006
Loading...

Share This Page