Footer not expanding, bottom of body shifted over.

thegadgeteur · November 4, 2010

Hello,

I'm having a little trouble with my site, Gadgetsteria.com, and the footer not properly expanding, as well as the very bottom of the main body shifty over and displaying all wonky. My footer CSS looks like this:

/* ------------------------------------------ */
/* Footer */
/* ------------------------------------------ */
#footer { float: left; width: 100%; background: #2a3e4f url(images/bgfooter.png) repeat-x;  margin: 15px 0 0 0; padding:10px 0 15px 0; color: #fff; text-shadow: 0.1em 0.1em #000; font-weight: bold; text-transform: uppercase; font-size: 10px; }
#footer h4 { font-size: 10px; }
.footer-wrap { width: 995px; margin: 0 auto; }
#footer li { display: inline; font-size: 12px; font-weight: normal; padding: 0 15px 0 0; font-family: Verdana; }
#footer a, #subfooter a { color: #fff; }
#subfooter {float:left; width:100%; padding:7px 0; background:#242c32 url(images/bgsubf.png) repeat-x;   color: #fff; text-shadow: 0.1em 0.1em #000; font-weight: bold; text-transform: uppercase; font-size: 10px;}
#copyright a { color: #A1C0CF; }
#footer .hr { background: #516E86 none repeat scroll 0 0; border-top: 1px solid #072138; clear: both; height: 1px; overflow: hidden; width: 100%; margin: 10px 0 10px 0; }
#copyright { float: left; width: 50%; line-height: 1.7; }
#footersocial { float: right; width: 300px; margin:9px 0; }
#footersocial a.rss { background: url(images/rss.jpg) no-repeat; padding: 0 0 3px 20px; height: 16px; margin: 0 15px 0 0; }
#footersocial a.twitter { background: url(images/twitter.jpg) no-repeat; padding: 0 0 3px 20px; height: 16px; }

But if you go to my site, you can see it's not expanding like it should. I've been racking my brain for days trying to figure this out.

falkencreative · November 4, 2010

When you say the footer isn't "expanding as it should" do you mean that it should stretch 100% of the page? Currently, the #footer and #subfooter divs are within #page-wrap, which has a 995px width.

If you move the #footer and #subfooter outside the #page-wrap, that should either fix your problem or at least be a step in the right direction.

Also, if you move #bgbottom outside of #main, that may help with the display issues at the bottom of the page. The padding on #main is adjusting the positioning of #bgbottom.

thegadgeteur · November 4, 2010

When you say the footer isn't "expanding as it should" do you mean that it should stretch 100% of the page? Currently, the #footer and #subfooter divs are within #page-wrap, which has a 995px width.

If you move the #footer and #subfooter outside the #page-wrap, that should either fix your problem or at least be a step in the right direction.

Also, if you move #bgbottom outside of #main, that may help with the display issues at the bottom of the page. The padding on #main is adjusting the positioning of #bgbottom.

I know my way around already compiled CSS and HTML enough to get what I want after a while, but what you're saying is a little cloudy. Perhaps a little more specific guidance if it's not too much trouble.

And yes, I want the footer to stretch from edge to edge. But it's getting capped a few pixels past the main content.

falkencreative · November 4, 2010

Here's your current code:

<div id="page-wrap">
   ...code here...
   <div id="footer">...code...<div>
   <div id="subfooter">...code...</div>
</div>

Your #footer and #subfooter divs are within #page-wrap, which has a width of 995px. Divs expand to the width of their container (or 100% if they aren't being contained within anything else. You need to move #footer and #subfooter after the #page-wrap's closing div:

<div id="page-wrap">
   ...code here...
</div>
<div id="footer">...code...<div>
<div id="subfooter">...code...</div>

Similarly, you need to move the #bgbottom div after the closing #main div.

thegadgeteur · November 5, 2010

Ok, now I understand looking at the source code via a web browser is a bit different than the raw .php files. I tried looking at the main index and page.php files to make the changes you mentioned, but don't see the footer being inside <div></div> for the page.

Main index:

<?php
global $options;
foreach ($options as $value) {
   if (get_settings( $value['id'] ) === FALSE) { $$value['id'] = $value['std']; } else { $$value['id'] = get_settings( $value['id'] ); }
}
$dateformat = get_option('date_format');
$timeformat = get_option('time_format');
?>
<?php get_header(); ?>

<?php $z = count($wpzoom_exclude_cats_home);if ($z > 0) { 
$x = 0; $que = ""; while ($x < $z) {
$que .= "-".$wpzoom_exclude_cats_home[$x]; $x++;
if ($x < $z) {$que .= ",";} } }		 
query_posts($query_string . "&cat=$que");if (have_posts()) : 
?>
<?php while ($wp_query->have_posts()) : $wp_query->the_post(); ?>	

