O'Reilly logo

Learning Modernizr by Adam Watson

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

Styling the page

Now is also a good time to add some styles for the elements that are new to the page. In the styles.css file we'll add the following to start shaping things into place:

/* Basic navigation styling */
#navbar{

  width: 100%;
  height: 50px;
  text-align: center;
  position: fixed;
  top: 0;
  padding: 0;
  z-index: 10;
  background: url( images/stripe-header.png ) 0 0 #333;
  border-bottom: solid 1px white;
}
/* Add a decorative border to the top of the #main element */
#main{
  border-top: solid 2px #333;
}

/* General styling for the websites frames */
.frame{
  height: 700px;
  position: relative;
  border-bottom: dotted 5px #fff;
  background: url( images/grey-stripe.png );
}

The navigation bar will remain in place and therefore has a fixed setting and a ...

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