HTML and CSS Reference
In-Depth Information
Note Usability expert Jakob Nielsen ( www.useit.com/alertbox/screen_resolution.html ) sug-
gested in June 2006 that “optimizing” for 1024 × 768 was the way to go since it involves designing for the
majority while taking steps to accommodate users with lower screen resolutions. An example is having the
bulk of page content visible in the 800-pixel width area, with related links (or other “nonessential” content)
the only parts missing from the default view. We hate to see horizontal scrollbars and favor making the lay-
out work in 800 × 600 wherever possible. But as we said, base your decision on the stats and facts available
to you.
Trust us when we say that you will make mistakes with your first (unaided) CSS layouts.
Rather than take you straight into the utopian world of “perfect-layout-first-time,” we'll
demonstrate some of the pitfalls that we have experienced along the way. That way, you'll be
better armed to deal with similar problems with your projects.
So, try not to skip ahead just yet—we want you to ride through some of these potholed
roads with us for a while!
Using Absolute Positioning
A fairly simple method for positioning elements on a page is to use absolute positioning.
Using this scheme, you remove sections of the document from the normal “flow.” To explain
this concept, we'll use an analogy. Imagine the document as if it were a roll of paper towels.
Now think of each tear-off section as a clearly defined area of your web page: sheet 1 = the
header section, sheet 2 = content, sheet 3 = navigation elements. By default, the running order
is to have one after the other. However, in CSS you can break those sections out from the pre-
scribed running order and place them where you want. Back to the paper towel analogy again:
imagine tearing off each sheet and then placing each square on top of each other (triple thick-
ness!). This is basically what you are doing if you specify in your CSS that those three page
elements should be absolutely positioned: the browser removes them from the flow of the
document and simply places them at the top- and leftmost positions in the browser window.
What you need is a method for fanning those pieces of the web pages back out so that they sit
in the correct place and so that one piece is not obscuring another. You can accomplish this by
specifying some x and y coordinates for each piece. Here's the basic (X)HTML for our example
page (truncated somewhat):
<body>
<div id="wrapper">
<div id="header">
<img src="swanky-header-graphic.gif" alt="Swanky header graphic"
width="377" height="41" />
</div>
<div id="content-wrapper">
<div id="content-inner">
<p>We flew with Czech Airlines ... </p>
</div>
</div>
<div id="navigation">
Search WWH ::




Custom Search