How do I fix an image to the window..... [Archive]

SailorPizza

08-19-2004, 11:12 AM

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

JavaHead Jonnie

08-19-2004, 11:33 AM

<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.

SailorPizza

08-19-2004, 12:06 PM

w00tah!! that's getting it there.
Here's what I originally started using frames (http://www.geocities.com/sailorpizza01) ... 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.
:p

Paul Jr

08-19-2004, 06:36 PM

This 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.lilipadboats.com" TARGET="indexc">
<area shape="rect" alt="Layer 4" coords="0,108,83,131" HREF="http:www.lilipadboats.com/gallery.htm" TARGET="indexc">
<area shape="rect" alt="Layer 5" coords="0,141,82,161" HREF="http://www.lilipadboats.com/about.htm" TARGET="indexc">
<area shape="rect" alt="Layer 6" coords="0,172,82,193" HREF="http://www.lilipadboats.com/contact.htm" TARGET="indexc">
<area shape="rect" alt="Layer 7" coords="0,207,83,226" HREF="http://www.lilipadboats.com/orders.html" TARGET="indexc">
<area shape="rect" alt="Layer 8" coords="0,237,82,258" HREF="http://www.lilipadboats.com/faq.htm" TARGET="indexc">
</map>
<img SRC="nav.gif" width="95" height="411" usemap="#ImageMap34258">
</div>
</body>
</html>