Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Mar 2009
    Posts
    108
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Footer Layout Problem

    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
    Code:
    #footer_global 
    {
    	background-color: #FFFFFF;
    	font-family: helvetica,;
    	position: absolute;
    	left: 0px;
    	width: 812px;
    	height: auto;
    	z-index: 0;
    	bottom: auto;
    }

    ----------------Page Coding
    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" />
    
    <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>

  • #2
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    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:

    Code:
    #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. Code semantically and use CSS instead.
    2. Consider specifying some fallback fonts for those users who don't have Helvetica installed, e.g.

    Code:
    font-family: helvetica, arial, verdana, sans-serif;
    matt | design | blog

  • #3
    Regular Coder
    Join Date
    Mar 2009
    Posts
    108
    Thanks
    13
    Thanked 0 Times in 0 Posts
    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.
    Code:
    @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;
    }
    Last edited by CSSQuest; 03-10-2009 at 03:39 PM.

  • #4
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    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 or here) and drop your images into it. Learn how to code properly using CSS and you'll end up with a page that's meaningful (code-wise), efficient, attractive and easy to modify.
    matt | design | blog

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Are you trying to make something like http://bonrouge.com/2c-hf-fixed.php
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    CSSQuest (03-10-2009)

  • #6
    Regular Coder
    Join Date
    Mar 2009
    Posts
    108
    Thanks
    13
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Are you trying to make something like http://bonrouge.com/2c-hf-fixed.php
    Thats exactly what I was looking for. Thanks much everyone.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •