Hi,
I'm new to CSS and, following some advice, created my page like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="pagecontainer">
<div id="header"></div>
<div id="subheader"></div>
<!--#include file="nav.txt" -->
<div id="mainnav">Page text content</div>
</div>
</body>
</html>
my "nav.txt" SSI is this:
<div id="leftnav">
<p><a href="index.shtml">Home Page</a></p>
<p><a href="another.shtml">Another Page</a></p>
</div>
My "stylesheet.css" is this:
body { font-family: Arial, Helvetica, sans-serif; font-size: 100.01%;
line-height: 150%; font-weight: normal; color: #666666; text-align: center;
background-color: #F0F0F0; margin-top: 0px; margin-bottom: 20px;
margin-left: 0px; margin-right: 0px; }
#pagecontainer { border: 2px solid #7F9D7F; background: #FFFFFF; margin: 0
auto; width: 728px; height: auto; position: relative; text-align: left;}
#header { left: 0px; top: 0px; right: 0px; height: 154px;
background-image: url(graphics/header-bucketriver.jpg); background-repeat:
no-repeat; }
#subheader { left: 0px; right: 0px; height: 38px; padding-left: 0px;
padding-right: 0px; background-image: url(graphics/whowhatwhenwhy.gif);
background-repeat: no-repeat; }
#leftnav { position: absolute; font-size: 0.9em; top: 192px; left: 0px;
width: 140px; background-color: #FFFFFF; border-width: 0px 1px 0px 0px;
border-style: dashed; border-color: #AABBDC; visibility: visible; }
#leftnav a { background-color: #FFFFFF; display: block; text-decoration:
none; border-width: 0px 0px 1px 0px; border-style: dashed; border-color:
#AABBDC; font-weight: bold; padding-left: 8px; vertical-align: middle;
color: #7F9D7F; }
#leftnav a:hover { background-color: #7F9D7F; display: block;
text-decoration: none; border-width: 0px 0px 1px 0px; border-style: dashed;
border-color: #AABBDC; font-weight: bold; padding-left: 8px; vertical-align:
middle; color: #FFFFFF; }
#mainnav { font-size: 0.8em; position: absolute; top: 192px; left: 141px;
width: 562px; background-color: #FFFFFF; text-align: left; padding-left:
12px; padding-right: 12px; height: auto; }
Now, the border specified in the page container only seems to wrap around
the header and subheader, but not around the nav.txt or mainnav? Here's
what it looks like: www.nathonjones.com/sitc/salmon.shtml
What do I need to change to make the pagecontainer wrap around everything?
Would really appreciate the help.
Thanks.
Nath.
