Footer at bottom of page

  • Resolved axiski

    (@axiski)


    12 years, 2 months ago

    Hello all, I am really struggling with this. I need to have my footer at the bottom of the page, even if there is no content. I managed to get it that way, but it wasn’t below the content, it was over it (if you know what I mean).

    Now I have it so it appears at the bottom of the page, but only because the content makes it that way.

    This is the site https://www.axiski.com/main

    This is what I mean by the footer not being at the bottom with no content: https://axiski.com/main/videos/

    This is the code that makes what I have currently

    /* =Footer
----------------------------------------------- */

#colophon {
	clear: both;
        background: #446178;
        position:relative;
	bottom:0;
	z-index:999999;
        width: 100%;
}
.wrap {
        clear: both;
        position:absolute;
	margin:0 auto;
        width:100%;
        min-height:100%;
}

    This is my footer code showing the wrap div

    <footer id="colophon" role="contentinfo"><div class="wrap">

			<?php
				/* A sidebar in the footer? Yep. You can can customize
				 * your footer with three columns of widgets.
				 */
				if ( ! is_404() )
					get_sidebar( 'footer' );
			?>

			<div id="site-generator">
				<?php do_action( 'twentyeleven_credits' ); ?>
<center><?php echo ctsocial_icons_template(); ?></center><br/>
<a href="https://axiski.com/main/company-info/retail/">Axiski For Retailers</a> / <a href="https://axiski.com/main/get-in-touch/">Contact Us</a> / <a href="https://axiski.com/main/buy-axiski/">Buy Axiski</a> / <a href="https://axiski.com/main/company-info/privacy-policy/">Privacy</a> / <a href="https://axiski.com/main/company-info/terms-conditions/">Terms</a><br/>
<img src="https://www.axiski.com/main/images/smallline.png"><br />
				? Copyright 2010 - 2012 Axiski ? Ltd. All Rights Reserved. Registered in England, No. 7480087.
			</div></div>
	</footer><!-- #colophon -->

    Hope you can help.

    Thanks.

Viewing 12 replies - 1 through 12 (of 12 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Try this tutorial https://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

    Thread Starter axiski

    (@axiski)

    ^ I have, as well as numerous others, that’s how I got to where I am now, by fluke after following those tutorials. It just doesn’t work.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    From that tutorial, you’ll need to create a <div> to wrap around your content (including the footer).

    Thread Starter axiski

    (@axiski)

    I thought that’s hat the extra ”wrap” was for that I added

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You need to wrap it around other content too, E.g around these elements too;

    <div id="cc-notification" class="cc-dark cc-bottom" style="display: block;">

    and

    <div id="page" class="hfeed">

    –

    I’m just following the tutorial’s structure;

    <div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

    Where did you put the new wrap? It looks like it’s only inside the footer.php file. That tutorial says it has to contain the entire page – so you’d need to open the wrap in the header.php file and close it in the footer.php file, just outside the existing entire page content.

    EDIT – ditto – Andrew and I posted at the same time…

    Thread Starter axiski

    (@axiski)

    Okay I just open the DIV before ‘<div id=”page” class=”hfeed”>’ in header.php

    and ended it here ‘<?php wp_footer(); ?></div>’ in footer.php

    ..and it didn’t work.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You missed out the part of positioning absolute your footer.

    Where is the closing div? It has to be below all the footer code? Right now it looks like it may be above the closing footer div:

    </div>
	</footer><!-- #colophon -->

    If that’s the right div – it’s best to use comment tags to help you keep track of tags.

    Thread Starter axiski

    (@axiski)

    Thanks guys for your help, Andrew, that worked once I set it to absolute. Although now I have another problem.

    https://axiski.com/main/company-info/

    Green box at the bottom is behind the footer. =\

    Happens on every page with content further enough down.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    First make sure you’ve implemented all of the tutorial’s steps, then create a new thread on the issue.

    Thread Starter axiski

    (@axiski)

    Okay I have it sorted now. No issues as far as I can tell. I have followed the tutorial.

    The only slight niggle I have is that on pages with no content, you still have to scroll down a few hundred pixels to see the footer.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Footer at bottom of page’ is closed to new replies.