HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [128]
Figure 4-7: The diagram is the key to a successful layout.
Building the layout
Here’s how the layout works:
1. Create an all container by building a div with the all ID.
The all container will hold all the contents of the page. It isn’t absolutely necessary in this type of layout, but it does allow for a centering effect.
2. Specify the size and position of all.
I want the content of the page to be centered in the browser window, so I set its height and width to 90 percent, and its margin-left and margin-top to 5 percent. In effect, this sets the margin-right and margin-bottom to 5 percent also. These percentages refer to the all div’s container element, which is the body, with the same size as the browser window.
3. Other percentages are in relationship to the all container.
Because all the other elements are placed inside all, the percentage values are no longer referring to the entire browser window. The widths and heights for the menu and content areas are calculated as percentages of their container, which is all.
4. Determine the heights.
Height is usually pretty straightforward because you don’t usually have to change the margins. Remember, though, that the head accounts for 10 percent of the page space, so the height of both the menu and content needs to be 90 percent.
5. Figure the general widths.
In principle, the width of the menu column is 20 percent, and the content column is 80 percent. This isn’t entirely accurate, though.
6. Compensate for margins.
You probably want some margins, or the text looks cramped. If you want 1 percent margin-left and 1 percent margin-right on the menu column, you have to set the menu’s width to 18 percent to compensate for the margins. Likewise, set the content width to 78 percent to compensate for margins.
As if this weren’t complex enough, remember that Internet Explorer 6 (IE6) and earlier browsers calculate margins differently! In these browsers, the margin happens inside the content, so you don’t have to compensate for them (but you have to remember that they make the useable content area smaller). You’ll probably have to make a conditional comment style sheet to handle IE6 if you use absolute positioning.
Exploring Other Types of Positioning
If you use the position attribute, you’re most likely to use absolute. However, here are other positioning techniques that can be handy in certain circumstances:
♦ Relative: Set position: relative when you want to move an element from its default position. For example, if you set position to relative and top: -10px, the element would be placed 10 pixels higher on the screen than normal.
♦ Fixed: Use fixed position when you want an element to stay in the same place, even when the page is scrolled. This is sometimes used to keep a menu on the screen when the contents are longer than the screen width. If you use fixed positioning, be sure you’re not overwriting something already on the screen.
The real trick is to use appropriate combinations of positioning schemes to solve interesting problems.
Creating a fixed menu system
Figure 4-8 illustrates a very common type of Web page — one with a menu on the left and a number of stories or topics in the main area.
Something is interesting about this particular design. The button list on the left refers to specific segments of the page. When you click one of these buttons (say, the Gamma button), the appropriate part of the page is called up, as shown in Figure 4-9.
Normally, when you scroll down the page, things on the top of the page (like the menu) disappear. In this case, the menu stays on the screen, even though the part of the page where it was originally placed is now off the screen.
Gamma isn’t necessarily moved to the top of the page. Linking to an element ensures that it’s visible but doesn’t guarantee where it will