Welcome to WebmasterWorld Guest from 54.147.44.93

Forum Moderators: not2easy

Message Too Old, No Replies

Fixed Footer bottom of the page

     

omegaone

8:41 pm on Feb 5, 2012 (gmt 0)



Hello I'm trying to code a HTML5 website and I've been stuck on trying to get the footer to stay aligned at the bottom of the webpage. I want the footer to also have the background cover the full width of the wrapper (not the browser page). But the footer would always become off centered or not aligned properly if the webpage got too big.

any ideas?

Thanks.

html {
height: 100%;
}

body {
font: normal 16px/18px helvetica,arial,sans-serif;
color: #555;
margin: 0;
padding: 0;
background: url(images/bg.jpg) repeat;
height: 100%
}

div#wrapper {
width: 1000px;
margin: 0 auto;
background: #fff;
overflow: hidden;
height: auto;
min-height: 100%;
}

footer {
position: relative;
width:1000px;
text-align-center;
float: left;
height: 60px;
margin: 0;
border: 0;
padding:0;
border-top: 1px solid #ddd;
background-color:#06C;
}

edit: whops forgot to correct it in the post.

[edited by: omegaone at 9:28 pm (utc) on Feb 5, 2012]

penders

9:14 pm on Feb 5, 2012 (gmt 0)

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



width:1000;
text-align-center;


Should be:
width:100px; 
text-align: center;


I'm not saying this will solve your problem, but it's a start.

Marshall

9:37 pm on Feb 5, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Are you referring to a sticky footer?

Marshall

omegaone

9:50 pm on Feb 5, 2012 (gmt 0)



Maybe? Just want it to stay at the bottom but only cover the size of the wrapper and stay aligned properly no matter the amount of text.

lucy24

11:12 pm on Feb 5, 2012 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



We'd need to see a bit of the html that uses the CSS. If you want the footer to be no bigger than the wrapper, it needs to be inside the wrapper.

text-align-center;
float: left;


Not too sure about this.

Marshall

12:08 am on Feb 6, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



omegaone,

I sent you a sticky mail with a link to a site with a sticky footer. I think it what you want.

Marshall

omegaone

12:09 am on Feb 6, 2012 (gmt 0)



Copied out the structure of the webpage below.


<!doctype html>
<head>

<link href="ie.css" media="screen" rel="stylesheet" type="text/css">

<link href="default.css" media="screen" rel="stylesheet" type="text/css">

<link href="style.css" rel="stylesheet" type="text/css" media="screen" charset="utf-8">

</head>

<header>
<span id="siteName"><a href="./"><span></span></a></span>
<span id="siteTagline"></span>
<center><img src="images/header.jpg" alt="" height="80" width="500"><center>
</header>
<!-- / header -->

<!-- begin nav -->
<div id="nav">
<div class="art-bar art-nav">
<div id="navigation" class="menu-menu-container">
Nav ul listing etc
</div>
<!-- end nav -->

<!-- Content -->
<section id="pageContent">
<article>
</article>
</section>

<!-- footer -->
<div id="footer">

</div>
<!-- footer -->

</div><!-- wrapper -->

Marshall

12:21 am on Feb 6, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Here's the CSS and HTML I use for the sticky footer. Obvious some measurements will have to be adjusted to fit you needs.

CSS
<style type="text/css">
/* STICKY FOOTER CSS */
#sticky_navigation {
min-width: 600px;
position: relative; /*this you need on your footer, position: relative;*/
}

#sticky_container {
min-width: 600px;
position: relative; /*this you need on your footer, position: relative;*/
}

/*IE6 hack for min-width... skipped*/

#sticky_container {
min-height: 100%; /*100%; height model again*/
/*font: normal 1em/1.5em arial, helvetica, sans-serif;*/
}
* html #sticky_container {
height: 100%; /*IE6*/
}
/*here's footer:*/
#sticky_navigation {
width: 100%;
background: url('../images/clear_bg.gif');
position: fixed;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
z-index: 1000;
}

/*IE6 and below don't understand position: fixed... if you need to support them, you'll need this... does NOT work on browsers who have Javascript turned off!*/
* html #sticky_navigation {
position: absolute;
width: 100%;/*IE5.5*/
bottom: 0;
left: 0;
overflow: visible; /*earlier had overflow: hidden on various things... you might not need this line*/
top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop +(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));
}/*that was the CSS Expression for position: fixed at the bottom of the page. */

/*the rest is my menu inside.*/
#sticky_navigation #sticky_navmenu {
margin: 0 auto;
position: relative;
z-index: 10;
width: 590px;
background: url('../images/clear_bg.gif');
text-align: center;
color: #009;
}
</style>

HTML
<body>
<!-- BEGIN STICKY FOOTER - PLACE IMMEDIATELY BELOW BODY TAG -->
<div id="sticky_navigation">
<div id="sticky_navmenu">
<!-- YOUR NAVIGATION -->
</div>
</div>
<!-- END STICKY FOOTER -->

Marshall

omegaone

1:16 am on Feb 6, 2012 (gmt 0)



Hi Marshell was not after the navigation but wanting something similar to your footerwrap/content thing at the bottom of the page itself? (Unless that's it?)

Marshall

3:33 am on Feb 6, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



omegaone,

What I posted above is the CSS and HTML for the footer in the link I sent you. I thought I would share it with the thread. You should be able to copy and past what I posted and test it in a page, adjusting it to your needs.

Marshall

alt131

6:13 pm on Feb 7, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



Hi omegaone and welcome to WebmasterWorld :)

Best not to go off-forum, so Marshall thanks for providing the code. Always interesting to see how others decide to deal with sticky footer's - there are so many different approaches to dealing with them depending on your coding preferences.

Marshall this is incidental given the issue is slightly different here and you've already got a working solution, but it crossed my mind you might enjoy Paul_o_b's summary of issues in Sticky Footer [webmasterworld.com] if you missed it last year.

Marshall

7:16 pm on Feb 7, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Should I say "you're welcome" and "thank you." ;)

Actually, I am not big on sticky footers, but a client of mine wanted one. They do offer some advantages, but in my example and what I primarily do not like, is how the footer is out of the natural flow, appearing just below the <body> tag. However, is does not seem to have affected my client's pages insofar as SERPs are concerned.

Marshall
 

Featured Threads

Hot Threads This Week

Hot Threads This Month