HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [118]
float: left;
width: 640px;
clear: both;
}
#left {
float: left;
width: 200px;
clear: left;
}
#right {
float: left;
width: 440px;
}
#footer {
float: left;
width: 640px;
clear: both;
text-align: center;
background-color: #e2e393;
border-top: 3px double black;
}
How the jello layout works
This code is very similar to the fixedWidth.css style, but it has some important new features:
♦ The background image is now applied to all. The all div is now acting as a surrogate body element, so the background image is applied to it instead of the background.
♦ The all element has a fixed width. This element’s width will determine the width of the fixed part of the page.
♦ all also needs a fixed height. If you don’t specify a height, all will be 0 pixels tall because all the elements inside it are floated. Set the height large enough to make the background image extend as far down as necessary.
♦ Center all. Remember, to center divs (or any other block-level elements) you set margin-left and margin-right both to auto.
♦ Do not float all. The margin: auto trick doesn’t work on floated elements. all shouldn’t have a float attribute set.
♦ Ensure the interior widths add up to all’s width. If all has a width of 640 pixels, be sure that the widths, borders, and margins of all the elements inside all add up to exactly 640 pixels. If you go even one pixel over, something will spill over and mess up the effect.
Limitations of the jello layout
Jello layouts represent a compromise between fixed and fluid layouts, but they aren’t perfect:
♦ Implicit minimum width: Very narrow browsers (like cellphones) can’t render the layout at all. Fortunately, these browsers usually allow you to turn off CSS, so the page will still be visible.
♦ Wasted screen space: If you make the rendered part of the page narrow, a lot of space isn’t being used in higher-resolution browsers. This can be frustrating.
♦ Complexity: Although this layout technique is far simpler than table-based layouts, it’s still a bit involved. You do have to plan your divs to make this type of layout work.
♦ Browser support: Layout is an area where little differences in browser implementations can lead to big headaches. Be prepared to use conditional comments to handle inconsistencies, like IE’s strange margin and padding support.
Chapter 3: Styling Lists and Menus
In This Chapter
Using CSS styles with lists
Building buttons from lists of links
Dynamically displaying sublists
Managing vertical and horizontal lists
Building CSS-based menus
Most pages consist of content and navigation tools. Almost all pages have a list of links somewhere on the page. Navigation menus are lists of links, but lists of links in plain HTML are ugly. There has to be a way to make ’em prettier.
It’s remarkably easy to build solid navigation tools with CSS alone (at least, in the modern browsers that support CSS properly). In this chapter, you rescue your lists from the boring 1990s sensibility, turning them into dynamic buttons, horizontal lists, and even dynamically cascading menus.
Revisiting List Styles
XHTML does provide some default list styling, but it’s pretty dull. You often want to improve the appearance of a list of data. Most site navigation is essentially a list of links. One easy trick is to make your links appear as a set of buttons, as shown in Figure 3-1.
Figure 3-1: These buttons are actually a list. Note that one button is depressed.
The buttons in Figure 3-1 are pretty nice. They look like buttons, with the familiar three-dimensional look of buttons. They also act like buttons, with each button depressing when the mouse hovers over it. When you click one of these buttons, it acts like a link, taking you to another page.
Defining navigation as a list of links
If you look at the HTML, you’ll be astonished at its simplicity:
”http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>