Create navigation bars


Create a folder within the HTML Files folder called Travel West.

In Notepad, create a home page titled Traveling West On Vacation.

Link it to a style sheet: format.css.

Save the home page in your Travel West folder.

Between the and tags, create an unordered list:


  • California

  • The Rockies

  • The Midwest


Open format.css from the Travel folder.

Save it in the Travel West folder.

In format.css, add formatting for a new area, topnav, with background and widthproperties.

#links {
background: #cccccc;
float: left;
width: 200px;
padding: 10px;
}

#content {
background: #ffffff;
margin: 0 0 0 220px;
padding: 20px;
}

#topnav {
background: #cccccc;
width: 100%;
}
Save format.css, then open index.html.

Put the unordered list within the topnav area:


  • California

  • The Rockies

  • The Midwest


Save index.html, then open it (from the Travel West folder) in the browser.

It should look like this:

The background:#cccccc property in the topnav area enclosed the list in a gray background.
  • In format.css, add formatting for a new area, navbar, with these properties:

#topnav {
background: #cccccc;
width: 100%;
}

#navbar {
background: #cccccc;
float: left;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
}
  • Save format.css.
Open index.html in Notepad, and transform the unordered list into the navbar area:

    Open index.html in Notepad, and transform the unordered list into the navbar area:

      id="navbar" >
    • California

    • The Rockies

    • The Midwest


  • Save index.html, then reload in the browser.

    It should look like this:

    The list-style:none property in the navbar area removed the bullets from the list items.

    TIP: The float:left and width:100% properties are needed by some Web browsers to make the bar's gray background appear all the way across the page. Without them, some browsers display the bar like this:

    This is a "tweak"—a piece of code employed to give the page a consistent look in all browsers.
    • In format.css, add formatting for the list items (li) within the navbar list:

  • #topnav {
    background: #cccccc;
    width: 100%;
    }

    #navbar {
    background: #cccccc;
    float: left;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    }

    #navbar li {
    display: inline;
    }
    • Save format.css.

  • Rreload index.html in the browser.

    It should look like this:

    The display:inline property in the navbar li formatting arranged the list items horizontally instead of vertically.
  • In index.html, link the words California, The Rockies, and The Midwest tocalifornia.html, rockies.html, and midwest.html.

  • In format.css, add formatting for these links within the
  • tags:

#topnav {
background: #cccccc;
width: 100%;
}

#navbar {
background: #cccccc;
float: left;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
}

#navbar li {
display: inline;
}

#navbar li a {
background: #cccccc;
float: left;
padding: 5px 20px;
}
  • Save format.css.

Reload index.html in the browser.

It should look like this:



Web Layout HTML & CSS