Page is a not externally linkable
alt131 - 11:08 am on Sep 28, 2011 (gmt 0)
Hi Audrey and Tury, I don't believe javascript is required for this - I think the problem is the technical terms. You see, you are saying you want the elements to be fixed (so they don't move) and to be scrollable (so they do move) - at the same time. Think of your motor car - you cannot drive it down the road so it is moving, at exactly the same time you keep it parked in your garage so it doesn't move at all. It is either moving down the road (scrolling) or it is parked in one place (fixed): Well, at least my motor car won't do both :)
As the word "fixed' is causing confusion, I'm going to make a big guess. The following code is a simple centred, fixed-width, single column page with a different background-image for each of the header, content and footer. Can you copy/paste it into your editor, test it in a modern browser (firefox, safari, opera or internet explorer 8+) then tell me if it is the sort of thing you want?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>My title</title>
<style type="text/css">
html {background-color: #aaa}
body {width:900px; margin:0 auto}
#header {
height:200px;
background: #bbb url(http://www.google.com/images/srpr/logo3w.png) no-repeat;
background-size: 100% 100%;
}
#maincontent {
height:1000px;
background: #ccc url(http://picasa.google.com/intl/en/images/logo.jpg) no-repeat;
background-size: 100% 100%;
}
#footer {
height:200px;
background: #ccc url(http://www.gstatic.com/picnik/20110920_174529_225.0-RC1/graphics/picnik_logo.gif?rel=20110920174529) no-repeat;
background-size: 100% 100%;
}
</style>
</head>
<body>
<div id="header"><h1>My header</h1></div>
<div id="maincontent"><h2>My Content Heading</h2>
<p>A para of content</p>
</div>
<div id="footer"><p>My footer</p></div>
</body>
</html>