http://atomicwm.50webs.com/index.html
I started my website yesterday but this is only my 2nd time making a layout. I want to make the dog's paws go over the text in the box when it reaches that far. I have a separate, transparent picture of the dog saved, but I don't know how to put it up/position it. Can someone help me? Sorry, I'm new to this so I'm not sure how to explain better.
Full Version: How to make a picture 'float' over a text box?
You need to split up the image. Copy the dog to a new image and make everything around it transparent. The text could be one image (or real text). The splashy background could be a real background image. The color behind the copy text should be a background color.
Then you can position the dog with CSS so its paws are on top of the content area.
You need to clean up the markup a little first. You have <body></body> last, below all the stuff that is supposed to be contained in BODY. Also, if you are going to use CSS positioning (and you must to accomplish what you want) you should use a doctype. If affects how browsers render the page. Use the below. Copy and paste, don't try to type it.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
You can use the validator (links at top and bottom of all pages) to find errors like the misplaced body tags.
http://htmlhelp.com/tools/validator/
http://htmlhelp.com/tools/validator/doctype.html
http://hsivonen.iki.fi/doctype/
Never mind if you don't understand the above pages yet. Just trust me and use the doctype.
Then you can position the dog with CSS so its paws are on top of the content area.
You need to clean up the markup a little first. You have <body></body> last, below all the stuff that is supposed to be contained in BODY. Also, if you are going to use CSS positioning (and you must to accomplish what you want) you should use a doctype. If affects how browsers render the page. Use the below. Copy and paste, don't try to type it.
CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
You can use the validator (links at top and bottom of all pages) to find errors like the misplaced body tags.
http://htmlhelp.com/tools/validator/
http://htmlhelp.com/tools/validator/doctype.html
http://hsivonen.iki.fi/doctype/
Never mind if you don't understand the above pages yet. Just trust me and use the doctype.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.