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.
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; }
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.
Search WWH ::

Custom Search