Time for action – standard settings

Now we'll set up the default styling for the desktop view:

  1. Below the typography section in your stylesheet and above the media queries, add the layout styling, shown as follows:
    /*------------------ STANDARD STYLING -------------------*/
header{
  height: 110px;
}

#mainNav{
  position:absolute;
  top: 110px;
  width: 100%;
}
#mainNav li a{
  display: block;
  padding: 10px 15px 13px 15px;
  line-height: 100%; 
  -size: 120%;
  border: none;
  color: #036;
}
#across{
  margin: 0;
  width:100%;
}/*for a stretched bottom only*/

h2.thisMonth{
  font-size: 260%;
}
.content{
  margin-top: 250px;
}
.sidebar{
  margin-top: 150px;
}
.sidebar div{
  margin-top: 30px;
  padding-bottom: 10px;
}
.sidebar h2{
  margin-left:20px;
}
  2. Save your stylesheet.

What just happened?

We added styling for our layout on standard desktop screens. We don't need to examine all of the CSS in detail but some points to note are as follows:

  • Our #mainNav navigation element has been positioned absolute so it could be brought up to the top of our layout
  • We added some sizing for our .thisMonth h2 title
  • Our #across div is for larger desktops stretched all the way out to the full width of the screen
  • We added margins and padding for our .content and .sidebar divs, in particular margin-top to push them down (this is because we'll be adding in a background image here in a bit)
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset