View Full Version : Problems with the footer image..

12-24-2009, 05:14 AM
Well, I finally decided to update an old website, but as I was updating it, the header and footer did show the way I wanted it to show up. The footer image does not stretch all the way to the left/right. As well, the header image is too tall, making everything else lower down on the page.

Here's the code, I'm sorry I don't have a domain name yet, so I just uploaded to a filehost. http://www.mediafire.com/?mwaldzu2zwy You should be able to see what I'm talking about pretty quickly..

Thanks in advance.

12-24-2009, 09:39 AM
Hello shadowsai,
You're missing the closing tag for #container.
Make your markup look like this -
<p>Kabok Music School offers lessons <b>throughout</b> the school year and during the summer. <b>Intake is continuous</b>. Tuition is calculated by school year and depends on the date of enrolment as well as the length, type and frequency of lessons.
Please call us at 604-517-4551 for more information about fees. If you are interested in taking lessons, we invite you to make an appointment for a no-commitment interview with one of our teachers. This interview is free. Please see our <a href="faculty.htm">Faculty </a> page for teacher photos and biographies. </p>
<div class="margin_bottom_10"></div>
<div class="rc_btn_02"><a href="register.htm">More Info...</a></div>
<div class="margin_bottom_30"></div>
<div class="cleaner"></div>
<!-- end of content right --></div>
<!-- end of container --></div>
<div id="footer_wrapper">
<div id="footer"> Copyright 2009 <a href="index.htm">Kabok Music School</a> | Designed by <b>ѕαι</b></a> </div>
<!-- end of footer -->

It would be best to crop that image your using for a background on your header.
This kind of works for now too...adjust the highlighted parts to your liking -

body {
margin: 0;
padding: 0;
line-height: 1.5em;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666;
background: #fff url(images/main_bg.jpg) repeat-x 0 -125px;
#content_right2 #top_menu {
height: 40px;
text-align: right;
/*padding-top: 70px;*/
padding-right: 30px;
padding-bottom: -20px;
padding-left: 0;

#site_title {

color: #e0f2e8;
height: 105px;
padding: 50px 0 0 0;

12-25-2009, 06:31 PM
Thanks, the header is all fixed now.. I never noticed that I forgot the closing tag for the container. But the footer still is the same? It doesn't stretch the whole screen like the header does. Any ideas guys?