Help needed with text that overlays an image

Hello!! Can you help me with my CSS problems? I have created a page
that overlays text on an image. the problem is that it is leaving all
this space at the bottom of background image that I also need to
remove.



The page is for a nonprofit organization. You can see my HTML code
here, and I have attached a graphic that shows how the page should
look.



http://burningart.com//isf/Peter.html



Don't worry about the funky colors, this is just my debugging attempts
to see what is happening.



I am trying to achieve a text overlay: I want to put some text on top
of the books image. I have managed to do this using position:
relative. The problem is, that the browser is allocating space for the
text below the books image, and then moving the box up to the
appropriate place. This means, that there is all this yellow vertical
space below the books image, and I want to remove this vertical yellow
space.



If you have any suggestions, thoughts, fixes that would be great. Maybe
there is in another way to do this, not using position:relative. I
have been working hard on this for the last week, and have learned a
lot about CSS, just need some expert help!



Thanks for your help and for reading this,



lineone

Line 1 wrote:

Hello!! Can you help me with my CSS problems? I have created a page
that overlays text on an image. the problem is that it is leaving all
this space at the bottom of background image that I also need to
remove.



The page is for a nonprofit organization. You can see my HTML code
here, and I have attached a graphic that shows how the page should
look.



http://burningart.com//isf/Peter.html



Don't worry about the funky colors, this is just my debugging attempts
to see what is happening.



I am trying to achieve a text overlay: I want to put some text on top
of the books image. I have managed to do this using position:
relative. The problem is, that the browser is allocating space for the
text below the books image, and then moving the box up to the
appropriate place. This means, that there is all this yellow vertical
space below the books image, and I want to remove this vertical yellow
space.



If you have any suggestions, thoughts, fixes that would be great. Maybe
there is in another way to do this, not using position:relative. I
have been working hard on this for the last week, and have learned a
lot about CSS, just need some expert help!



Thanks for your help and for reading this,



lineone

lineone,

Hmmm, I just learned something here. See
http://www.w3.org/TR/CSS21/visuren.h...opdef-position and go down to
the 'relative' section, where it says, "When a box B is relatively
positioned, the position of the following box is calculated as though B
were not offset."

So you moved the position of the text, but the space it previously
occupied is still accounted for when positioning the following box.

So things are working to spec.

Since you are learning, you might want to read through some stuff I've
collected at http://pages.prodigy.net/chris_beall/TC/index.html. Won't
solve this particular challenge, but may help avoid many others.

Chris Beall