• Hi,

    I want my footer to stick to the bottom of the screen irrespective of the amount of text on a page. I tried to use the http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ method but I must have done something wrong because I’ve caused the text on my footer to move up. You can see an example here –> http://evesboutique.hspieces.com/

    Does anyone know how I can move the text down and make the footer stick?

    Here is my CSS code:

    [Complete stylesheet moderated. Please just post a link to your site.]

    Here is my index code (the theme doesn’t have a header file):

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html <?php language_attributes(); ?>>
    <head profile="http://gmpg.org/xfn/11">
    	<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
    	<title>
    		<?php
    			if 	( is_home() )			{ bloginfo("name"); echo (' | '); bloginfo('description'); }
    			elseif	( is_single() )			{ wp_title(''); }
    			elseif	( is_page() || is_paged() ) 	{ bloginfo('name'); wp_title('|'); }
    			elseif	( is_archive() )		{ _e('Archive for ', 'essential'); wp_title(''); }
    			elseif	( is_author() )			{ wp_title(__(' | Post written by ', 'essential'));	}
    			elseif	( is_search() )			{ echo __('Search results for "', 'essential') . $s . '"'; }
    			elseif	( is_404() )			{ _e('Four-oh-Four', 'essential'); }
    			else 					{ _e('Are You Lost?', 'essential'); }
    		?>
    	</title>
    
    	<?php if (is_home()) { ?>
    		<meta name="description" content="<?php bloginfo('description'); ?>" />
    	<?php } ?>
    
    	<meta name="robots" content="noodp,noydir" />
    
    	<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
    	<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
    	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
    	<link rel="Shortcut Icon" href="<?php bloginfo('template_url'); ?>/favicon.ico" type="image/x-icon" />
    
    	<?php
    		if ( is_singular() && get_option( 'thread_comments' ) ) { wp_enqueue_script( 'comment-reply' );}
    		wp_head();
    	?>
    
    </head>
    <body <?php body_class(); ?>>
    	<div id="wrapper">
    		<?php ess_outgoinglink_topmenu(); ?>
    		<div id="navigation">
    			<div class="wrap">
    				<?php if (is_home()) { ?>
    					<h1 id="site-name"><a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></h1>
    				<?php } else { ?>
    					<h2 id="site-name"><a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></h2>
    				<?php } ?>
    				<?php wp_nav_menu(array('theme_location' => 'top_nav')); ?>
    				<form method="get" id="searchform" action="<?php echo get_option('home'); ?>">
    					<input type="text" value="<?php _e("Search...", "essential"); ?>" name="s" id="s" onfocus="if (this.value == '<?php _e("Search...", "essential"); ?>') {this.value = '';}" onblur="if (this.value == '') {this.value = '<?php _e("Search...", "essential"); ?>';}" />
    					<input type="hidden" id="searchsubmit" value="<?php _e("Search", 'essential'); ?>" />
    				</form>
    			</div>
    		</div>
    		<div id="header">
    			<?php if ( ! is_home() ) {?>
    			<div class="wrap">
    				<div id="site-info">
    
    				</div>
    			</div>
    			<?php }?>
    			<center><?php if ( is_home() AND function_exists('easing_slider')){ easing_slider(); }; ?></center>
    
    		</div>
    		<div id="body">
    			<div class="wrap">
    				<div id="content">	
    
    					<?php if (is_home() || is_category() || is_tag() || is_search()) { ?>
    					<div class="content-title-wrap">
    						<?php if (is_home()) { ?>
    							<h2 id="content-title"><?php ess_hometitle(); ?></h2>
    						<?php } elseif (is_category()) { ?>
    							<h1 id="content-title"><?php _e('Posts categorized into ', 'essential'); ?> <em><?php echo single_cat_title(); ?></em> :</h1>
    						<?php } elseif (is_tag()) { ?>
    							<h1 id="content-title"><?php _e('Posts tagged with ', 'essential'); ?> <em><?php echo single_tag_title(); ?></em> :</h1>
    						<?php } elseif (is_search()) { ?>
    							<h1 id="content-title"><?php _e('Search results for ', 'essential'); ?> <em><?php echo $s ?></em> :</h1>
    						<?php } ?>
    						<?php ess_pagination(); ?>
    					</div>
    					<?php } ?>
    
    					<?php get_template_part( 'loop', 'index' ); ?>
    
    					<?php ess_pagination(); ?>				
    
    				</div>
    				<div id="sidebar">
    					<ul id="sidebar-root">
    					<?php dynamic_sidebar('Sidebar'); ?>
    					</ul>
    				</div>
    			</div>
    		</div>
    		<div id="footer">
    			<div class="wrap">
    				<div id="navigation-footer">
    					<?php wp_nav_menu(array('theme_location' => 'bottom_nav' )); ?>
    				</div><!-- #navigation-footer -->
    				<div id="copyright">
    					<p><?php _e('Copyright ©', 'essential'); echo date('Y '); bloginfo('name'); ?></p>
    				</div>
    				<div id="footer-follow">
    					<a href="<?php ess_facebook_link(); ?>" id="footer-facebook" title="<?php _e('Like us on Facebook', 'essential'); ?>"><?php _e('Like us on Facebook', 'essential'); ?></a> <a href="<?php ess_twitter_link(); ?>" id="footer-twitter" title="<?php _e('Follow us on Twitter', 'essential'); ?>"><?php _e('Follow us on Twitter', 'essential'); ?></a>
    				</div>
    						</div>
    		</div>
    	</div>
    <?php wp_footer(); ?>
    </body>
    </html>
Viewing 3 replies - 1 through 3 (of 3 total)
  • Do you mean “stick to the bottom of the browser window”? In other words, the footer is always visible? Or are you just trying to get it to the bottom of the pink area?

    Thread Starter morningla

    (@morningla)

    I want the footer to always be visible. However, if you look at this page (http://evesboutique.hspieces.com/terms-and-conditions/), you can see that the text runs beyond the pink area. I want all of the text to be within the pink area (but separate from the footer…the footer doesn’t even show on this page…i’m not sure what I did not mess that up). Any help?

    I want the footer to always be visible.

    Ok. You have two different issues. The first is the text overflowing the pink box. This is easy. Find …

    #body .wrap {
      background: none repeat scroll 0 0 #FF0099;
      border: 2px solid #000000;
      height: 1009px;
      width: 940px;
    }

    … in your stylesheet and make that “height”, “min-height”.

    For the other issue, you want position:fixed. For example, this…

    #header {
    position:fixed;
    bottom:0;
    }

    … will put your header at the bottom of the page where it will be visible all the time. Try it. If you get that to work just apply the same idea to whatever you actually want to be at the bottom.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘CSS Help Needed – Sticky Footer Trouble’ is closed to new replies.