|
Posted by Roy Schestowitz on 07/29/05 16:21
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
[Back to original message]
|