Hey All,
Just getting back into some web development after a few years out doing application development.
I’m trying to build a fixed header and footer on a horizontal scrolling page. The page is going to hold a gallery of photos.
The page is http://www.paulmowat.co.uk/sandbox/paulmowat/gallery.html
What I’m trying to achieve is to have a fixed header and footer and be able to customize the content height if required through CSS.
Thanks
Thanks very much Stomme poes, Your help is greatly appreciated.
I thought I’d try HTML5 as I hadn’t used it yet but I think I’ll need to take some time out to learn it and understand it better rather than trying to do it quickly.
I ended up using multiple divs and stuff to try and get it to work. I’m going to take some time tonight after work to go through your example to see where I went wrong and will let you know how I get on with it.
Again thanks.
I’ved tried following the Sticky Footer tutorial and now got it sitting at the bottom of the screen however when I scroll horizontally it is also scrolling.
Yes, unlike position: fixed, sticky things are not fixed to the viewport, meaning whatever’s in the footer can actually be reached.
So, if you really want your footer to act like your header, then you probably do really want a fixed footer. I just wondered if the sticky footer would work for you better. This does mean the footer will always be on-screen. It will cover up content if the screen is too small, so you’ll still use the padding idea for Content the same way it was used in the sticky footer: it’ll let people scroll down to see the rest of the content, leaving some room for the footer to sit over without always covering content.
I still can’t get to your menu in the header unless I make my screen huge. It just goes off-screen and is unreachable. Looks like you’re going for visitors with screens at least as big as 1024. While that’s not unreasonable, just be aware there’s more variety out there, plus the power users who minimise their browsers (they’ll figure out they need to enlarge their browsers real fast though so not a huge deal). Smaller screens are out there, popular, and won’t work with this page. Mobiles and pda’s who can’t zoom are out.
i noticed as well when i view in 1024x768 that it sits at the bottom of the page but when i scroll vertically it appears half way on the page
There are some terribly wrong things on this page. Half of the problem is the HTML5 junk: if you’re going to use it, use it. But if you have to double and triple your code just to get it working in all currently-used browsers, that’s a big hint NOT to use it. All you’re doing with this HTML5 is doubling and tripling your code. Lots and lots and lots of your code is doing NOTHING at all except sitting there, making it harder for you to find your errors and repeats. <nav> wrapping divs wrapping uls… the whole point of <nav> was to replace ul’s, but it’s pointless: it’s not more semantic than a ul, and screen readers still recognise <ul> as an unordered list, while still not knowing what a <nav> is.
Your code is repeating itself, conflicting with itself, and generally acting like those cartoon characters who punch themselves in the face.
You have div id=“content” twice. The validator should have caught that. Always validate your code when you run into problems. You can still have problems and no invalid code, but so long as there is invalid code that you don’t know about, you’re wasting time bug-hunting.
You have stuff floated all over the place, but none of the containers are enclosing them! You set heights on the “par” things in your <section>, but the content inside is much, much taller! Which is why it’s a bad bad idea to set heights on things unless you know what’s going to happen (this is why the #container has min-height: 100% for the sticky footer).
So, what you ended up having was, main page content was NOT pushing down the footer. In a sticky footer, the content pushes the footer down, but if the content is shorter than the body (tall screen), the footer stays tucked at the bottom of the 100%-high page #container.
In order to get the sticky footer working for your page, I had to change many things. *edit but I ended up just using the fixed footer instead, based on our comments about scrolling
First, I just went back to HTML4 because even though I have Firefox, there was too much unknown to me and I needed to be sure the HTML5 elements weren’t somehow causing the problem. I’m going to try to convert it back to HTML5 and see if it still works… it should, but we’ll see. The stylesheet explicitly set the main tags to display: block, even though as far as I know those are already blocks, but maybe they don’t act the same when floated, etc. So for now I’ve made them divs because I know their behaviour.
Next thing I did was removed that HTML5 stylesheet. I noticed you repeated a lot of stuff in your master stylesheet that should have worked from your HTML5 stylesheet. The problem is that you imported it incorrectly:
you had comments above the @import line. In a CSS stylesheet, any @imports MUST be first, before comments. That’s why you had to re-declare stuff.
And, the reset in there is awful. It’s based on the one Eric Meyer is horribly ashamed of (if he isn’t, he should be). It’s an excellent example of lots and lots and lots of code that, other than making pages less accessible and making debugging harder, does absolutely nothing but take up bytes.
I could rant further about that, but for now, I just took it out. You can add in anything from it that you find you need for a particular element, but you’re only shoving an arrow through your foot and holding yourself to the ground with that reset. Esp since it even removed Meyer’s warning to add “focus” styles back in… which not only does nobody do, but nobody seems to understand why it’s there and just think it’s ugly. I fixed this by leaving outline in, AND adding :focus to your :hover statements. Keyboarders wanna know where they are too.
You can keep the line that sets all the HTML5 elements to display: block. So far as I know, they’re already blocks, but maybe not all browsers recognise that, or maybe it’s for IE in conjunction with that Javascript you have?
I’ve got a very small reset in my example.
Then I took the <section> tag, made it a <div id=“section”> and let that box determine the width of the page.
Actually, you could do what I did on my horizontal site: I used ErikJ’s negative right margin trick. This way, as you add “par” divs, the width still extends… so you don’t have to set a width: 4000px, meaning the width will always adjust to the number of “par” divs you have! Just like a vertical page. Only issue with that is, there’s a limit to page widths and heights in Opera and Konqueror… and maybe other browsers. Your negative margin can’t exceed that amount (it’s the same amount you see in the Sticky Footer code, in teh hack for Opera from ErikJ… that’s Opera’s limit).
*edit, did this in my version
Then I made sure the #container really was 100% high (when you make someone 100% high, you don’t want to then add in top or bottom margins, padding or borders…). I think Paul’s version maybe gave the #container a negative top margin, but because you’re already getting weird with the header, I just did the sticky footer I’m more comfortable with: leave the #container alone and just pull the footer up with a negative top margin.
You had
margin: -50px;
that must’ve confused a lot of browsers. I think you meant
margin-top: -50px;
which makes sense for a sticky footer.
Since I went ahead and made it fixed, none of this applies. I also removed the fixes for Opera and IE8 because I’m not sure if they’re needed for fixed footer stuff.
I removed most of the positioning you had. General rule of thumb, if you want to keep your sanity and your hair, don’t go around positioning everything unless you’re being VERY funky. Fixed header and footer aren’t that funky, really.
So what about the header? After making sure Content only existed once (instead of also inside the first <section> tag), and then making sure it enclosed its floats (using :after and a retarded way of triggering haslayout, but there are plenty of ways), then I just used more padding tricks.
Content has enough top padding to leave room for the fixed header, plus some for more room. Nobody will ever see it, because the header will be sitting right on top of it, or it’ll be offscreen.
I haven’t extensively tested this:
Gonna see if I can HTML5 that. Even so, I dunno what that IE-javascript-thing does, but it’s bogus if it can’t make a regular HTML5 page work, cause I would just
<nav>
<li><a href=“foo”>First list item</a></li>
…
</nav>
that was the plan, anyway. Not wrapping several divs and other strange boxes around every menu.
Let me know if you find an issue with the demo above… I didn’t boot up the windows machine, and IE is the one who’s most likely to have some problem with this.
Actually I remember IE6 has a problem with position: fixed. Paul O’B’s got a demo somewhere that works for IE6 though. It’ll need position: absolute unless your Javascript is fixing that for you.
I’ved tried following the Sticky Footer tutorial and now got it sitting at the bottom of the screen however when I scroll horizontally it is also scrolling.
i noticed as well when i view in 1024x768 that it sits at the bottom of the page but when i scroll vertically it appears half way on the page
You can do what you’ve done with the header: set a position: fixed footer at the bottom of the page, set to bottom: 0; (and then of course bottom padding on the middle section equal to or slightly greater than the height of the footer).
However if you make your browser the width of a mobile, or anyone with the still-common-in-our-local-schools 600x800 screen, you’ll see the issue with truly “fixed” headers and footers: they don’t scroll. If the content inside is wider than the user’s screen, it is completely inaccessible (so long as CSS is on and the user is using a graphical browser anyway).
You might want to reconsider the fixed header: it’s actually annoying to see, out of the edge of my eye, the text being covered up by the grey bar. But, if this is integral to your design, you could possibly do something like have a normal header and a scrolling middle (both ways). This means the scrollbar of the browser is removed, and instead is inside the middle section only. This might not visually work the same cross-browser, but it might do exactly what you want.
Otherwise, for the footer, would a Sticky footer do the trick?
I’ve got a (checked only in modern browsers, no JS) HTML5 version:
So, I did seem to need to make nav display block, so I brought that line in. I never bothered to look up if navs have bullets (prolly not) but I still have list-style:none in there. Left in some stuff from you that I don’t understand because it’s obviously on some other page. Cleaned some stuff up.
The Javascript might not work with this… it might have been relying on your extra containers.
Hey, if you want to play with HTML5, you might want to contact andrew-bkk as he’s been doing artsy-type sites with it (what he does is, have regular containers and HTML5 containers, and gives the regular containers to IE using IE conditional comments… if you don’t have a huge number of boxes, this could be doable).
Thanks for your help guys.
I’ve updated the code at http://www.paulmowat.co.uk/sandbox/paulmowat/gallery.html to match donboe’s example.
I’m using firefox to view it and still no joy. It’s now sitting at hte bottom of the menu instead of the bottom of the page
What was the problem with the fixed footer if I may ask? I just tried it myself, costed me just a few minutes and it’s working fine.
Like Stomme poes mentioned:
#footer {
width: 100%; height: 51px; position: fixed; bottom: 0; background: url(images/backBottom.gif) repeat-x;
}
/* and for the content div a bottom padding slightly higher that the hight of the footer */
#content {
position: relative; top: 51px; padding: 20px 0 55px; background: #48494A;
}
I tried setting the postition: fixed on the footer with no joy.
I’m trying to get a similar layout to http://www.fashionphotographer.it/fashion-photography/fashionphotography.html
Will have a look at the link when I get back to the office.