Footer Layout Problem [Archive]

View Full Version : Footer Layout Problem

CSSQuest

Mar 10th, 2009, 04:16 PM

Hey Guys,

It's turning out to be 'one of those days'. I thought I had a pretty good understanding of using containers and a footers 'bottom' property to make sure the footer lines up with the last elements of the page. I've set it up in code and just can't seem to find why the footer is showing up at the top of the page.

Anyone spot the problem?

-----------> CSS references outside file

#footer_global
{
background-color: #FFFFFF;
font-family: helvetica,;
position: absolute;
left: 0px;
width: 812px;
height: auto;
z-index: 0;
bottom: auto;
}

----------------Page Coding

<!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" />

<link href="css_layout.css" rel="stylesheet" type="text/css" />
<link href="css_fonts.css" rel="stylesheet" type="text/css" />

<style type="text/css">
#body_container
{
background-color: #FFFFFF;
font-family: helvetica,;
margin:0;
padding:0;
position: absolute;
left: 0px;
top: 216px;
width: 812px;
height: 277;
z-index: 0;
}

#site_container
{
background-color: #FFFFFF;
font-family: helvetica,;
margin:0;
padding:0;
position: absolute;
left: 30px;
top: 50px;
width: 812px;
height: auto;
z-index: 0;
}

</style>

</head>

<body>

<div id="site_container">

<div id="header_global">

<table id="Global_Header" width="812" height="216" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">
<img src="images/global_header_01.jpg" width="480" height="51" alt=""></td>
<td>
<img src="images/global_header_02.jpg" width="163" height="51" alt=""></td>
<td>  </td>
</tr>

<tr>
<td colspan="3">
<img src="images/global_header_04.jpg" width="480" height="52" alt=""></td>
<td>  </td>
<td>  </td>
</tr>

<tr>
<td rowspan="3">
<a href="index.html"><img src="images/global_header_07.jpg" width="157" height="113" alt="Ask_Bob" border="0"></a></td>
<td rowspan="3">
<a href="main_P3_input.html"><img src="images/global_header_08.jpg" width="161" height="113" alt="Project_Pricing_Profiler" border="0"></a></td>
<td rowspan="3">
<a href="main_identify_input.html"><img src="images/global_header_09.jpg" width="162" height="113" alt="Identity_Local_Companies" border="0"></a></td>
<td rowspan="3">
<a href="main_workshop_input.html"><img src="images/global_header_10.jpg" width="163" height="113" alt="Workshop_Opportunities" border="0"></a></td>
<td>
<img src="images/global_header_11.jpg" width="169" height="21" alt=""></td>
</tr>

<tr>
<td>
<a href="http://www.churchsolutionsmag.com/" target="_blank"><img src="images/global_header_12.jpg" width="169" height="83" alt="Featured_Sponsor" border="0"></a></td>
</tr>

<tr>
<td>
<img src="images/global_header_13.jpg" width="169" height="9" alt=""></td>
</tr>
</table>

</div>

<div id="body_container">

<div id="body_main_global">
<img src="images/index_body.jpg" width="642" height="277" alt="Ask_Bob">
</div>

<div id="sponsors_global">

<table id="Global_Sponsors" width="170" height="277" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="4">
<img src="images/global_sponsors_01.jpg" width="7" height="277" alt=""></td>
<td>
<img src="images/global_sponsors_02.jpg" width="163" height="19" alt=""></td>
</tr>
<tr>
<td>
<a href="http://www.csdus.com" target="_blank"><img src="images/global_sponsors_03.jpg" width="163" height="89" alt="CSD" border="0"></a></td>
</tr>
<tr>
<td>
<a href="http://trane.com/Default.asp" target="_blank"><img src="images/global_sponsors_04.jpg" width="163" height="71" alt="Trane" border="0"></a></td>
</tr>
<tr>
<td>
<a href="http://www.****ersonandassociates.com/" target="_blank"><img src="images/global_sponsors_05.jpg" width="163" height="98" alt="****erson_And_Associates" border="0"></a></td>
</tr>
</table>

</div>

</div>

<div id="footer_global">

