CSS: fixed header and footer

Tweet

Today we are going to create a header and a footer with fixed position. Our page will have a center part which will naturally overflow when needed, while the header and the footer will stay where they are (top and bottom). The content in the central part will eventually go under the header (when scrolled down) and under the footer (if longer than the viewport).
Nothing complicated, but we will need some little CSS tricks.

Let's start.

CSS: the use of styles in Apple homepage

Tweet

As you already know, Steve Jobs has passed away. When the news appeared on the web, many blogs, news agencies and web sites published articles about the life of the man who's been said has changed the world.

The Web Thought paid a tribute to him, as well, by reproducing Apple corporate homepage main picture.

Apart from the sad thing, I would like to take your attention on how the Apple web team created that homepage. I believe it is quite interesting to see how CSS styles were used, even if it might look too basic.

Please follow me...

CSS: positioning

Tweet

Positioning of elements inside a page could be quite tricky. Nevertheless, it is a powerful way of creating wonderful layout and it gives freedom and flexibility. I would like to explain everything you need to know in order to use the correct method to place your elements using CSS styles.
First of all, let me point out that there are four method for positioning:

1. static: this is the standard way of positioning; the element will be displayed following the normal flow of your page;
2. fixed: a fixed positioning will place the element in a fixed position; the element won't move even if you scroll down the page;
3. relative: with a relative positioning the element will stay relative to its normal position;
4. absolute: the element will be positioned relative to the first parent that has a position other than static; if there's not such element, <html> will be that element.

Let's go in depth and see how they work.