text over image - why is this page so tall?

G

Greg N.

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

Roy Schestowitz

Greg said:
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
 
C

cosmic foo

Greg N. said:
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.
 
S

Spartanicus

Greg N. said:
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.
 
R

Roy Schestowitz

Greg said:
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
 
G

Greg N.

Spartanicus said:
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
 
R

Roy Schestowitz

Greg said:
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
 

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,744
Messages
2,569,482
Members
44,901
Latest member
Noble71S45

Latest Threads

Top