How do I fix an image to the window.....

A

admin

Administrator
Staff member
I'm wanting to make my website work like frames.. how would I fix my top and left images so that only the stuff in one column moves...
I'm very new at learning to make websites :D so i apologize in advance for my total n00b questions i'm probably going to continue asking :p<div style='width: 100%; height: 120px; overflow: auto;'>Content<br /><br />Content<br /><br />Content<br /><br />Content<br /><br />Content<br /><br />Content<br /><br />Content<br /><br />Content<br /><br />Content<br /><br />Content<br /><br />Content<br /><br /></div>

Hope this helps!

P.S The important bit is the 'overflow: auto;' part.w00tah!! that's getting it there.
Here's what I originally started using frames (<!-- m --><a class="postlink" href="http://www.geocities.com/sailorpizza01">http://www.geocities.com/sailorpizza01</a><!-- m -->) ... but I want to learn more about CSS.

so i'm trying to re-create this.. having a time of it too, especially since I only started learning this on sunday.
:pThis is a pretty rough example, and you may have trouble with it in other browsers (only tested in Firebird 0.7), but it's just a rough example to give you an idea. ;)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Lilipad Boats</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/*<![CDATA[*/
html, body {
height: 100%;
}
body {
padding: 0;
margin: 0;
overflow: hidden;
}
img {
border: 0 solid;
}
#header {
height: 142px;
background: #fff url(header.gif) no-repeat top left;
}
#header h1 {
display: none;
}
#container {
margin-left: -100px;
width: 100%;
float: right;
}
#content {
margin-left: 100px;
height: 405px;
overflow: auto;
}
#content h2 {
text-align: center;
}
#nav {
width: 95px;
float: left;
}
/*]]>*/
</style>
</head>
<body>
<div id="header">
<h1>Lilipad Boats</h1>
</div>
<div id="container">
<div id="content">
<h2>Welcome To Lilipad Boats!</h2>
<p> Yadda yadda yadda blah blah blah. Yadda yadda yadda blah blah blah. Yadda yadda yadda blah blah blah. Yadda yadda yadda blah blah blah.
Yadda yadda yadda blah blah blah. Yadda yadda yadda blah blah blah. Yadda yadda yadda blah blah blah. Yadda yadda yadda blah blah blah.
Yadda yadda yadda blah blah blah. Yadda yadda yadda blah blah blah. Yadda yadda yadda blah blah blah. Yadda yadda yadda blah blah blah.
Yadda yadda yadda blah blah blah. Yadda yadda yadda blah blah blah. Yadda yadda yadda blah blah blah. Yadda yadda yadda blah blah blah.
Yadda yadda yadda blah blah blah. Yadda yadda yadda blah blah blah.
Yadda yadda yadda blah blah blah. Yadda yadda yadda blah blah blah. Yadda yadda yadda blah blah blah. Yadda yadda yadda blah blah blah.
Yadda yadda yadda blah blah blah. Yadda yadda yadda blah blah blah.
Yadda yadda yadda blah blah blah. Yadda yadda yadda blah blah blah.Yadda yadda yadda blah blah blah. Yadda yadda yadda blah blah blah.
Yadda yadda yadda blah blah blah. Yadda yadda yadda blah blah blah.
Yadda yadda yadda blah blah blah. Yadda yadda yadda blah blah blah.Yadda yadda yadda blah blah blah. Yadda yadda yadda blah blah blah.
Yadda yadda yadda blah blah blah. Yadda yadda yadda blah blah blah.Yadda yadda yadda blah blah blah. Yadda yadda yadda blah blah blah.
Yadda yadda yadda blah blah blah. Yadda yadda yadda blah blah blah.Yadda yadda yadda blah blah blah. Yadda yadda yadda blah blah blah.
Yadda yadda yadda blah blah blah. Yadda yadda yadda blah blah blah.Yadda yadda yadda blah blah blah. Yadda yadda yadda blah blah blah.
Yadda yadda yadda blah blah blah. Yadda yadda yadda blah blah blah.Yadda yadda yadda blah blah blah. Yadda yadda yadda blah blah blah.
Yadda yadda yadda blah blah blah. Yadda yadda yadda blah blah blah. Yadda yadda yadda blah blah blah. Yadda yadda yadda blah blah blah.
Yadda yadda yadda blah blah blah. Yadda yadda yadda blah blah blah. Yadda yadda yadda blah blah blah. Yadda yadda yadda blah blah blah.
Yadda yadda yadda blah blah blah. Yadda yadda yadda blah blah blah. Yadda yadda yadda blah blah blah. Yadda yadda yadda blah blah blah.
Yadda yadda yadda blah blah blah. Yadda yadda yadda blah blah blah. Yadda yadda yadda blah blah blah. Yadda yadda yadda blah blah blah.
Yadda yadda yadda blah blah blah. Yadda yadda yadda blah blah blah. Yadda yadda yadda blah blah blah. Yadda yadda yadda blah blah blah.
Yadda yadda yadda blah blah blah. Yadda yadda yadda blah blah blah. Yadda yadda yadda blah blah blah. Yadda yadda yadda blah blah blah.
Yadda yadda yadda blah blah blah. Yadda yadda yadda blah blah blah. Yadda yadda yadda blah blah blah. Yadda yadda yadda blah blah blah.</p>
</div>
</div>
<div id="nav">
<map name="ImageMap34258">
<area shape="rect" alt="Layer 3" coords="1,78,83,98" HREF=http://www.webdeveloper.com/forum/archive/index.php/"http://www.lilipadboats.com" TARGET="indexc">
<area shape="rect" alt="Layer 4" coords="0,108,83,131" HREF=http://www.webdeveloper.com/forum/archive/index.php/"http:www.lilipadboats.com/gallery.htm" TARGET="indexc">
<area shape="rect" alt="Layer 5" coords="0,141,82,161" HREF=http://www.webdeveloper.com/forum/archive/index.php/"http://www.lilipadboats.com/about.htm" TARGET="indexc">
<area shape="rect" alt="Layer 6" coords="0,172,82,193" HREF=http://www.webdeveloper.com/forum/archive/index.php/"http://www.lilipadboats.com/contact.htm" TARGET="indexc">
<area shape="rect" alt="Layer 7" coords="0,207,83,226" HREF=http://www.webdeveloper.com/forum/archive/index.php/"http://www.lilipadboats.com/orders.html" TARGET="indexc">
<area shape="rect" alt="Layer 8" coords="0,237,82,258" HREF=http://www.webdeveloper.com/forum/archive/index.php/"http://www.lilipadboats.com/faq.htm" TARGET="indexc">
</map>
<img SRC=http://www.webdeveloper.com/forum/archive/index.php/"nav.gif" width="95" height="411" usemap="#ImageMap34258">
</div>
</body>
</html>
 
You must log in or register to reply here.
Back
Top