Lesson 14 - Fixed navigation menu and positioning in CSS

In the previous exercise, Solved tasks for HTML and CSS lessons 12-13, we've practiced our knowledge from previous lessons.

In the previous lesson, Solved tasks for HTML and CSS lessons 12-13, we styled a header with a navigation. In today's lesson, we're going to continue styling and finish our website's layout.

Footer

We'll start out by styling the footer. There isn't much to think about when styling things as simple as footers. We set the height, text color, and margin:

footer {
    height: 40px;
    color: white;
    margin: 20px 0 0 30px;
}

Then, we'll style the link in the footer sort of like we did with the link in the header:

footer a {
    color:  #ffbb00;
    text-decoration: none;
}

Easy enough, right? Here's what it looks like now:

The area with the article content (<section>) is a bit too close to the article. Let's set a horizontal padding of 30px to the article:

article {
    background: url('images/background.png') #009aca;
    padding: 30px 0px;
}

There, much better!

Various resolution support

We designed the website in a way that is usable for screen resolutions of 960px and wider. Meaning that our site supports resolutions of 1024x768 and higher. Nowadays, the most common screen resolution is something around 1280x800 on laptops (our website would still look good at that resolution) and Full-HD (1920x1080) on desktops. Let's take a look what our website looks like in Full-HD:

Not ideal. The resolution could even be higher than that, so we must keep these cases in mind when we design websites so that they will always look good. We can see here why we set the entire body's background as gray. Doing so helped the footer fill up the empty space. In most cases, most of a page's content will be located in subpages. However, it's crucial that you keep every possible case in mind.

Article element width

Some people (mainly teachers and theoreticians) say that the area that contains website content should adjust to the size of the browser window. However, one simply cannot format the same content and make it look good on both 1024x768 and Full-HD resolutions. In full-hd, text paragraphs become long noodles. Have you ever seen a book written horizontally on a paper roll? I sure haven't. Most websites, mainly the popular ones, have a fixed width for their article areas. One of the only exceptions being Wikipedia. In other words, we're not going to adjust the <section>.

What we can change in order to make our website look good on higher resolutions, is centering the website in a way that a user with a wide monitor wouldn't dislocate his neck while reading it.

Since we need to center 2 elements inside of the article (<header> and <section>), we'll wrap them both in a <div> and set its id:

<article>
    <div id="centerer">
        <header>
        ...
        </section>
        <div class="clear"></div>
    </div>
</article>

We haven't gone over centering a single block element inside of another yet. All we have centered up until now is images, inline element, which we did using the text-align property. However, this property has no effect on block elements. We'll center the block by setting its margin to the "auto" value. To make it actually work, we will also have to set the element's width (otherwise, it would adjust over the entire article):

#centerer {
    margin: 0px auto;
    width: 960px;
}

The result:

We have just now finished our layout. If you're in the mood, you could also add one more cool feature - a fixed menu.

Fixed menu

The header with the navigation menu is relatively thin, so what we'll do to thicken it up a bit, is fix its position. We haven't gone over positions yet, so let's go ahead and get right into it!

We set the position of a particular element using the position property in CSS. HTML has 4 different types of positions:

Static position

Static positions are the default position for all HTML elements. An element is simply rendered in the position where it's defined while keeping all of the other elements on the page in consideration. All of our elements have been in fixed position up until now. Simply speaking, they're displayed where they should be

Relative position

If we set an element in a relative position, we are able to define the left, right, up, and bottom CSS properties. We would then be able to set, in pixels or a percentage, how much an element will be shifted from its original position. If we set the left position of the element to 20px, it will be displayed 20px to the right from its original position. If another element just so happens to be to the right of the one that you moved, it will not move along with it. Instead, it will be overlaid by the element that you moved to the right. We can specify which element we want to be further up front using the z-index property. Elements that are further up front have higher numeric values than elements in the back.

Absolute position

Absolute positions display elements on the given coordinates no matter what it's original position was in the HTML portion. Meaning that if we set an element's left property to 20px, the element will display 20px from the left window edge. If there any other elements happen to have been at that position, it will overlay them.

Fixed position

Fixed positions are sort of like absolute positions, but the coordinates are computed in the visible area. With these, scrolling through a page will not affect the elements in any way. They will simply stay in place no matter what.

Let's go ahead and try a few different positions on the header so you fully understand how they work. We already know what it looks like with a fixed position, so we'll try a relative position out on it with the top coordinate set to 50px:

header {
    height: 73px;
    position: relative;
    top: 50px;
}

To avoid these changes from also being applied to the article header, set its position to static:

article header {
    width: 250px;
    float: left;
    position: static;
}

The result:

We can see that the entire element along with its contents has moved 50 pixels down, and covers up several other elements. Other elements didn't move whatsoever. The website behaves as if the element was still at it's original position.

Now change the position to the absolute:

position: absolute;

The result:

As you can see, the element disappeared from the page and appeared above the other content, at the given position. Its original position does not matter at all.

Let's try out a fixed position one last time and actually keep this one. Try scrolling through the website now, to do so you will have to make the browser window smaller. As it is, the header is stuck in place. Now, set the position to "fixed" and the top property to 0px:

position: fixed;
top: 0px;

The header looks as it did with the absolute position, but when we scroll through the page, it stays at 0px from the top of the window:

To keep the element from disappearing, we'll add a margin to the <body>:

margin: 73px 0px 0px 0px;

I'm sure you also noticed that the element didn't keep its original width and that it needed to have its background set. Add the width property and the background image to the header:

background: url('images/background_grey.png') #1c2228;
width: 100%;

The background has now been applied to the article header as well, so we'll disable it in the article header selector by doing the following:

background: none;

The result:

Make sure you only position things differently if you know exactly what you're doing. We rarely use custom positions. Adding lots of absolute positions to a website is a huge mistake.

The menu stays in place even when we scrolling through the page. Congratulations! If you have gotten this far, you now have a complete layout and are able to use HTML and CSS properly. In the next lesson, Creating subpages and a contact form, we're going to, finish each individual subpage and get ready to upload the entire site to the Internet. Today's source code is available for download below, as always.

 

Did you have a problem with anything? Download the sample application below and compare it with your project, you will find the error easily.