The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> Could somebody amazing please help me?
Leah Payne
post May 30 2012, 09:09 PM
Post #1





Group: Members
Posts: 1
Joined: 30-May 12
Member No.: 17,199



I am so frustrated. sad.gif

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>



Please help sad.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
 
Reply to this topicStart new topic
Replies
Darin McGrew
post May 31 2012, 01:46 AM
Post #2


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



I think a better approach would be to build the lemonade stand as a variation of the custom border/corners design described here:
http://www.alistapart.com/articles/customcorners/

That would adapt to various sizes of browser window without the headaches of positioning content on top of a background that is being rescaled in various unpredictable ways.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic


Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 29th March 2024 - 02:30 AM