Using the properties discussed in this week, we can start to build the types of layouts you are likely familiar with seeing on the web.
Header Example
The following example shows how to use the techniques discussed this week to build a header. This header is made of two basic bars; the top bar is for navigation or a menu, and the second bar presents the site’s “identity”.
NOTE: How the colors for both sections are the inverse of each other in order to provide cohesion amongst the parent elements.
The main container (header) has its padding and margin properties set to 0, so that there is no space between the header and the container browser page. This is true for the “menu-container” (.menu-container) element as well. This makes it possible for it to rest right above the identity bar.
The upper header, or menu bar, is very similar to the example from the position page. It uses position: inline-block; to set the menu items (.menuitem) next to each other horizontally. It also uses padding and margin to provide space between each entry.
The hover pseudo-class is used to change the appearance of the elements when a user moves their mouse over them. This allows the user to know that these elements are ‘likely’ reactive.
There is also a dropdown menu on the last item, that uses the same techniques as discussed earlier.
The “lower header” (.lower-header) serves as a site identity or branding. It contains a stylized version of the site name, as well as a logo image. Both of these have been placed to the hard left and right sides respectively using the float property.
NOTE: I also set the height of the site logo image within the CSS.
Body Examples
Study the following layout examples:
Body Example 1 - Center Content Alone
In this first example, the main content or body of a page is presented. This content is presented alone, with ample margins on both sides. It is also centered in the center of the screen.
Center Content
Occaecat incididunt et nostrud consectetur nostrud quis quis ad velit laboris nulla nostrud eiusmod consequat. Do duis eiusmod et fugiat Lorem velit anim sint do et adipisicing fugiat veniam. Elit Lorem sint commodo quis minim in est. Cupidatat aute consectetur velit Lorem excepteur tempor minim. Ipsum nostrud est veniam labore laboris eiusmod eiusmod laboris minim aliquip anim Lorem. Consectetur fugiat ipsum Lorem commodo occaecat esse occaecat excepteur. Ullamco est laboris enim velit eu laboris pariatur exercitation proident amet.
Eu eiusmod aliquip amet consequat eu dolore nulla non. Nisi veniam ea dolore sit incididunt commodo nostrud magna veniam consectetur consequat proident sit commodo. Eu proident ullamco excepteur eiusmod eu amet aute sit magna id sit sunt dolor quis. In ut tempor commodo ad consectetur aliqua in in deserunt aliqua do ut. Quis amet qui enim laboris anim dolor proident nulla ipsum proident amet magna ut cillum ea. Ut in magna voluptate proident do consequat magna officia proident occaecat. Enim exercitation velit et ea minim quis adipisicing fugiat duis sit magna.
Enim elit veniam cupidatat incididunt aliquip incididunt nostrud ea proident ut officia dolor. Elit adipisicing fugiat consectetur velit dolor est fugiat esse ex consectetur nostrud aliqua occaecat deserunt tempor dolore laboris. Cupidatat incididunt culpa qui et veniam deserunt proident ea consectetur.
Exercitation enim occaecat ex magna duis laborum laborum ex voluptate dolor consequat laborum adipisicing est. Nostrud commodo aute pariatur fugiat aute laborum ut magna esse tempor commodo ullamco dolore occaecat. Eu nisi ipsum amet ipsum nostrud do eiusmod eiusmod consequat sunt. Aliqua do exercitation commodo enim veniam sunt ipsum adipisicing irure proident eiusmod exercitation velit quis duis est ad. Veniam duis est in ut quis nisi enim sit fugiat exercitation aliqua deserunt elit reprehenderit adipisicing.
Body Example 2 - Add an Aside
In this next example, there is an “aside” containing secondary information. This is placed using the float property, so that the main content can “flow” around it, after the aside “is finished”.
Center Content
Occaecat incididunt et nostrud consectetur nostrud quis quis ad velit laboris nulla nostrud eiusmod consequat. Do duis eiusmod et fugiat Lorem velit anim sint do et adipisicing fugiat veniam. Elit Lorem sint commodo quis minim in est. Cupidatatm aute consectetur velit Lorem excepteur tempor minim. Ipsum nostrud est veniam labore laboris eiusmod eiusmod laboris minim aliquip anim Lorem. Consectetur fugiat ipsum Lorem commodo occaecat esse occaecat excepteur. Ullamco est laboris enim velit eu laboris pariatur exercitation proident amet.
Eu eiusmod aliquip amet consequat eu dolore nulla non. Nisi veniam ea dolore sit incididunt commodo nostrud magna veniam consectetur consequat proident sit commodo. Eu proident ullamco excepteur eiusmod eu amet aute sit magna id sit sunt dolor quis. In ut tempor commodo ad consectetur aliqua in in deserunt aliqua do ut. Quis amet qui enim laboris anim dolor proident nulla ipsum proident amet magna ut cillum ea. Ut in magna voluptate proident do consequat magna officia proident occaecat. Enim exercitation velit et ea minim quis adipisicing fugiat duis sit magna.
Enim elit veniam cupidatat incididunt aliquip incididunt nostrud ea proident ut officia dolor. Elit adipisicing fugiat consectetur velit dolor est fugiat esse ex consectetur nostrud aliqua occaecat deserunt tempor dolore laboris. Cupidatat incididunt culpa qui et veniam deserunt proident ea consectetur.
Exercitation enim occaecat ex magna duis laborum laborum ex voluptate dolor consequat laborum adipisicing est. Nostrud commodo aute pariatur fugiat aute laborum ut magna esse tempor commodo ullamco dolore occaecat. Eu nisi ipsum amet ipsum nostrud do eiusmod eiusmod consequat sunt. Aliqua do exercitation commodo enim veniam sunt ipsum adipisicing irure proident eiusmod exercitation velit quis duis est ad. Veniam duis est in ut quis nisi enim sit fugiat exercitation aliqua deserunt elit reprehenderit adipisicing.
Body Example 3 - Add a Side Menu
In this next example, the left 25% of the screen is used for a vertical menu, while the right 75% is the main content.
As with the above examples, this is accomplished using the float property, along with specifically stating the width of each section as a percentage.
All Together
Finally, let’s take elements from all of the above and make a simple webpage!
This page has a header, side menu, main content section, an aside, and footer.
