I know this has been covered and I’ve combed through the forum for solutions and spent a lot of time trying to get the code right. I’ve gotten the footer to stick to the bottom of my page but I can’t seem to get rid of the space above it (the center space) without it losing the footer “stickiness.” As it is now, when the page is opened the footer is below the web page (even though it functions as it should) and a scroll bar always shows up on the right. The link to the page is here (it’s only gallery 1 that I’m trying to set up as a template for the rest) Any help is greatly appreciated:
Unfortunately (and don’t take this the wrong way) that page is pretty broken with no doctype and incorrectly formatted html and is unlikely to display properly I’m afraid.
Also the sticky footer routine you are using is not going to work anywhere reliably either.
You must have a valid doctype these days or all bets are off.
Here is the wireframe to get you started with your sticky footer image in position.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sticky Footer at Bottom</title>
<style type="text/css">
html,body {
margin:0;
padding:0
}
h1,,h2,h3,h4,h5,h6,p{margin:0 0 1em}
ol,ul{margin:0 0 0 1.5em;padding:0}
html, body {
height:100%;/* needed to base 100% height on something known*/
background:#000;
color:#fff;
}
#outer {
width:100%;
margin:auto;
min-height:100%;
margin-top:-218px;/*footer height - this drags the outer p through the top of the monitor */
text-align:left;
}
* html #outer {height:100%}
#header {
border-top:218px solid #000; /* soak up negative margin and allows header to start at top of page*/
width:100%;
}
#footer {/* footer now sits at bottom of window*/
background:red;
width:100%;
height:218px;/* must match negative margin of #outer */
clear:both;
background:url(http://www.sharonland.com/galleries/gallery1/Footer.jpg) no-repeat 0 100%;
text-align:center;
}
#main{clear:both;width:100%}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* - negate effect of float*/
}
h1, h2, p {
padding:0 10px;
}
#outer:after {/* instead of using display table for ie8*/
clear:both;
display:block;
height:1%;
content:" ";
}
</style>
</head>
<body>
<div id="outer">
<div id="header">
<h1>Gallery</h1>
</div>
<div id="main">
<p>test</p>
<p>test</p>
<p>test</p>
</div>
</div>
<div id="footer">
<p> buttons go here</p>
</div>
</body>
</html>
You cannot add padding or margins to the body or to the page wrapper when using a sticky footer method because that kills the effect. Make room on inner elements.
All you need to do now is place your content properly inside the container called #main.
Read the CSS faq on the sticky footer for how this works and more details.
Thank you, I fully understand it needs to be properly formatted with a doctype etc… before the site can function. The person working on this with me (the person who can properly code) is MIA. So it’s frustrating as a designer. It’s just up on my own url to try to get the design working. I thank you for the wireframe. I’ll start from scratch using that. I really do appreciate your help.
Paul I’m wondering if you might give me your opinion or help again. I’ve tried many ways to make this page work (especially for different size resolutions/browser sizes). I’ve uploaded one here:
This is with the gallery set to height of 75% … if I set the gallery to a specific height the sticky footer works better (it shows up more at the bottom and goes up and down better with the resizing of the browser) but then I’m limited to a smaller swf slide show. Is there a way to resize the swf vertically with less space below it and the footer sticking to the bottom or is this just not dooable. I’m just hoping you can give me your opinion on the best way to do this.
I would just go with a fixed width and height element rather than trying to scale to the viewport as that will look bad and will be awkward to manage.
You don’t need all that MM stuff for the rollovers at the bottom as that can be done in a few lines of css.
You mangled the footer again The dimensions must all match otherwise you won’t get to sit properly. The footer image would be better as a background image as in my original example.
Here’s an example again with an odd flash demo centred.
I know I mangled the footer (again) :] I’m sorry, I was literally up all night trying to figure this out (I know it’s sad). THANK YOU… that code will not only help but will help answer my questions concerning the swf placement, footer background (for some reason I couldn’t get it to work the same as you had it) and I am worse at js than html (lol) so there’s that. I’m trying to learn, thanks so much. I’ll stop bugging you :]
Hi Paul, Is there a way to make the footer image stretch to 100% horizontally with CSS (ie: using it as the background image in the div) ? My front page has a footer image that can’t really be repeated. And I don’t want to mangle it again.
Well you can do what you originally did and scale a foreground image but the results depend on the image as to whether it looks good or not. If you want content to sit on top of the image then you wil need to place it absolutely from within ts container.
That means setting position:relative on the parent element and then the foreground image can be positioned absolutely within that element which will allow footer content to sit on top if needed. Then you would need an inner footer element again with position:relative applied and also a z-index of 2 or higher so that content sits on top of the footer.
I would still prefer to use a background image but slice it more carefully.
If you look at the image I used in the example above:
I took your image and made a copy and then doubled the size of the canvas and flipped the horizontal alignment. That gave me a seamless join so that the image can be repeated forever. I then optimised the image and even though it was double the width of your original image it was still a smaller file size.
I’ve done the same here with your home page image:
Because that image is so tall you will want content to overlap it so it complicates the sticky footer routine even more. It all depends what you want to achieve and whether content needs to overlap the image or not.
Yes! I’ll do it that way instead. I don’t think I really understood about doubling the image length and flipping the horizontal alignment (and I know I needed to optimize it too :]). It looks and functions great that way. I think this is the first time I am truly understanding the CSS involved. I also checked out your webpage and it’s a great reference. Thank You (again).
I’ve tried to resist asking you, and you can just direct me to a resource to read if you like, but I can not space the buttons (triangles) horizontally. I’ve tried everything and it’s now 4am Any chance you can point me in the right direction?
closest I’ve gotten is experimenting with in the html,
padding:5px 10px 5px 15px; in the CSS and I tried creating classes for the individual buttons but nothing really worked.
Here’s the link:
I also did the index page but I’m wondering if I should make the sticky window stop at some point as to not go beyond (or up over) the swf.
I tried to delete the last post because I realized I can just look at the source code of your previous example you put up. For some reason there isn’t an edit button, or maybe I’m too tired. Anyway, you can disregard the last post.
Any chance you can point me in the right direction?