Exercise 9.3

This is Exercise #9.3, lecture on CSS Flexbox, used in the course IDATA2301 Web technologiesat NTNU, campus Aalesund.

Go back to exercise list.

Instructions

Your task is to create an HTML document which has a navigation bar on the top. Use the conventional way with semantic elements: <nav> for the main navigation container, <ul> inside it and each menu item should be a list item (<li>).

Hints:

• You probably want to style the <li> as a flexbox?
• An NTNU logo image is inside the img directory.
• If you do it properly, the navigation bar will fill the window width, the logo will be on the left and the menu items (the texts) will be on the right.
• If you have a hard time removing whitespace on top of the navigation, you can set margin to zero for all elements with this CSS hack: * { margin: 0; }

The navigation bar should look like this:

Solution

Warning! Give the exercise a try before you look at a solution! That way you will learn much more!

You can find a solution here.