Jump to content

How to make the footer stick to the bottom?

kungfumunchkin
 Share

Recommended Posts

kungfumunchkin Newbie

kungfumunchkin

Posted
Posted

Hi,

 

I have tried a few things to make the footer always stick to the bottom of the page if the content don't fill out the page.

 

But I have not got anything to work yet as there is no examples I can find for prestashop. Only "normal" html based sites wich is quite easy to modify.

 

I would very much apreciate help with this.

Link to comment
Share on other sites
jhnstcks Newbie

jhnstcks

Posted
Posted

Surely the footer is always at the bottom of the page regardless of what content you have.

 

I guess you could use position:fixed in your global.css file. that would make the footer stay at the bottom of the screen and any content would scroll past it.

Link to comment
Share on other sites
kungfumunchkin Newbie

kungfumunchkin

Posted
  • Author
Posted

Surely the footer is always at the bottom of the page regardless of what content you have.

 

I guess you could use position:fixed in your global.css file. that would make the footer stay at the bottom of the screen and any content would scroll past it.

 

Well, sure the footer is allways on the bottom of the content. But not the screen.

 

What I am after is a fluid height layout that adapts after the content and screen resolution.

 

The footer should be pushed down if the content is longer than what the screen can show and stay at the bottom of the screen if the content is to short to fill out the page by itself.

 

Hi kungfumunchkin,

 

What have you tried so far ? min-height:100% for the container + position:absolute for the footer ?

 

Can you post the url of your site so we can check ?

 

I have tried "min-height: 100%;" for the page container, and "min-height: 100%;" for page container and center column in combination. I have also tried "position: absolute;" on the footer div as you suggest but that only makes the footer fly to the top of the page.

 

It's a site under construction in it's early stages so most things are just placeholders.

 

URL: www.am-web.nu

Link to comment
Share on other sites
kungfumunchkin Newbie

kungfumunchkin

Posted
  • Author
Posted

Have you also tried the "sticky footer" ?

 

http://ryanfait.com/sticky-footer/

 

Tried that too. Maybe I have implemented the code wrong.

 

Footer code:

 {if !$content_only}
 <div id="push"></div>
</div>
<!-- Footer -->
  <div id="footer">
<div id="footer_top">
</div>
<div id="footer_low">
 <p>© Copyright <a href="index.php">Gamecards.se</a> 2010 - 2011</p>
</div>
  </div>
 </div>
{/if}
</body>
</html>

 

header code:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{$lang_iso}">
<head>
 <title>{$meta_title|escape:'htmlall':'UTF-8'}</title>
{if isset($meta_description) AND $meta_description}
 <meta name="description" content="{$meta_description|escape:html:'UTF-8'}" />
{/if}
{if isset($meta_keywords) AND $meta_keywords}
 <meta name="keywords" content="{$meta_keywords|escape:html:'UTF-8'}" />
{/if}
 <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
 <meta name="generator" content="PrestaShop" />
 <meta name="robots" content="{if isset($nobots)}no{/if}index,follow" />
 <link rel="icon" type="image/vnd.microsoft.icon" href="{$img_ps_dir}favicon.ico?{$img_update_time}" />
 <link rel="shortcut icon" type="image/x-icon" href="{$img_ps_dir}favicon.ico?{$img_update_time}" />
 <link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
 <script type="text/javascript">
  var baseDir = '{$content_dir}';
  var static_token = '{$static_token}';
  var token = '{$token}';
  var priceDisplayPrecision = {$priceDisplayPrecision*$currency->decimals};
  var priceDisplayMethod = {$priceDisplay};
  var roundMode = {$roundMode};
 </script>
{if isset($css_files)}
{foreach from=$css_files key=css_uri item=media}
<link href="{$css_uri}" rel="stylesheet" type="text/css" media="{$media}" />
{/foreach}
{/if}
{if isset($js_files)}
{foreach from=$js_files item=js_uri}
<script type="text/javascript" src="{$js_uri}"></script>
{/foreach}
{/if}
 {$HOOK_HEADER}
</head>

<body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if}>
{if !$content_only}
 {if isset($restricted_country_mode) && $restricted_country_mode}
 <div id="restricted-country">
  <p>{l s='You cannot place a new order from your country.'} <span class="bold">{$geolocation_country}</span></p>
 </div>
 {/if}
 <div id="page">
  <!-- Header -->
  <div id="header">
<div id="header_logo">
 <p>
  <img src="{$img_dir}logo.png">
 </p>
</div>
<div id="header_hook">
 {$HOOK_TOP}
</div>
  </div>
  <div id="columns">
<!-- Center -->
<div id="center_column">
{/if}

 

CSS:

* {
padding: 0;
margin: 0
}
html {
height: 100%;
}
body {
background-color: #024066;
font-size: 12px;
color: #000000;
font-family: Arial;
height: 100%;
}
/* global layout */
#page {
width: 765px;
text-align: left;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0px auto -177px auto;
}
#header {
float: left;
width: 765px;
height: 100px;
background-color: #ffffff;
}
#header_hook {
width: 365px;
height: 80px;
margin: 20px 0px 0px 0px;
float: left;
}
#header_logo {
float:left;
height: 80px;
width: 400px;
}
#header_logo p {
margin: 5px 0px 0px 30px;
}
#center_column {
background-color: #ffffff;
float: left;
width: 740px;
min-height:100%;
padding: 30px 12.5px 30px 12.5px;
}
#push {
height: 177px;
}
#old_center_column { display: none }
#footer {
width: 765px;
height: 177px;
float: left;
background-image: url('/themes/gamecards/img/footer_bg.png');
}

 

If you find anything wrong with that implementation please let me know.

Link to comment
Share on other sites
kungfumunchkin Newbie

kungfumunchkin

Posted
  • Author
Posted

Hello kungfumunchkin,

 

If i look at your site i see no footer, if i scroll down a bit then i can see the footer.

So it is not sticky.

 

Like Carl said why not use sticky footer ?

This one works perfect.

 

ysco..

 

I am trying to use the sticky footer like Carl suggest. The only problem is that I've implemented the code like I wrote above but I don't get a sticky footer as a result.

 

If you got it to work on your site please post the code that you have used and how you used it so I can try it out on my site.

Link to comment
Share on other sites
kungfumunchkin Newbie

kungfumunchkin

Posted
  • Author
Posted

Hello kunfumunchkin,

 

I have used a totally other stick footer, a paid one only $4 .

Take a look here http://codecanyon.ne...y-footer/128701 , worth every penny.

Do not know if this is what you need but take a look at the demo.

 

Regards,

 

ysco..

 

That is a nice example and would be worth 4$. But I would call that footer a fixed one.

 

What I am after is the fluid footer that Carl posted example code that is pushed down if the content is longer than the screen can view and at the bottom of the screenview if the content is very short.

Link to comment
Share on other sites
  • 5 weeks later...
Raguis Newbie

Raguis

Posted
Posted

 

I am trying to use the sticky footer like Carl suggest. The only problem is that I've implemented the code like I wrote above but I don't get a sticky footer as a result.

 

If you got it to work on your site please post the code that you have used and how you used it so I can try it out on my site.

 

I'm using the sticky footer at my site and it's working for me. I have attached the files footer.tpl, header.tpl and global.css.

 

On css I've modified html (line 17), body (line 21), .page (198), #push (204) and #footer (763)

 

hope it can help

sticky footer.zip

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...