HTML and CSS Reference
In-Depth Information
FIGURE 13.6
The navigation
menu is now
above the page
headline.
▼
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; }
