I have VERY LITTLE experience working with tables, so please bear with me in this.
I set up the content and footer as tables...and it turned out quite well except for one little problemo...for some reason my table.content class have been shoved way down...and I'm not sure what I could have accidentally done to have moved down so far.
HTML Code:
body {
background:#4D754B;background: rgb(222,239,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(222,239,255,1) 0%, rgba(152,190,222,1) 100%); /*
FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(222,239,255,1)),
color-stop(100%,rgba(152,190,222,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(222,239,255,1) 0%,rgba(152,190,222,1) 100%); /*
Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(222,239,255,1) 0%,rgba(152,190,222,1) 100%); /*
Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(222,239,255,1) 0%,rgba(152,190,222,1) 100%); /*
IE10+ */
background: linear-gradient(to bottom, rgba(222,239,255,1) 0%,rgba(152,190,222,1) 100%); /*
W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#deefff',
endColorstr='#98bede',GradientType=0 ); /* IE6-9 */
font-family:Arial, Tahoma, sans-serif;
font-size:12px;
color:#000000;
}
a {
color:#0489B1;
text-decoration:none;
}
a:hover {
color:#6CC7DC;
text-decoration:none;
}
#header {
float:center;
background: rgb(167,207,223); /* Old browsers */
background: -moz-linear-gradient(top, rgba(167,207,223,1) 0%, rgba(35,83,138,1) 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba
(167,207,223,1)), color-stop (100%,rgba(35,83,138,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(167,207,223,1) 0%,rgba(35,83,138,1)
100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); /*
Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); /*
IE10+ */
background: linear-gradient(to bottom, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf',
endColorstr='#23538a',GradientType=0 ); /* IE6-9 */
width:800px;
height:100px;
border-top-left-radius:15px;
border-top-right-radius:15px;
padding:10px;
}
#header h1 {
font-size:30px;
color:#ffffff;
font-family:Arial;
letter-spacing:8px;
}
#cssmenu {width:820px;}
#cssmenu ul {margin: 0; padding: 7px 6px 0; background: #4C9ACE url(overlay.png) repeat-x 0
-110px; line-height: 100%; font: normal 12px Arial, Helvetica, sans-serif; -webkit-box-shadow: 0
1px 3px rgba(0,0,0, .4); -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);}
#cssmenu li {margin: 0 5px; padding: 0 0 8px; float: left; position: relative; list-style: none; }
#cssmenu a,
#cssmenu a:link {font-weight: bold; color: #ffffff; text-decoration: none; display: block; padding:
8px 20px; margin: 0; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;
text-shadow: 0 1px 1px rgba(0,0,0, .3); }
#cssmenu a:hover {background: #000; color: #fff;}
#cssmenu .active a,
#cssmenu li:hover > a {background: #89BFE3 url(overlay.png) repeat-x 0 -40px; color: #444; -
webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2); -moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
box-shadow: 0 1px 1px rgba(0,0,0, .2); text-shadow: 0 1px 0 rgba(255,255,255, 1); }
#cssmenu ul ul li:hover a,
#cssmenu li:hover li a {background: none; border: none; color: #666; -webkit-box-shadow:
none; -moz-box-shadow: none;}
#cssmenu ul ul a:hover {background: #8f8f8f url(overlay.png) repeat-x 0 -100px !important;
color: #fff !important; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
text-shadow: 0 1px 1px rgba(0,0,0, .1);}
#cssmenu li:hover > ul {display: block;}
#cssmenu ul ul {display: none; font-size: 10px; margin: 0; padding: 0; width: 185px; position:
absolute; top: 40px; left: 0; background: #ddd url(overlay.png) repeat-x 0 0; border: solid 1px
#b4b4b4; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-
box-shadow: 0 1px 3px rgba(0,0,0, .3); -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3); box-
shadow: 0 1px 3px rgba(0,0,0, .3);}
#cssmenu ul ul li {float: none; margin: 0; padding: 3px; }
#cssmenu ul ul a {font-weight: normal; text-shadow: 0 1px 0 #fff; }
#cssmenu ul:after {content: '.'; display: block; clear: both; visibility: hidden; line-height: 0; height:
0;}
* html #cssmenu ul {height: 1%;}
#content {
background:#ffffff;
width:800px;
padding:10px;
}
table.content {
background:#ffffff;
text-align:center;
width:800px;
}
td.menu {
background:#DCEFF7;
text-align:center;
width:150px;
height:300px;
padding:10px;
border-radius:15px;
}
#footer {
clear:both;
background: rgb(167,207,223); /* Old browsers */
background: -moz-linear-gradient(top, rgba(167,207,223,1) 0%, rgba(35,83,138,1) 100%); /*
FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(167,207,223,1)),
color-stop(100%,rgba(35,83,138,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); /*
Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); /* Opera
11.10+ */
background: -ms-linear-gradient(top, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); /* IE10+
*/
background: linear-gradient(to bottom, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); /*
W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf',
endColorstr='#23538a',GradientType=0 ); /* IE6-9 */
color:#ffffff;
width:800px;
text-align:center;
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
padding:10px;
}
table.footer {
color:#ffffff;
width:800px;
text-align:center;
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
padding:10px;
}
#footer a {
color:#ffffff;
text-decoration:none;
}
h2 {
text-align:left;
font-size:20px;
color:#4AA4C7;
}