Wordpress: Footer sticking "below the fold"

Discussion in 'Web Design' started by jodybethw, Jan 4, 2012.

to remove all ads.
  1. jodybethw

    jodybethw New Member

    Messages:
    4
    I am working on a Wordpress theme in which I want to have a sticky footer. Instead of sticking to the bottom of the screen, the footer is showing up about 180px too low so that I have to scroll the window to see it -- regardless of whether the page is empty or is full of content above the fold. I have spent hours literally reading the CSS file (it's huge) to find the problem and I'm getting nowhere. Any help appreciated!

    Applicable CSS:

    Code:
    body,html{height:100%;}
    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;outline:0;font-
    
    size:100%;vertical-align:top;background:transparent;margin:0;padding:0;}
    body{line-height:1;}
    ol,ul{list-style:none;}
    blockquote,q{quotes:none;}
    blockquote:before,blockquote:after,q:before,q:after{content:none;}
    :focus{outline:0;}
    del{text-decoration:line-through;}
    table{border-collapse:collapse;border-spacing:0;}
    
    /* Floating & Alignment  */
    .fl{float:left;}
    .fr{float:right;}
    .ac{text-align:center;}
    .ar{text-align:right;}
    
    /* Clear Floats  */
    .col-full:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
    .fix{clear:both;height:1px;overflow:hidden;margin:-1px 0 0;}
    html body * span.clear,html body * div.clear,html body * li.clear,html body * dd.clear
    
    {background:none;border:0;clear:both;display:block;float:none;font-size:0;list-
    
    style:none;overflow:hidden;visibility:hidden;width:0;height:0;margin:0;padding:0;}
    
    /* 1.1 Defaults */
    
    body { font: 12px/1.5em sans-serif; color: #444; background-color: #FFFFFF; background-image: url(images/bg-body-tile.png); background-repeat: repeat; background-position: left top; }
    
    p {margin: 0; }
    
    hr { background-color: #e6e6e6;	border:0; height: 1px; margin-bottom: 20px; }
    
    /* 2.1 Containers & Columns */
    #wrapper  { min-height: 100%; margin: 0 auto -4em; background: transparent url(images/wrapper-bg-colourstrip.jpg) repeat-x left top; padding-top: -5px; }
    
    #main{width:900px; overflow:auto; }
    #main.fullwidth, .layout-full #main, .col-full {width: 900px; margin:0 auto; }
    
    #sidebar{width:250px;}
    #sidebar .secondary { width:140px; } 
    
    .entry img { max-width:565px; }
    .layout-full .entry img { max-width:890px; }
    
    .col-left { float: left; }
    .col-right { float: right; }
    
    .two-col-right #main { float:right; }
    .two-col-right #sidebar { float:left; }
    
    /* 2.4 Content */
    #content{padding:0 0 2em; }
    
    /* 2.6 Footer */
    #footer{position: relative; margin-top: -50px; height: 50px; clear: both; padding: 10px 0 0 40px; 
    
    background: url(images/bg-minifeatures.png) repeat top; color:#999; }
    #footer p {}
    #footer a { color: #ffffff; }
    #footer #credit img{vertical-align:middle;}
    #footer #credit span{display:none;}
    
    #footer-widgets { margin-bottom: -5px; background: url(images/bg-ripple-footer.png) repeat top left; 
    
    background-size:205px 411px; padding:0 0 0 0; }
    #footer-widgets .block { padding:20px 10px 0 10px; float:left; }
    #footer-widgets .col-1 .block { width:100%; padding-left:0; }
    #footer-widgets .col-2 .block { width:420px; padding-left: 20px; }
    #footer-widgets .col-3 .block { width:270px; padding-left: 16px;  }
    #footer-widgets .col-4 .block { width:200px; padding-left: 10px;  }
    
    PHP:
    <?php

    global $woo_options;
    ?><!DOCTYPE html>
    <html <?php language_attributes(); ?>>
    <head>
    <meta charset="<?php bloginfo'charset' ); ?>" />
    <title><?php woo_title(); ?></title>
    <?php woo_meta(); ?>
    <link rel="stylesheet" type="text/css" href="<?php bloginfo'stylesheet_url' ); ?>" media="screen" />
    <link rel="pingback" href="<?php bloginfo'pingback_url' ); ?>" />

    <?php wp_head(); ?>
    <?php woo_head
    (); ?>

    </head>

    <body <?php body_class(); ?>>
    <?php woo_top(); ?>

    <div id="wrapper">

        <?php if ( function_exists'has_nav_menu' ) && has_nav_menu'top-menu' ) ) { ?>

        <div id="top">
            <div class="col-full">
                <?php wp_nav_menu( array( 'depth' => 6'sort_column' => 'menu_order''container' => 'ul''menu_id' => 'top-nav''menu_class' => 'nav fl''theme_location' => 'top-menu' ) ); ?>
            </div>
        </div><!-- /#top -->

        <?php ?>
        <div id="header">
            <div class="col-full">
                <div id="logo">
                <?php
    $logo 
    get_template_directory_uri() . '/images/logo.png';
    if ( isset( 
    $woo_options['woo_logo'] ) && $woo_options['woo_logo'] != '' ) { $logo $woo_options['woo_logo']; }
    ?>
                <?php if ( ! isset( $woo_options['woo_texttitle'] ) || $woo_options['woo_texttitle'] != 'true' ) { ?>
                    <a href="<?php echo home_url'/' ); ?>" title="<?php bloginfo'description' ); ?>">
                        <img src="<?php echo $logo?>" alt="<?php bloginfo'name' ); ?>" />
                    </a>
                <?php ?>

                <?php if( is_singular() && ! is_front_page() ) { ?>
                    <span class="site-title"><a href="<?php echo home_url'/' ); ?>"><?php bloginfo'name' ); ?></a></span>
                <?php } else { ?>
                    <h1 class="site-title"><a href="<?php echo home_url'/' ); ?>"><?php bloginfo'name' ); ?></a></h1>
                <?php }; ?>
                    <span class="site-description"><?php bloginfo'description' ); ?></span>

                </div><!-- /#logo -->

                <div id="navigation" class="fr">

                    <?php
    if ( function_exists'has_nav_menu' ) && has_nav_menu'primary-menu' ) ) {
        
    wp_nav_menu( array( 'sort_column' => 'menu_order''container' => 'ul''menu_id' => 'main-nav''menu_class' => 'nav fl''theme_location' => 'primary-menu' ) );
    } else {
    ?>
                    <ul id="main-nav" class="nav fl">
                        <?php
        
    if ( get_option'woo_custom_nav_menu' ) == 'true' ) {
            if ( 
    function_exists'woo_custom_navigation_output' ) )
                
    woo_custom_navigation_output"name=Woo Menu 1" );

        } else { 
    ?>

                            <?php if ( is_page() ) { $highlight "page_item"; } else { $highlight "page_item current_page_item"; } ?>
                            <li class="<?php echo $highlight?>"><a href="<?php echo home_url'/' ); ?>"><?php _e'Home''woothemes' ); ?></a></li>
                            <?php wp_list_pages'sort_column=menu_order&depth=6&title_li=&exclude=' ); ?>

                        <?php ?>
                    </ul><!-- /#nav -->
                    <?php ?>
                    <?php if ( isset( $woo_options['woo_feed_url'] ) && $woo_options['woo_feed_url'] != '' ) { ?>
                    <ul class="rss fr">
                        <li class="sub-rss"><a href="<?php if ( $woo_options['woo_feed_url'] ) { echo $woo_options['woo_feed_url']; } else { echo get_bloginfo_rss'rss2_url' ); } ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/ico-rss.png" alt="<?php bloginfo'name' ); ?>" /></a></li>
                    </ul>
                    <?php ?>

                </div><!-- /#navigation -->

            </div><!--/.col-full-->
        </div><!--/#header-->
    <?php
        get_header
    ();
        global 
    $woo_options;
    ?>

        <?php if ( isset( $woo_options['woo_slider'] ) && $woo_options['woo_slider'] == 'true' && is_home() && ! is_paged() ) { get_template_part'includes/featured' ); } // Load the Featured Slider ?>
        <?php if ( isset( $woo_options['woo_mini_features'] ) && $woo_options['woo_mini_features'] == 'true' && is_home() && ! is_paged() ) { get_template_part'includes/mini-features' ); } // Load the Mini Features ?>     

        <div id="content" class="col-full">
            <div id="main" class="fullwidth">

            <?php if ( $woo_options['woo_breadcrumbs_show'] == 'true' ) { ?>
                <div id="breadcrumbs">
                    <?php woo_breadcrumbs(); ?>
                </div><!--/#breadcrumbs -->
            <?php ?> 
            <?php
                $homepage_columns 
    = array( 'left' => 'pagecontent''middle' => 'portfolio''right' => 'blog' );
                
                
    $count 0;
                foreach ( 
    $homepage_columns as $k => $v ) { $count++;
                
                
    $css_class 'block';
                if ( 
    $count == count$homepage_columns ) ) { $css_class .= ' last'; }
            
    ?>
                <div id="homepage-column-<?php echo $count?>" class="<?php echo $css_class?>">
            <?php
                
    if ( is_active_sidebar'homepage-' $k ) ) {
                    
    dynamic_sidebar'homepage-' $k );
                } else {
                    
    get_template_part'includes/home'$v );
                }
            
    ?>
                </div><!--/.block-->
            <?php
                
    }
            
    ?>

                <div class="clear"></div><!--/.clear-->
            </div><!-- /#main -->

        </div><!-- /#content -->    
        
    <?php get_footer(); ?>
    </div><!-- /#wrapper -->

    <?php global $woo_options?>
        <?php
            $total 
    $woo_options['woo_footer_sidebars']; if ( ! isset( $total ) ) { $total 4; }
            if ( ( 
    woo_active_sidebar'footer-1' ) ||
                   
    woo_active_sidebar'footer-2' ) ||
                   
    woo_active_sidebar'footer-3' ) ||
                   
    woo_active_sidebar'footer-4' ) ) && $total ) {

          
    ?>

        <div id="footer-widgets">
            <div class="col-full col-<?php echo $total?>">

            <?php $i 0; while ( $i $total ) { $i++; ?>
                <?php if ( woo_active_sidebar'footer-' $i ) ) { ?>

            <div class="block footer-widget-<?php echo $i?>">
                <?php woo_sidebar'footer-' $i ); ?>
            </div>

                <?php ?>
            <?php ?>

            <div class="fix"></div>
            </div>
        </div><!-- /#footer-widgets  -->
        <?php ?>

        <div id="footer">
            <div class="col-full">

            <div id="copyright" class="col-left">
            <?php if( isset( $woo_options['woo_footer_left'] ) && $woo_options['woo_footer_left'] == 'true' ) {

                    echo 
    stripslashes$woo_options['woo_footer_left_text'] );

            } else { 
    ?>
                <p><?php bloginfo(); ?> &copy; <?php echo date'Y' ); ?><?php _e'All Rights Reserved.''woothemes' ); ?></p>
            <?php ?>
            </div>

            <div id="credit" class="col-right">
            <?php if( isset( $woo_options['woo_footer_right'] ) && $woo_options['woo_footer_right'] == 'true' ) {

                echo 
    stripslashes$woo_options['woo_footer_right_text'] );

            } else { 
    ?>
                
            <?php ?>
            </div></div>
        </div><!-- /#footer  -->

    <?php wp_footer(); ?>
    <?php woo_foot
    (); ?>
    </body>
    </html>
     
    Last edited: Jan 4, 2012
  2. conor

    conor New Member

    Messages:
    348
    try changing the css footer property to this:

    Code:
    #footer{position: fixed; bottom: 0; left: 0; margin-top: -50px; height: 50px; clear: both; padding: 10px 0 0 40px; 
    
     
  3. jodybethw

    jodybethw New Member

    Messages:
    4
    Conor, I plugged in your suggestion; the text sticks to the bottom but not the widgets in the footer, the background image, etc.
     
  4. conor

    conor New Member

    Messages:
    348
    Ok, it's hard to see your problem exactly without a live example. You could try creating another wrapper div for the footer and apply these css rules:

    Code:
    position:fixed;bottom:0;left:0
    Just make sure you include everything you want to stick within that div. Background images should be fixed as well as far as i know though don't think I've tried that before.
     
  5. Edge

    Edge Member

    Messages:
    461
    Live example Jody? Then we could use Firebug to find problem very quickly.
     

Share This Page