<div class="post" id="post-<?php the_ID(); ?>">
	<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
	<div class="meta">
		<ul>
			<?php if ($wpzoom_homepost_date == 'Show') { ?> <li class="time"><?php the_time("$dateformat $timeformat"); ?></li><?php } ?>
			<li>by: <?php the_author_posts_link() ?></li>
			<?php if ($wpzoom_homepost_comm == 'Show') { ?><li class="comments"><?php comments_popup_link('0 comments', '1 comment', '% comments'); ?></li><?php } ?>
			<?php edit_post_link('Edit', '<li>', ' </li>  '); ?>
		</ul>
	</div>

	<?php if ($wpzoom_twitter_button == 'Yes')  { ?>
	<div class="retweet">
		<script type="text/javascript">
		tweetmeme_url = '<?php the_permalink() ?>'; 
		tweetmeme_style = 'compact';
		</script>
		<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
	</div>
	<?php }  ?>

	<div class="clear"></div>

	<?php if ($wpzoom_homepost_type == 'Post Excerpts') {  the_excerpt();  ?><a class="more-link" href="<?php the_permalink() ?>"><span class="more"><span>+</span>Continue Reading</span></a><?php } ?>
	<?php if ($wpzoom_homepost_type == 'Full Content') {  the_content(__('<span class="more"><span>+</span>Continue Reading</span>')); } ?>

	 <div class="clear"></div> 

</div> <!-- end post -->


<?php if(!$show_ads){ ?>

 <?php if (strlen($wpzoom_ad_head_imgpath) > 1 && $wpzoom_ad_head_select == 'Yes') {?>
     <div class="afterpostad"><?php if (strlen($wpzoom_ad_head_imgpath) > 1) { echo stripslashes($wpzoom_ad_head_imgpath); }?></div>
     <?php } ?>
       <?php $show_ads = 1; } ?>
       <?php endwhile; ?>

	<div class="navigation">
         <?php if (function_exists('wp_pagenavi')) { wp_pagenavi(); } else { ?>
            <div class="alignleft"><?php next_posts_link('Older Articles') ?></div>
           <div class="alignright"><?php previous_posts_link('Newer Articles') ?></div>
         <?php } ?>
	</div>


 	<?php else : ?>

	<h2>Not Found</h2>
	<p>Sorry, but you are looking for something that isn't here.</p>
	<?php include (TEMPLATEPATH . "/searchform.php"); ?>


<?php endif; ?>
</div> <!-- end content -->
<?php get_sidebar(); ?>

<?php get_footer(); ?>

Andrea · November 5, 2010

This is a Wordpress Theme. Do you have a file called page.php and/or single.php? Look at those and see what you find in there. These would be part of your template, not necessarily pages you'd access directly. (/wp-content/theme/name of your theme/....)

Adding to post: You'll likely need one called footer.php as well

Edited November 5, 2010 by Andrea

thegadgeteur · November 5, 2010

Yes, it's a wordpress theme and I do have all the necessary main, single, footer, header, etc., etc pages. I looked in there but there aren't a whole lot of div lines

Andrea · November 5, 2010

There usually aren't a whole lot of div lines, but the ones you do have, as they all come together, create your page layout, and that's where you have to make changes.

thegadgeteur · November 6, 2010

Ok, I found the <div> tags in my footer.php page. However, as someone mentioned above, my footer and subfooter are already outside of main and page wrap.

<?php
global $options;
foreach ($options as $value) {
   if (get_settings( $value['id'] ) === FALSE) { $$value['id'] = $value['std']; } else { $$value['id'] = get_settings( $value['id'] ); }
}
if ($wpzoom_featured_slideshow_auto == 'No') {$wpzoom_featured_slideshow_auto = 'false'; } else {$wpzoom_featured_slideshow_auto = 'true'; }
?> 

<div class="clear"></div>

</div> <!-- end MAIN -->

<div id="bgbottom"></div>

</div> <!-- end page-wrap -->


<div id="footer">

	<div class="footer-wrap">
		<h4><?php echo $wpzoom_footer_menu; ?>: </h4>
		<?php wp_nav_menu( array('container' => '', 'container_class' => '', 'menu_class' => '', 'sort_column' => 'menu_order', 'theme_location' => 'tertiary', 'depth' => '1' ) ); ?>

		<div class="hr"></div>

		<h4><?php echo $wpzoom_footer_menu2; ?>: </h4>

		<?php wp_nav_menu( array('container' => '', 'container_class' => '', 'menu_class' => '', 'sort_column' => 'menu_order', 'theme_location' => 'four', 'depth' => '1' ) ); ?>

	</div>

</div>

<div id="subfooter">

	<div class="footer-wrap">

		<div id="copyright">
			Theme designed by <a href="http://www.wpzoom.com/themes/" title="WPZOOM - WordPress Themes">WPZOOM</a>.<br />
			Copyright © <?php echo date("Y"); ?> <?php bloginfo('name'); ?>. All Rights Reserved. 
		</div>

		<div id="footersocial">

			<a class="rss" href="<?php if (strlen($wpzoom_misc_feedburner) < 10) { bloginfo('rss2_url');} else {echo"$wpzoom_misc_feedburner";} ?>"><?php echo $wpzoom_rss_footer; ?></a>
			<?php if (strlen($wpzoom_twitter) > 1) { ?><a class="twitter" href="http://twitter.com/<?php echo $wpzoom_twitter; ?>"><?php echo $wpzoom_twitter_heading; ?></a><?php } ?>

		</div>

	</div>

