...

View Full Version : Footer Layout Problem



CSSQuest
03-10-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">
<!-- ImageReady Slices (global_header.psd) -->
<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>&nbsp; </td>
</tr>

<tr>
<td colspan="3">
<img src="images/global_header_04.jpg" width="480" height="52" alt=""></td>
<td>&nbsp; </td>
<td>&nbsp; </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>
<!-- End ImageReady Slices -->
</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">
<!-- ImageReady Slices (sponsors.psd) -->
<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>
<!-- End ImageReady Slices -->
</div>


</div>

<div id="footer_global">
<!-- ImageReady Slices (global_footer.psd) -->
<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>
<!-- End ImageReady Slices -->
</div>

</div>

</body>
</html>

BoldUlysses
03-10-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
03-10-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
03-10-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
03-10-2009, 04:48 PM
Are you trying to make something like http://bonrouge.com/2c-hf-fixed.php

CSSQuest
03-10-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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum