SitePoint Sponsor |
|
User Tag List
Results 1 to 7 of 7
-
Nov 27, 2007, 11:14 #1
- Join Date
- Nov 2007
- Posts
- 6
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
The damn footer won't stay at the foot!
Hi there guys,
I am a fairly experienced CSS user however i have been tearing my hair out with this CSS which my CMS throws out.
The site in question is http://www.ncmag.co.uk.On the homepage all seems fine, but when the CMS inserts a larger article the footer seems to take on a life of its own and appears near the mid section of the page.
I have tried everything and have worked out that the footer rests at the bottom of a div called 'page'. However when i set the height of this to be a percentage it does not seem to set up as 100%, and the footer still rises above it.
Footer: (layout.css line 324)
Code:#footer { background-color:#222222; bottom:1px; clear:both; color:#FFFFFF; height:400px; margin:400px 0pt 0pt; padding:10px; position:relative; width:100%; }
Code:#page { height:100%; margin:0pt; min-height:100%; padding:0pt; }
Cheers in advance,
James
P.s. i know, i know it's horrible CSS... it will validate by the time i am done with it... i promise!
-
Nov 27, 2007, 12:27 #2
- Join Date
- Nov 2007
- Posts
- 44
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Go to www.pmob.co.uk Look there for css designs that keep the footer at the bottom. It uses a css hack, but it works in all major browsers starting with IE6.
-
Nov 27, 2007, 14:40 #3
- Join Date
- Nov 2007
- Posts
- 6
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
-
Nov 27, 2007, 20:28 #4
- Join Date
- Jul 2002
- Location
- Los Angeles CA
- Posts
- 136
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I just answered this type of question in another thread here: http://www.sitepoint.com/forums/showthread.php?t=516899
It has a link to more examples of the solution. Basically you need to do more than set #page to 100%; you need to set HTML and body as well.
-
Nov 28, 2007, 16:05 #5
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
that tutorial covers placing the footer as fixed.
However its best if you read the faq as the footer technique is detailed there and is the original source for this as it was originally invented by me(long before the other footers articles appeared)
You cannot however (with any of these methods) have a variable height footer because the only way to make room for the footer is by knowing its height in advance. If you are inserting variable content into your footer then you should really be using a standard footer technique.
The footer at the bottom approach is best for a shallow footer that holds a copyright message or small set of links etc. It doesn't really work with dynamic content of unknown height.
You can't do this either:
Code:#page { height:100%; margin:0pt; min-height:100%; padding:0pt; }
Code:html,body{ height:100%; margin:0; padding:0; } #page { min-height:100%; width:100%; } * html #page{height:100%}
-
Nov 29, 2007, 13:05 #6
- Join Date
- Nov 2007
- Posts
- 6
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hey! Thanks guys for all the help, but i am still struggling! I have altered my CSS accordingly but the footer still is riding up higher than it should. Am i trying to do something too difficult here? I really don't want to resort to tables but will if i must i s'pose. Thanks for all the help so far, any other advice that will get this to work?
James
-
Nov 29, 2007, 17:21 #7
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
To be frank that page is a mess
You don't seem to have thought about anything logically and you have an unhealthy mix of absolute positioning and static content. That makes it impossible for you to have a footer because you have placed your side column absolutely and you cannot clear an absolute column which means you can't have a footer under both columns when one is absolutely placed.
If the absolute column was a fixed height then you could make allowances but this is not feasible for your articles. You need to float both those columns and regain the flow of the document.
You have positioned your copyright in the footer using relative positioning which results in a great big gap because relative positioning shouldn't be used for structural layout. There is no need to position it at all and you could simple let it follow in the flow and use margins to nudge it into position.
Why is the footer so big?
You have made it 420px high which combined with the height of your header will mean that there is barely room to fit the header and the footer alone in anybodies viewport (let alone add any content) which makes the issue of the footer at the bottom of the window nonsense because no one has a monitor that big.
Then we have the issue of the footer and despite my attempts to give you the correct advice you have completely ignored the advice I gave you and implemented nothing like it should have been
The faq on the footer and 100% height clearly tells you that only one element can hold the 100% height and this must be the first element on the page. The first element on your page is #container and you have not given that the min-height routines as already indicated above. Instead you applied it to an inner nested div that was half way down the page. There is no logic to doing that!
You then haven't implemented the clearfooter div needed to protect the footer and you haven't applied the negative margin to the footer to bring it back into the viewport. In fact you got nothing right at all in this respect
As I said above I don't think you need the footer at the bottom technique anyway and you should just let the footer follow naturally as your pages will all be larger than the initial viewport anyway with the design you have.
This is how the css should have been if you wanted to implement the sticky footer technique.
Code:html,body{ height:100%; margin:0; padding:0; } #container { width: 100%; text-align: left; margin: 0 auto; min-height: 100%; } * html #container{height:100%} #page { margin:0; padding:0; } #content { padding: 5px 5px 0 5px; background: url("/blog/images/topbg.png") repeat-x; } #clearfooter{height:420px;clear:both} #footer { clear: both; width:100%; position: relative; height: 400px; color:#FFFFFF; padding: 10px; background-color:#222222; margin-top:-420px; } #leftcollatest{ position: relative; background: url("/blog/images/latestbg.png") repeat-y right; border-left: #999999 dotted 1px; padding-left:10px; float:right; width:275px; } #rightcollatest{ float:left; width:200px; background: url("/blog/images/latestbg.png") repeat-y right; } #copyright{ position:relative; font-size:8px; }
Code:<p><a href="http://www.ncmag.co.uk/note">Continue reading...</a></p> </div> </div> </div> </div> </div> </div> <br/> </div> <div id="clearfooter"></div> </div><!-- #container closing div --> <div id="footer"> <div id="sidebar"> <div class="sidebar-node" id="searchnode"> <h3>Search</h3> <div id="search" class="search"> <form action="http://www.ncmag.co.uk/search" id="sform" method="get" name="sform"> <p> <input type="text" id="q" name="q" value="" /> </p> </form> </div> </div> <div class="sidebar-node" id="archivesnode"> <h3>Archives</h3> <ul> <li><a href="http://www.ncmag.co.uk/archive/2007/10"> October 2007</a> (1)</li> </ul> </div> </div> <div id="copyright"> <p>All content on this site is not the view of Huddersfield New College and are the views of individuals. The content on this site is unaffilated with Huddersfield New College and if it causes offence we ask you to leave the site or contact us immediately. <p> <p>Design Copyright by James Osborn, © 2007 / Article Copyright is subject to specific authors as referenced</p> </div> <div id="sidebarftr"> <h3>Contact Us</h3> <img src="http://www.ncmag.co.uk/blog/images/email.png" alt="Email Me:" /> E-mail me now on: editor[at]ncmag.co.uk </div > </div> </body> </html>
personally I wouldn't bother trying to implement my footer at the bottom method because there seems no point because the footer is too big for this to make any real effect.
Thus is how a footer should look:
http://www.pmob.co.uk/temp/spointfooter.htm
You need to go back to basics and plan your way carefully and understand the methods you are using and what the consequences will be. There is no point in throwing in relatively positioned elements when you don't understand the consequence of doing so. relative elements are only moved visually and not physically as they always occupy their original place in the document even hough they appear to be somewhere else.
Absolute elements are removed from the flow and are not useful for elements of fluid height because they disrupt the flow and it cannot be regained. If you want elements side by side then you would need to float them. If you use absolute positioning then you would need to fore go having a footer under both columns.
Sorry to sound so harsh but you must pay attention
Bookmarks