<table id="Global_Footer" width="812" height="140" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="9">
<img src="images/global_footer_01.jpg" width="479" height="17" alt=""></td>
<td rowspan="3"><img src="images/global_footer_02.jpg" width="164" height="93" alt="" /></td>
<td rowspan="3">
<a href="index.html"><img src="images/global_footer_03.jpg" width="169" height="93" alt="Brought_To_You_by_NACDB" border="0"></a></td>
</tr>
<tr>
<td>
<a href="info_building_main.html"><img src="images/global_footer_04.jpg" width="105" height="21" alt="Building_A_Church" border="0"></a></td>
<td>
<img src="images/global_footer_05.jpg" width="3" height="21" alt=""></td>
<td>
<a href="info_qualifications_main.html"><img src="images/global_footer_06.jpg" width="92" height="21" alt="Our_Qualifications" border="0"></a></td>
<td>
<img src="images/global_footer_07.jpg" width="4" height="21" alt=""></td>
<td>
<a href="info_resources_main.html"><img src="images/global_footer_08.jpg" width="90" height="21" alt="Church_Resources" border="0"></a></td>
<td>
<img src="images/global_footer_09.jpg" width="3" height="21" alt=""></td>
<td>
<a href="info_about_main.html"><img src="images/global_footer_10.jpg" width="67" height="21" alt="About_NACDB" border="0"></a></td>
<td>
<img src="images/global_footer_11.jpg" width="3" height="21" alt=""></td>
<td>
<a href="info_contact_main.html"><img src="images/global_footer_12.jpg" width="112" height="21" alt="Contact_Us" border="0"></a></td>
</tr>
<tr>
<td colspan="9">
<img src="images/global_footer_13.jpg" width="479" height="55" alt=""></td>
</tr>
<tr>
<td colspan="11">
<img src="images/global_footer_14.jpg" width="812" height="47" alt="Copyright_Information"></td>
</tr>
</table>

</div>

</div>

</body>
</html>

BoldUlysses

Mar 10th, 2009, 04:28 PM

Is your goal to have a footer that sits at the bottom of the browser window and overlaps the content (like the Facebook bottom panel), or to have a footer sits at the very end of the content, even when the content makes the page scroll? If it's the latter, then you won't get that with absolute positioning, since it removes the footer from the flow of the page and prevents it from interacting with the other elements.

If it's the first case (the "Facebook footer"), then try this:

#footer_global
{
background-color: #FFFFFF;
font-family: helvetica,;
position: absolute;
left: 0px;
width: 812px;
height: auto;
z-index: 0;
bottom: 0;
}

To be of more assistance we'll need to see your entire external CSS files and/or (preferably) a link to your page so we can see the images as well.

A couple other things of note about your code:

1. Tables are bad for layout (http://phrogz.net/css/WhyTablesAreBadForLayout.html). Code semantically (http://www.boagworld.com/technology/semantic_code_what_why_how/) and use CSS instead.
2. Consider specifying some fallback fonts for those users who don't have Helvetica installed, e.g.

font-family: helvetica, arial, verdana, sans-serif;

CSSQuest

Mar 10th, 2009, 04:31 PM

I'm aimin to have the footer sit at the very end of the content. I don't have it online (its for a client and I can't post it until its ready).

The idea was to have something like

HEADER
B1 B2
FOOTER

B1= Main Body Content
B2= 2nd Body Content

Here's the rest of the css it references.

@charset "UTF-8";
/* CSS Document */

#body_info_global
{
background-color: #FFFFFF;
font-family: helvetica,;
margin:0;
padding:0;
position: absolute;
left: 0px;
top: 0px;
width: 642px;
height: auto;
z-index: 0;
}

#body_main_global
{
background-color: #FFFFFF;
font-family: helvetica,;
margin:0;
padding:0;
position: absolute;
left: 0px;
top: 0px;
width: 642px;
height: 277px;
z-index: 0;
}

#footer_global
{
background-color: #FFFFFF;
font-family: helvetica,;
position: absolute;
left: 0px;
width: 812px;
height: auto;
z-index: 0;
bottom: 0px;
}

#header_global
{
background-color: #FFFFFF;
font-family: helvetica,;
margin:0;
padding:0;
position: absolute;
left: 0px;
top: 0px;
width: 812px;
height: auto;
z-index: 0;
}

#sponsors_global
{
background-color: #FFFFFF;
font-family: helvetica,;
margin:0;
padding:0;
position: absolute;
left: 643px;
top: 0px;
width: 170px;
height: 277;
z-index: 0;
}

BoldUlysses

Mar 10th, 2009, 04:47 PM

From your markup, I'm guessing you mocked up the layout in Photoshop, sliced it up and exported it as HTML? At best, that's going to generate bloated code; at worst it makes the page impossible to work with afterward.

HEADER
B1 B2
FOOTER

B1= Main Body Content
B2= 2nd Body Content

You have a good idea of what your layout needs to look like--that's good. A better approach to laying out the page would be to find a template (look here (http://blog.html.it/layoutgala/) or here (http://bonrouge.com/3c-hf-fluid-lc.php)) and drop your images into it. Learn how to code properly using CSS (http://www.w3schools.com/) and you'll end up with a page that's meaningful (code-wise), efficient, attractive and easy to modify.

abduraooft

Mar 10th, 2009, 04:48 PM

Are you trying to make something like http://bonrouge.com/2c-hf-fixed.php

CSSQuest

Mar 10th, 2009, 04:53 PM

Are you trying to make something like http://bonrouge.com/2c-hf-fixed.php

Thats exactly what I was looking for. Thanks much everyone.