Posts: 17
Name: Zac Altman
Location: Sydney, Australia
|
I am making a site and I am having problems with the design. What I want is to have a 100% wide image on the top with a logo in the top left, and on the absolute bottom of the page (not the browser) have another 100% wide image with another image in the bottom right.
here's my code for the css:
Code:
.quote
{
width: 200px;
border-left: solid thick #FFFFFF;
margin-left: 20px;
padding: 10px;
float:right;
}
/* Page Styling */
body
{
margin: 0px;
padding: 0px;
border: 0px;
font-family:Arial, Helvetica, sans-serif;
font-size: 16px;
background: #87c440;
height:100%;
width:100%;
}
#content
{
font-size:16px;
color:#FFFFFF;
height:100%;
width:100%;
}
#content a:link {color:#FFFFFF;}
#content a:visited {color:#FFFFFF;}
#content a:active {color:#FFFFFF;}
#content a:hover {color: #FFCCFF;}
#text
{
margin:20px;
padding-left:10%;
padding-right:10%;
}
#menu
{
font-size:18px;
text-align:center;
}
#menu a:link {color:#FFFFFF; text-decoration:none}
#menu a:visited {color:#FFFFFF; text-decoration:none}
#menu a:active {color:#FFFFFF; text-decoration:none}
#menu a:hover {color:#FFFFFF; text-decoration:none; font-weight:bold}
.space
{
height:110px;
width:100%;
}
.space2
{
height:82px;
width:100%;
}
#content span {
background: url(top.png) top repeat-x;
display: block;
height:100%;
}
#content span span {
background: url(name.png) top left no-repeat;
height:100%;
}
#content span span span {
background: url(btm.jpg) bottom repeat-x;
height:100%;
}
#content span span span span {
background: url(br.jpg) bottom right no-repeat;
height:100%;
}
and for the page
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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>getthegiftz.com - Personalised presents and gifts for every occasion</title>
<link rel="stylesheet" type="text/css" href="CSS/main.css" />
</head>
<body>
<div id="content"><span><span><span><span><div class="space"></div>
<div id="menu">
<a href="index.html">Home</a> <a href="gift-registry.html">Gift Registry</a> <a href="testimonials.html">Testimonials</a> <a href="contact.html">Contact</a>
</div><br /><br />
<div id="text">
<div class="quote">"We can put a testimonial here about how good your services are"<br />-Person</div>
Get the Giftz is a personalized gift shopping service that takes the stress out of last minute shopping.
<br /><br />
We all lead busy lives and time is precious. Why not take back some of that time and let us source all of your gift requirements.
<br /><br />
Our service will provide you with a gift that is specific to your criteria, or personally selected by us to meet your budget. Each gift is creatively wrapped with attention to detail and supplied with a hand made gift tag.
<br /><br />
As well as ordering one of our unique gifts Get the Giftz can co-ordinate your entire personal or business gift needs. Just give us your list and the stress of last minute purchasing will be alleviated – you will have them organized ahead of time.
<br /><br />
Feel free to sign up for our <a href="gift-registry.html">complemantary gift registry</a>. This service will remind you of all of those important dates in your calendar via sms or email. We can then discuss your preference of gift.
</div><div class="space2"></div></span></span></span></span>
</div>
</body>
</html>
What is happening is that when the page doesn't scroll, the bottom bar is just after the text, where as i want it to be at the bottom of the browser window. So i want a way to have the 100% bar image and the other image to be at the bottom of the browser window if the page doesn't scroll, but at the bottom of the page if the window if it does scroll.
I know its not very clear, but can you please help |
