thegadgeteur Posted November 4, 2010 Report Share Posted 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. Quote Link to comment Share on other sites More sharing options...
falkencreative Posted November 4, 2010 Report Share Posted 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. Quote Link to comment Share on other sites More sharing options...
thegadgeteur Posted November 4, 2010 Author Report Share Posted 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. Quote Link to comment Share on other sites More sharing options...
falkencreative Posted November 4, 2010 Report Share Posted 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. Quote Link to comment Share on other sites More sharing options...
thegadgeteur Posted November 5, 2010 Author Report Share Posted 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(); ?> Quote Link to comment Share on other sites More sharing options...
Andrea Posted November 5, 2010 Report Share Posted November 5, 2010 (edited) 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 Quote Link to comment Share on other sites More sharing options...
thegadgeteur Posted November 5, 2010 Author Report Share Posted 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 Quote Link to comment Share on other sites More sharing options...
Andrea Posted November 5, 2010 Report Share Posted 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. Quote Link to comment Share on other sites More sharing options...
thegadgeteur Posted November 6, 2010 Author Report Share Posted 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> Quote Link to comment Share on other sites More sharing options...
falkencreative Posted November 6, 2010 Report Share Posted 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 "<!-- end page-wrap -->" 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> <!-- end page-wrap -->". Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.