Hi Everyone,
I am currently having problems creating four separate sections at the bottom of the footer to be from : one for the sitemap (text/links to be vertical links within that section), one for sponsor images, one for the business logo, and of logo national organization logo. Also, for some reason, the "ABOUT" button wants to keep hiding under the "HOME" button and is removed when the page is live, and it should show all of them. I can't seem to figure out to fix this problem. Can someone tell me what my errors are?
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Welcome to PAMA (Parkside American Marketing Association)</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<style type="text/css">
<!--
#wrapper #bod strong {
font-family: Tahoma, Geneva, sans-serif;
}
-->
</style>
</head>
<body onload="MM_preloadImages('images/buttons/facebook_down.png','images/buttons/twitter_down.png','images/buttons/youtube_down.png','images/buttons/campusconnect_down.png','images/buttons/nav_aboutdown.gif','images/buttons/nav_eventsdown.gif','images/buttons/nav_membersdown.gif','images/buttons/nav_contactdown.gif','images/buttons/nav_homedown.gif')">
<div id="wrapper">
<div id="header">
<div id="logo"><a href="index.html"><img src="images/buttons/PAMA_wlogo.png" width="262" height="150" alt="PAMA" /></a></div>
<div id="socialbar"><a href="http://www.facebook.com/pama" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('facebook','','images/buttons/facebook_down.png',1)"><img src="images/buttons/facebook_up.png" alt="facebook" name="facebook" width="48" height="48" border="0" id="facebook" /> </a><a href="http://www.twitter.com/pama" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('twitter','','images/buttons/twitter_down.png',1)"><img src="images/buttons/twitter_up.png" alt="twitter" name="twitter" width="48" height="48" border="0" id="twitter" /> </a><a href="http://www.youtube.com/pama" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('youtube','','images/buttons/youtube_down.png',1)"><img src="images/buttons/youtube_up.png" alt="youtube" name="youtube" width="48" height="48" border="0" id="youtube" /> </a><a href="http://www.campusconnect.uwp.edu/pama" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('campus connect','','images/buttons/campusconnect_down.png',1)"><img src="images/buttons/campusconnect_up.png" alt="campus connect" name="campus connect" width="48" height="48" border="0" id="campus connect" /></a></div>
</div>
<div id="navbar">
<div id="home"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/buttons/nav_homedown.gif',1)"><img src="images/buttons/nav_homeup.gif" alt="home" name="home" width="180" height="35" border="0" id="home2" /></a></div>
<div id="about"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('about','','images/buttons/nav_aboutdown.gif',1)"><img src="images/buttons/nav_aboutup.gif" alt="about" name="about" width="180" height="35" border="0" id="about2" /></a></div>
<div id="events"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('events','','images/buttons/nav_eventsdown.gif',1)"><img src="images/buttons/nav_eventsup.gif" alt="events" name="events" width="180" height="35" border="0" id="events2" /></a></div>
<div id="members"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('members','','images/buttons/nav_membersdown.gif',1)"><img src="images/buttons/nav_membersup.gif" alt="members" name="members" width="180" height="35" border="0" id="members2" /></a></div>
<div id="contact"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','images/buttons/nav_contactdown.gif',1)"><img src="images/buttons/nav_contactup.gif" alt="contact" name="contact" width="180" height="35" border="0" id="contact2" /></a></div>
</div>
<div id="bod">
<p><strong>ABOUT US</strong></p>
<p>Our Mission Statement</p>
<p> </p>
</div>
<div id="footer">
<div id="footer ama">
<p>National AMA</p>
<p> <img src="images/buttons/ama.png" width="180" height="66" alt="AMA" /></p>
</div>
<div id="footer site">SITE MAP</div>
</div>
</div>
</body>
</html>
CSS Code:
@charset "UTF-8";
body {
background-color: #161A16;
}
#wrapper {
position: relative;
width: 960px;
margin-right: auto;
margin-left: auto;
}
#header {
font-family: Verdana, Geneva, sans-serif;
background-color: #161A16;
width: 960px;
height: 165px;
}
#wrapper #header #logo {
float:left;
width: 300px;
margin-top: 7px;
margin-bottom: 8px;
}
a img {
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
#wrapper #header #socialbar{
margin-top: 109px;
height: 48px;
width: 219px;
float: right;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
#navbar {
background-color: #090;
height: 35px;
width: 960px;
background-image: url(../images/buttons/nav_gradient.jpg);
background-repeat: repeat-x;
}
#home {
margin: 0px;
float: left;
}
#about {
width: 0px;
float: left;
}
#events {
margin: 0px;
float: left;
position: static;
}
#members {
margin: 0px;
float: left;
position: static;
}
#contact {
margin: 0px;
float: left;
position: static;
}
#bod {
background-color: #FFF3DC;
padding: 10px;
font-family: Tahoma, Geneva, sans-serif;
text-align: left;
}
#footer {
background-color: #090;
height: 178px;
width: 960px;
background-image: url(../images/buttons/footer_gradient);
background-repeat: repeat-x;
font-family: Tahoma, Geneva, sans-serif;
color: #FFF;
font-size: 11px;
padding: 1px;
text-align: left;
}
#footer ama {
width: 300px;
height: 250px;
Top:200px;
Left:0px;
position: absolute;
padding: 20px 20px 20px 20px;
overflow: auto;
background-color:#FF0}
}
#footer site{
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
color: #FFF;
top: 0px;
bottom: 18px;
left: 0px;
right: 720px;
float: left;
}
Any help would be greatly appreciated.
Thanks,
Before you post, read our: 
