My images wont display inside my footer?

Get Started
1

I can’t figure out how to display the images in my footer. If you go to www.cteteleco.com you can see at the bottom in the footer that the images are not on the blue background but slightly below it. I want these images to display in the blue background as if they would on any normal footer on another website. Here’s my code below:

#footer  {
	position: relative;
	width: 100%;
	height: 65px;
	bottom: 0;
	left: 0;
	background: url(images/blackbg.png);
	margin-bottom: 40px;
	z-index: 2;
}

#copyrightlogo {
text-align: left;
margin-left:220px;
margin-right:auto;
padding: 25px 0px 0px 0px;
z-index: 3;
}

#logos {
position: relative;
float: right;
margin-left:auto;
margin-right:220px;
z-index: 1;
}

And this is the page where the footer code is written:

<style type="text/css">
a:link {text-decoration:none;}    /* unvisited link */
a:visited {text-decoration:none;} /* visited link */
a:hover {text-decoration:underline;color:#304152}   /* mouse over link */
a:active {text-decoration:underline;}  /* selected link */
</style>




<div id="footer">
<font color="#ffffff">
<div id="copyrightlogo">Copyright 2009 Corbell Telephone & Electronics, Inc.</div>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<div id="logos"><a href="https://twitter.com/cteteleco" target="_blank"><img src="images/twitter.png"></a>
<a href="https://www.facebook.com/cte.telecoCTE" target="_blank"><img src="facebook.png"></a>
<a href="http://lincolnschool.cteteleco.com/" target="_blank"><img src="images/lincolnlogo.png"></a></div>
	</font>
	
	</div>

And here is the section of the index page that calls up the footer to display (this is listed on each individual page of my site):

</div>
</div>	
</div>

<centeR>

<?php require("page/footer2.php")?>

</center>


</body>
</html>
2

There is some other stuff that is wrong on that page too but just to give you a quick fix add the following to your #copyrightlogo:

so it will be:

#copyrightlogo {
float: left;
text-align: left;
margin-left:220px;
margin-right:auto;
padding: 25px 0px 0px 0px;
z-index: 3;
}

Also remove the <font color=“#ffffff”> and its closing tag </font> that is around the #copyrightlogo div.

3

This moves the images up slightly, but it is not actually moving the Twitter, Facebook, and other logo up to where it is inside the blue background.

4

Why do you have all this:                                                                                                                                                                 

in there, remove this and check.

After that if you need some padding on top of the copyright text, just add some top padding to #copyrightlogo {}