text over image - why is this page so tall?

Discussion in 'HTML' started by Greg N., Jul 29, 2005.

  1. Greg N.

    Greg N. Guest

    Hi,
    please have a look at the example at
    http://coolhaus.de/misc/text-over-image.htm

    The content of this page should nicely fit in the browser window, yet
    the page has a vertical scroll bar, and it appears to be much taller
    than necessary.

    What makes this page so tall, and how can I avoid this effect?

    This is the source code:
    -------------------------

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html>
    <body>
    <div style="position: relative; margin-bottom:90px;
    top:90px; z-index: 1; ">
    <img src="http://coolhaus.de/misc/troll1.jpg"
    alt="sample image" title="">
    </div>
    <div style=" position: relative; top: -400px; z-index: 2;
    font-size: xx-large">
    <br>this<br>text<br>to be<br>placed<br>over<br>the<br>image.
    </div>
    </body></html>
     
    Greg N., Jul 29, 2005
    #1
    1. Advertising

  2. Greg N. wrote:

    > Hi,
    > please have a look at the example at
    > http://coolhaus.de/misc/text-over-image.htm
    >
    > The content of this page should nicely fit in the browser window, yet
    > the page has a vertical scroll bar, and it appears to be much taller
    > than necessary.
    >
    > What makes this page so tall, and how can I avoid this effect?
    >
    > This is the source code:
    > -------------------------
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    > <html>
    > <body>
    > <div style="position: relative; margin-bottom:90px;
    > top:90px; z-index: 1; ">
    > <img src="http://coolhaus.de/misc/troll1.jpg"
    > alt="sample image" title="">
    > </div>
    > <div style=" position: relative; top: -400px; z-index: 2;
    > font-size: xx-large">
    > <br>this<br>text<br>to be<br>placed<br>over<br>the<br>image.
    > </div>
    > </body></html>


    Have a look at:

    http://www.schestowitz.com/temp/troll.htm

    Your second element (the text) is positioned below the image and has an
    /offset/ which forces it to overlap the image. You can see this clearly
    when setting the second div's top-position to 0 pixels. You will need to
    redesign it or accept the vertical scroll bars.

    Roy

    --
    Roy S. Schestowitz
    http://Schestowitz.com
     
    Roy Schestowitz, Jul 29, 2005
    #2
    1. Advertising

  3. Greg N.

    cosmic foo Guest

    "Greg N." <> wrote in message
    news:dcd9d3$hsd$...
    > Hi,
    > please have a look at the example at
    > http://coolhaus.de/misc/text-over-image.htm
    >
    > The content of this page should nicely fit in the browser window, yet
    > the page has a vertical scroll bar, and it appears to be much taller
    > than necessary.
    >
    > What makes this page so tall, and how can I avoid this effect?
    >
    > This is the source code:
    > -------------------------
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    > <html>
    > <body>
    > <div style="position: relative; margin-bottom:90px;
    > top:90px; z-index: 1; ">
    > <img src="http://coolhaus.de/misc/troll1.jpg"
    > alt="sample image" title="">
    > </div>
    > <div style=" position: relative; top: -400px; z-index: 2;
    > font-size: xx-large">
    > <br>this<br>text<br>to be<br>placed<br>over<br>the<br>image.
    > </div>
    > </body></html>


    hey that looks like my brother bill.
     
    cosmic foo, Jul 29, 2005
    #3
  4. Greg N.

    Greg N. Guest

    Roy Schestowitz wrote:

    > You will need to redesign it


    any idea towards a better solution?
     
    Greg N., Jul 29, 2005
    #4
  5. Greg N.

    Spartanicus Guest

    "Greg N." <> wrote:

    >please have a look at the example at
    >http://coolhaus.de/misc/text-over-image.htm
    >
    >The content of this page should nicely fit in the browser window, yet
    >the page has a vertical scroll bar, and it appears to be much taller
    >than necessary.
    >
    >What makes this page so tall


    Relative positioning occurs after the page has been laid out using the
    flow.

    >, and how can I avoid this effect?


    For the purpose of displaying text over an image, wrap the image in a
    container, set it to position:relative, then absolutely position the
    text over it.

    --
    Spartanicus
     
    Spartanicus, Jul 29, 2005
    #5
  6. Greg N. wrote:

    > Roy Schestowitz wrote:
    >
    >> You will need to redesign it

    >
    > any idea towards a better solution?


    Have the divs nested. The div containing the text should be placed inside
    the outer div which contains the image. I now see that Spartanicus offered
    a solution.

    All the best,

    Roy

    --
    Roy S. Schestowitz
    http://Schestowitz.com
     
    Roy Schestowitz, Jul 29, 2005
    #6
  7. Greg N.

    Greg N. Guest

    Spartanicus wrote:

    > For the purpose of displaying text over an image, wrap the image in a
    > container, set it to position:relative, then absolutely position the
    > text over it.


    that's it. works like a charm.

    Thanks,
    Greg
     
    Greg N., Jul 29, 2005
    #7
  8. Re: HTML Trolls

    cosmic foo wrote:

    >
    > "Greg N." <> wrote in message
    > news:dcd9d3$hsd$...
    >> Hi,
    >> please have a look at the example at
    >> http://coolhaus.de/misc/text-over-image.htm
    >>
    >> The content of this page should nicely fit in the browser window, yet
    >> the page has a vertical scroll bar, and it appears to be much taller
    >> than necessary.
    >>
    >> What makes this page so tall, and how can I avoid this effect?
    >>
    >> This is the source code:
    >> -------------------------
    >>
    >> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    >> <html>
    >> <body>
    >> <div style="position: relative; margin-bottom:90px;
    >> top:90px; z-index: 1; ">
    >> <img src="http://coolhaus.de/misc/troll1.jpg"
    >> alt="sample image" title="">
    >> </div>
    >> <div style=" position: relative; top: -400px; z-index: 2;
    >> font-size: xx-large">
    >> <br>this<br>text<br>to be<br>placed<br>over<br>the<br>image.
    >> </div>
    >> </body></html>

    >
    > hey that looks like my brother bill.


    Are you trolling? And if so, is it inspired by the picture? *smirk*

    Roy
     
    Roy Schestowitz, Jul 29, 2005
    #8
  9. Greg N.

    Greg N. Guest

    Re: HTML Trolls

    Roy Schestowitz wrote:

    > Are you trolling? And if so, is it inspired by the picture? *smirk*


    No I'm not. Maybe I shouda renamed the image, I can see how the question
    arises. Thanks anyways, you have definitely helped to fix my page at
    http://hothaus.de/greg-tour/
     
    Greg N., Jul 29, 2005
    #9
  10. Re: Comic Foo

    Greg N. wrote:

    > Roy Schestowitz wrote:
    >
    >> Are you trolling? And if so, is it inspired by the picture? *smirk*

    >
    > No I'm not. Maybe I shouda renamed the image, I can see how the question
    > arises. Thanks anyways, you have definitely helped to fix my page at
    > http://hothaus.de/greg-tour/


    *LOL* I think Spartanicus was more helpful and my followup on trolling was
    addressed 'cosmic foo' with the one-liner. Maybe his borther is
    Norwegian... comic printf('foo');...

    Roy
     
    Roy Schestowitz, Jul 29, 2005
    #10
    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. Matt
    Replies:
    12
    Views:
    1,709
  2. Mr. SweatyFinger
    Replies:
    2
    Views:
    2,218
    Smokey Grindel
    Dec 2, 2006
  3. Replies:
    15
    Views:
    1,275
    Harlan Messinger
    Mar 20, 2008
  4. Mc Ieong

    Prawn table cell too tall

    Mc Ieong, Sep 17, 2010, in forum: Ruby
    Replies:
    0
    Views:
    168
    Mc Ieong
    Sep 17, 2010
  5. Randell D.
    Replies:
    7
    Views:
    173
    Thomas 'PointedEars' Lahn
    Nov 6, 2003
Loading...

Share This Page