HTML and CSS Reference
In-Depth Information
Finally, you need to determine whether you are using a fixed layout or a liquid layout. A
fixed layout is one that defines a specific width for an entire page; for example, it may be
always 700 pixels across, and excess space in the browser simply becomes wider mar-
gins. A liquid layout is one that grows larger (or smaller) based on the user's screen reso-
lution and browser window size.
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 13.2 is a style sheet that starts to set up the layout choices.
LISTING 13.2
A Style Sheet for Page Layout
/* dunbar-layout-13.2.css */
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; }
13
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.
