ptg16476052Laying Out the Page 42715
wider margins. A liquid layout is one that grows larger (or smaller) based on the user’s
screen resolution and browser window size. There is a greater variety of devices used
to access the Web these days, and there’s also the challenge of presenting your site well
on all of those devices. You’ll learn about some techniques to help with that in Lesson
21, “Designing for the Mobile Web,” and how to change your layout depending on the
device viewing it in Lesson 16, “Using Responsive Web Design.”
There are advantages and disadvantages to both fixed and liquid layouts. A fixed layout
may be easier to create and easier to read on larger monitors; a liquid layout is more
adaptable but could result in overly long lines, which are harder to read. In this example,
the Dunbar Project site will use a liquid design with margin size based on em units.
Listing 15.2 is a style sheet that starts to set up the layout choices.
LISTING 15.2 A Style Sheet for Page Layout
body { margin: 0; padding: 0;
background-color: silver; }
header { background-color: black; color: white; }
#sitenav ol { padding: 0; margin: 0;
display: inline; }
#sitenav li { display: inline; padding-left: 1em;
margin-left: 1em;
border-left: 1px solid black; }
#sitenav li:first-child
{ padding-left: 0; border-left: none;
margin-left: 0; }
#sitenav li a { color: white; }
#main { padding: 0 12em 2em 2em;
position: relative;
background-color: gray; }
#content { background-color: white; }
#sidebar { position: absolute; width: 10em;
right: 1em; top: 1em; }
#sidebar h3 { color: white;
background-color: black; }
#sidebar ol { margin: 0 0 1em 0;
background-color: white;
border: 2px solid black; }
footer { background-color: white; }
This style sheet is deliberately plain and simple, with colors of black, gray, silver, and
white to make it easier for you to identify the various sections of the page.