ptg16476052432 LESSON 15: Advanced CSS: Page Layout in CSS
▼Exercise 15.1: Redesign the Layout of a Page
You just learned how to move the site navigation menu around. What if you want to
make further changes to the page? Try these steps to get familiar with how easy it is to
change the layout with CSS:- Download a copy of the source code for editing. The file dunbar.html contains the
complete HTML page, and dunbar-full.css has all the style rules listed in this
chapter combined into a single style sheet. - Move the sidebar to the left side of the page instead of the right. To do this, you
need to make space for it in the left gutter by changing the padding rule on the
#main section to
#main { padding: 0 2em 2em 12em; } - Then change the positioning offset properties on the #sidebar. You don’t even
have to change the rule for the top property; just replace the property name right
with left. - Reload the page. You should now see the menu bar on the left side of the screen.
FIGURE 15.6
The navigation
menu is now above
the page headline.▼