Now we'll set up the default styling for the desktop view:
/*------------------ 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; }
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:
#mainNav
navigation element has been positioned absolute
so it could be brought up to the top of our layout.thisMonth h2
title#across
div is for larger desktops stretched all the way out to the full width of the screen .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)