Get up to 80 % extra points for free! More info:

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.

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:

Footer in HTML and CSS - Make Your First Website, Step by Step!

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:

Website in full-hd - Make Your First Website, Step by Step!

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:

Website in full-hd - Make Your First Website, Step by Step!

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:

Relative position in CSS - Make Your First Website, Step by Step!

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:

Absolute position in CSS - Make Your First Website, Step by Step!

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:

Fixed position in CSS - Make Your First Website, Step by Step!

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:

Fixed navigation menu in HTML and CSS - Make Your First Website, Step by Step!

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.

Download

By downloading the following file, you agree to the license terms

Downloaded 55x (87.38 kB)
Application includes source codes in language HTML

 

Previous article
Solved tasks for HTML and CSS lessons 12-13
All articles in this section
Make Your First Website, Step by Step!
Skip article
(not recommended)
Creating subpages and a contact form
Article has been written for you by David Capka Hartinger
Avatar
User rating:
4 votes
The author is a programmer, who likes web technologies and being the lead/chief article writer at ICT.social. He shares his knowledge with the community and is always looking to improve. He believes that anyone can do what they set their mind to.
Unicorn university David learned IT at the Unicorn University - a prestigious college providing education on IT and economics.
Activities