HTML and CSS Reference
In-Depth Information
</div>
</body>
</html>
It's worth noting that even if there's no CSS or further styling, this page works. The user can read all the
content and then find the navigation. It's not ideal, but it's adequate. This is an important consideration that's
especially crucial for cell phone browsers, screen readers, robots, and other renderers that are never going to
show a two-dimensional layout no matter how it's implemented, with tables or CSS.
Two Columns, Sidebar on Left
Once you've done a few of these layouts, you'll usually just copy and paste some standard layouts. However, for
learning it's helpful to build up the stylesheet in stages. The first step is to assign different background colors to
the individual
div
s so that you can see where the boxes are going.
Coloring the divs
It's often helpful to add borders and different background colors to the individual column
div
s when
designing a new layout, just so that you can see where things are going. For example, I used these
styles when working on this section:
div#Content {
background: red;
border: solid;
}
div#Pages {
background: green;
border: solid;
}
Then I took them out when I was satisfied with the results.
Chris Pederick's Web Developer extension for Firefox is also an invaluable tool, especially it's Outline
Block-level Elements and Outline Positioned Elements commands. It's usually easiest to make a layout
work in Firefox first, and then to figure out what hacks you need to add to make it look decent in
Internet Explorer. Most of the time layouts that work in Firefox work without further changes in Safari
and Opera.
To create a columnar layout, we have to float at least one of the columns to the right or left. Because we'd like
the content to come first, we need to float both. Therefore, both will need a specified width. (Floats simply don't
work if the widths aren't specified. I can't justify this fact, but it is the way it is.) There are three possibilities for
the width:
Search WWH ::
Custom Search