I volunteered to help my church with their website, but now I need help. The website is at http://www.gbgm-umc.org/heathumc/test.html and what I want to do is put it into table and then put that table into a CSS (i'm really unsure as to how to format the CSS) so that the banner and menu are on every page with only a little coding. It needs a lot of work. My next project is going to be a log book on one page and a picture show on another (kinda like they have on myspace with lots of pictures constantly looping)
So if anyone knows how to do that It would be really helpful too.

I don't care if it looks like frames I just want to have the banner and menu on the pages I want without cluttering every page with code.
I have very little experience with anything other than basic coding


none of the links work, this is just a sampling if you help me with the main I should be able to do the rest. Thanks again.

The idea behind this is that I want a site that is easily editable and searchable, apparently frames can cause issues with search engines, or so I have been told.


thanks

I'm thinking something like this from w3.org
* {
margin : 0;
padding : 0;
}
body {
background : #000000 url(images/img01.gif) repeat-x top left;
font-family : Arial, Helvetica, sans-serif;
font-size : 13px;
padding : 0;
color : #c3c3c3;
}
h1, h2, h3 {
color : #ffffff;
}
h1, h1 a, h2, h2 a {
text-decoration : none;
}
h1 a:hover, h2 a:hover {
text-decoration : underline;
}
h1 {
font-size : 28px;
}
h2 {
font-size : 18px;
font-weight : normal;
}
h3 {
font-size : 14px;
}
ul, ol {
margin-left : 3em;
}
a {
color : #d6974a;
}
a:hover {
text-decoration : none;
}
#header {
width : 754px;
height : 331px;
}
#logo {
width : 624px;
height : 120px;
padding : 2px;
padding-left : 30px;
padding-top : 130px;
}
#logo h1, #logo h2 {
margin : 0;
padding : 0;
}
#logo h1 {
padding : 10px 5px 0 20px;
font-size : 18px;
font-family : Arial, Helvetica, sans-serif;
font-weight : bold;
color : #31363b;
}
#logo h2 {
padding : 0 0 0 20px;
font-size : 10px;
font-weight : bold;
font-family : Arial, Helvetica, sans-serif;
color : #808080;
}
#logo p {
margin : 0;
padding : 0 0 0 20px;
line-height : normal;
font-size : 1.2em;
font-weight : bold;
}
#logo a {
color : #ffffff;
}
#splash {
width : 754px;
height : 266px;
padding-bottom : 3px;
background : url(images/img04.jpg) no-repeat left top;
}
#splashed {
width : 754px;
height : 266px;
padding-bottom : 3px;
background : url(images/edlogo.gif) no-repeat center center;
}
#header {
width : 754px;
margin : 0 auto;
}
#menu {
height : 60px;
width : 634px;
padding-left : 120px;
background : url(images/img02.jpg) no-repeat left top;
font-family : Arial, Helvetica, sans-serif;
}
#menu ul {
margin : 0;
padding : 0;
list-style : none;
line-height : normal;
}
#menu li {
float : left;
}
#menu a {
display : block;
float : left;
padding : 20px 20px 15px 18px;
margin-right : 1px;
height : 30px;
text-decoration : none;
text-transform : uppercase;
font-size : 10px;
color : #ffffff;
}
#menu a:hover {
color : #ffffff;
background : url(images/menu_bg.gif) repeat-x;
}
#menu .current_page_item a {
background : url(images/menu_bg.gif) repeat-x;
color : #ffffff;
}
#wrapper {
width : 900px;
margin : 0 auto;
background : url(images/img05.jpg) repeat-x left top;
}
#page {
width : 900px;
margin : 0 auto;
padding-top : 20px;
}
#content {
float : right;
width : 500px;
}
.post .title {
margin : 0;
padding : 10px 20px 10px 10px;
border-bottom : 1px dotted #d6c9bf;
}
.post h1.title {
padding : 5px 0 0 50px;
height : 40px;
font-size : 2.4em;
text-transform : lowercase;
}
.post .title a:hover {
text-decoration : none;
}
.post .entry {
margin : 0;
padding : 20px 20px;
}
.post .meta {
height : 25px;
margin : 15px 0 20px 0;
padding : 15px 0 0 20px;
line-height : normal;
font-size : 10px;
background : url(images/img05.jpg) repeat-x left top;
}
.post a {
color : #d6974a;
}
#sidebar {
float : left;
}
#sidebar ul {
margin : 0;
padding : 0;
list-style : none;
line-height : normal;
}
#sidebar li {
margin-bottom : 40px;
}
#sidebar li ul {
padding-left : 25px;
}
#sidebar li li {
margin : 0;
padding : 5px 10px;
border-bottom : 1px dotted #d6c9bf;
}
#sidebar li h2 {
margin : 0 0 1em 0;
padding : 15px 0 5px 25px;
height : 30px;
text-transform : lowercase;
font-size : 28px;
letter-spacing : -1px;
}
#sidebar li p {
padding : 0 20px;
}
#footer {
clear : both;
width : 100%;
height : 50px;
margin : 0 auto;
background : #ffffff url(images/footer.gif) repeat-x top left;
text-align : center;
padding-top : 30px;
}
#footer p {
margin : 0;
font-size : 10px;
}
#footer a {
font-size : 10px;
}

But I don't understand the elements, how do I make this my menu? Hope this makes sense