</div>

</div>

<?php if ($wpzoom_misc_analytics != '' && $wpzoom_misc_analytics_select == 'Yes')
{
 echo stripslashes($wpzoom_misc_analytics);
} ?>

	<?php wp_footer(); ?> 

<script type="text/javascript">
	$(document).ready(function(){

		//Caption Sliding (Partially Hidden to Visible)
		$('.boxgrid.caption').hover(function(){
			$(".cover", this).stop().animate({top:'5px'},{queue:false,duration:160});
		}, function() {
			$(".cover", this).stop().animate({top:'73px'},{queue:false,duration:160});
		});
	});
</script>

<script type="text/javascript" charset="utf-8">
	  $('#subscribe a').each(function () {
		$('<div class="fader" />').css('opacity', 0).prependTo(this);
	  }).hover(function () {
		$('img', this).stop().animate({
		  marginLeft : 5
		}, 250);

	  }, function () {
		$('img', this).stop().animate({
		  marginLeft : 10
		}, 250);

		$('.fader', this).stop().animate({
		  opacity : 0
		});
	  }).find('img').css('marginLeft', 10);


</script>

<script type="text/javascript">
	// execute your scripts when DOM is ready. this is a good habit
	$(function() {		

		// initialize scrollable 
		$("div.scrollable").scrollable({
			size: 1,
			keyboard: false,
			speed: <?php echo "$wpzoom_featured_slideshow_speed"; ?>,
			loop: <?php echo "$wpzoom_featured_slideshow_auto"; ?>,
			autopause:true,
			<?php if ($wpzoom_featured_slideshow_auto == 'true') { ?>interval:<?php echo "$wpzoom_featured_slideshow_auto_speed,"; } ?>
			items: '#thumbs',  
			disabledClass: 'enabled',
			hoverClass: 'hover'

		});	

	});
</script>
</body>
</html>

falkencreative · November 6, 2010

This is the section you need to edit:

<div id="bgbottom"></div>

</div> <!-- end page-wrap -->


       <div id="footer">

               <div class="footer-wrap">
                       <h4><?php echo $wpzoom_footer_menu; ?>: </h4>
                       <?php wp_nav_menu( array('container' => '', 'container_class' => '', 'menu_class' => '', 'sort_column' => 'menu_order', 'theme_location' => 'tertiary', 'depth' => '1' ) ); ?>

                       <div class="hr"></div>

                       <h4><?php echo $wpzoom_footer_menu2; ?>: </h4>

                       <?php wp_nav_menu( array('container' => '', 'container_class' => '', 'menu_class' => '', 'sort_column' => 'menu_order', 'theme_location' => 'four', 'depth' => '1' ) ); ?>

               </div>

       </div>

       <div id="subfooter">

               <div class="footer-wrap">

                       <div id="copyright">
                               Theme designed by <a href="http://www.wpzoom.com/themes/" title="WPZOOM - WordPress Themes">WPZOOM</a>.<br />
                               Copyright © <?php echo date("Y"); ?> <?php bloginfo('name'); ?>. All Rights Reserved. 
                       </div>

                       <div id="footersocial">

                               <a class="rss" href="<?php if (strlen($wpzoom_misc_feedburner) < 10) { bloginfo('rss2_url');} else {echo"$wpzoom_misc_feedburner";} ?>"><?php echo $wpzoom_rss_footer; ?></a>
                               <?php if (strlen($wpzoom_twitter) > 1) { ?><a class="twitter" href="http://twitter.com/<?php echo $wpzoom_twitter; ?>"><?php echo $wpzoom_twitter_heading; ?></a><?php } ?>

                       </div>

               </div>

       </div>

</div>

Your #footer and #subfooter need to go below the last closing </div> in this code snippet. The line "" is incorrect -- as far as I can tell, that is the end of #main, not #page-wrap. The last closing </div> in the code is the end of #page-wrap. Similarly, the "<div id="bgbottom"></div>" line needs to be moved a couple lines down, below "</div> ".

Sign In

Footer not expanding, bottom of body shifted over.

Recommended Posts

thegadgeteur

Link to comment

Share on other sites

falkencreative

Link to comment

Share on other sites

thegadgeteur

Link to comment

Share on other sites

falkencreative

Link to comment

Share on other sites

thegadgeteur

Link to comment

Share on other sites

Andrea

Link to comment

Share on other sites

thegadgeteur

Link to comment

Share on other sites

Andrea

Link to comment

Share on other sites

thegadgeteur

Link to comment

Share on other sites

falkencreative

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Store

Support