I am trying to build a simple site to sell crafts made by kids. I designed an image in photoshop for our background (a lemonade stand), and I would like to create a transparent scroll box inside the window of the lemonade stand to feature the images of the crafts. I finally figured out how to get my image to take up the entire browser no matter how big it was, but I can't figure out how to put my content in a fixed location - one that also shrinks when people view from a different browser/window size.
my website: ourlittlelemonadestand.com
This is the code I have: I use dream weaver, but I didn't use a template for this site because I couldn't get all of the sidebars/headers/body/footers/etc to not be a huge mess.
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<img src="http://ourlittlelemonadestand.com/newlemonade.gif" alt="background" id="bg" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Our Little Lemonade Stand</title>
<style type="text/css">
img#bg {
width:100%;
height:100%;
}
div#content {
width: 100%;
height: 100%;
}
#content {
position: relative;
top: -30em;
z-index: 1;
width: 100%;
height: 100%;
}
body {
}
</style>
</head>
<body>
<div id="content"> I need my content in the window of the stand, not here. :(
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<img src="http://ourlittlelemonadestand.com/newlemonade.gif" alt="background" id="bg" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Our Little Lemonade Stand</title>
<style type="text/css">
img#bg {
width:100%;
height:100%;
}
div#content {
width: 100%;
height: 100%;
}
#content {
position: relative;
top: -30em;
z-index: 1;
width: 100%;
height: 100%;
}
body {
}
</style>
</head>
<body>
<div id="content"> I need my content in the window of the stand, not here. :(
</div>
</body>
</html>
Please help