HTML and CSS Reference
In-Depth Information
The navigation
menu is now
above the page
Task: Exercise 13.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:
1. 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.
2. 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; }
3. Then change the positioning offset properties the #sidebar . You don't even have to
change the rule for the top property; just replace the property name right with
left .
4. Reload the page. You should now see the menu bar on the left side of the screen.
5. Next, move the #footer section. Even though the id of the <div> is “footer” ,
there's nothing magical about that name that means it needs to be at the bottom of
the page. Place it on the right side, where the sidebar used to be located. First clear
some space:
#main { padding: 0 12em 2em 12em; }
Search WWH ::

Custom Search