What is the simplest navigation bar

9.1 Simple horizontal navigation: display: inline

In this section, you'll create a simple horizontal navigation by juxtaposing the list items and then styling them.

The following method is not the only way to achieve the goal of side-by-side list items, but it does have the advantage that you already know everything you need to know. The creative application of simple facts is often the key to success when designing with CSS.

The nested selector # navigation area left

As mentioned, the basis for navigation is usually made up of normal, unordered lists, even if this is no longer visible in the navigation bars.

List elements are block elements and are therefore usually one below the other. You can use the CSS display property to change the way it is displayed; B. display a block as an inline element or vice versa.

The statement display: inline means roughly the following in plain language:

»Dear list elements, you are block elements, but please act like inline elements in the browser for once, so that you can stand next to each other. Thank you and see you soon. Your page builder. "

In order to limit the changes to the list elements to the navigation area, use the nested selector #navi area li, ie »All list elements in the navigation area«.

Before doing this, the background color for the navigation area is defined in the following ToDo.

ToDo: Place list elements next to each other in the navigation
  1. Paste the highlighted lines into the stylesheet:

    #navibereich {
    background-color: # ffeda0;
    padding: 5px 20px 5px 20px;
    }
    #navibbereich li {
    display: inline; / * show left side by side * /
    list-style-type: none; / * without bullet points * /
      }

  2. Save the stylesheet and view the web pages in
    Browser.

Here's what the navigation area looks like with these instructions:

Figure 9.1: List elements side by side - almost good

Three things remain to be done:

  1. There is a white gap between the header and the navigation area.
  2. The navigation area is too far downwards.
  3. The first navigation point has an unwanted indentation from the left.

There are instructions in the stylesheet for all three deficiencies that are unwanted noticeable here. The difficulty is to find the respective polluter. But one after anonther:

  • The white space is created by the margin-bottom of 1em for the paragraphs. As a result, the p in the head area also receives this outer distance.
  • The large distance down in the navigation area is caused by the margin-bottom of the unordered lists ul.
  • The unwanted left indentation of the first navigation point occurs because the list elements li have a left margin of 1em.

Fine adjustments: adjust spacing and hyperlinks

To correct all three errors, use nested selectors that limit the changes to the respective area. In the ToDo, the font color for hyperlinks in the navigation is also set to black.

It is best to save the stylesheet after each step and check the changes in the browser.

ToDo: Change spaces and hyperlinks for the navigation area
  1. Add the following rule to the stylesheet below the style for #headers:
    #head area p {
    padding: 5px 0 5px 0;
    margin-bottom: 0; / * was 1em * /
    }
  2. Add the highlighted lines below the style for #navi area:
    #navi area ul {margin-bottom: 0; }
    #navibbereich li {
    display: inline;
    list-style-type: none;
      margin: 0 10px 0 0; / * right 10px, otherwise 0 * /
    }
    #navibereich a {color: black; }
  3. Save the stylesheet and view the web pages in the browser.

It looks a bit more appealing:

Figure 9.2: A simple horizontal navigation