If I were you, I would assign the left border image to the body tag and repeat it vertically, then create a div that encompasses the entire page, and position the background image of the church into that div, and position it as needed. Make that div 100% wide and 100% high.
You would just have to make two div classes. One for the homepage, and one for the rest of the pages, so you could put a different background image on the homepage div than the other pages.
The side navigation should be done as an unordered list.
Code:
body {
background: url('images/leftsideimage.gif') repeat-y;
background-position: left top;
margin: 0;
padding: 0;
}
div.content {
background: url('image/churchimage.jpg') no-repeat;
background-position: /*add your position here*/;
width: 100%;
height: 100%;
}
div.navigation {
padding-top: 100px; /* or whatever */
padding-left: 40px; /*or whatever */
float: left;
}
ul {
list-style-type: none;
}
li {
font: 12px Tahoma, sans-serif; /* or whatever */
font-weight: bold;
line-height: 30px; /* or whatever */
}
li a {
color: blue;
text-decoration: none;
}
li a:hover {
color: purple;
}
div.copy {
float: left;
padding: 30px; /* or whatever */
}
Then the HTML would look something like this:
Code:
<html>
<head>
<title></title>
</head>
<body>
<div class="content">
<div class="navigation">
<ul>
<li>Nav Item Here</li>
<li>Nav Item Here</li>
<li>Nav Item Here</li>
</ul>
</div>
<div class="copy">
<h1>Unitarian Church</h1>
<p>Blah Blah Blah etc.</p>
</div>
</div>
</body>
Bookmarks