homepage Welcome to WebmasterWorld Guest from 54.198.130.203
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Fixed Footer bottom of the page
omegaone




msg:4414533
 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




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

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




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

Are you referring to a sticky footer?

Marshall

omegaone




msg:4414548
 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




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

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




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

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




msg:4414572
 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




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

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




msg:4414579
 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




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

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




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

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




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

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved