O'Reilly logo

Using Google App Engine by Charles Severance

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Building the Navigation Menu

Now let’s build up our navigation menu by changing the layout of the blocks in our page using CSS. Until now, the blocks have appeared one after another from top to bottom in the order that they appear in the document. We are going to take a bit more direct control of our blocks and get the look and feel that we like. The first thing we will do is make the list elements (<li>) render using inline layout instead of block layout. Then we take the <h1> content and push it over to the left side of the header <div> and the list of navigation links in the <ul> and push that to the right side of the header <div>.

Here are the CSS rules to move these elements around within the “header” <div>:

#header {
  background-color: #dde;
  border-top: 3px solid #36c;
  height: 100%;
  overflow:hidden;
}

#header h1 {
  font-size: 20px;
  float: left;
  vertical-align: middle;
}

#header li {
  font-size: 14px;
  display: inline;
}

#header ul {
  list-style: none;
  float:right;
  vertical-align: middle;
}

For the header <div> itself, we set the height to 100% and the overflow to hidden. In order to lay the <h1> element on the left and the <ul> on the right, we “float” them left and right. Floated element children are taken out of the flow of the document, which means that #header is technically empty and will not lay out enough vertical space to wrap the two children unless specifically told to do so; hence the height: 100%; and the overflow:hidden rules.[4] We set the font size on the

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required