Wednesday 08th of February 2012 12:08:08 AM

CSS Page Layout Templates

3 Column Templates

The following templates are all three column templates.

The 'box hack' has been removed from the templates in the last round of changes which means the 'pixel-perfect' templates are not 'pixel-perfect' in IE5xPC. Future versions may include the box-hack again.

Templates: Two column | Three column | General reason to do so. The following two rules mean exactly the same thing:

*.apple {color: red;}
.apple {color: red;}

However, you should consider this: if you're concerned about older user agents that don't know about CSS2, then *.class (or *#id) is an easy way to fool them. Since both of these are examples of invalid selectors in CSS1, they should be ignored by CSS1-only parsers. If they aren't ignored, then they're likely to cause strange

Three Column, Left & Right Columns Static

Browsers:

'

'

'

'

⁽⁵⁺⁾

Description: This is much the same as 'Two Col Left Col Static' but now with the addition of a right hand column which is absolutely positioned.

Actions: View | Image Preview | Download [ 6k] [ZIP]

Three Column 'Pixel-Perfect'

Browsers:

'

'

'

'

⁽⁶⁾

Description: Sometimes this is called the "Holy Grail". It's a three column template which fits together "pixel perfect".

Actions: View | Image Preview | Download [ 6k] [ZIP]

Three Column 'Pixel-Perfect' with Header

Browsers:

'

'

'

'

⁽⁶⁾

Description: The same as the "Holy Grail" above but with a header div. Also expands to fit the whole screen.

Actions: View | Image Preview | Download [ 3k] [ZIP]

Three Column Pixel-Perfect with Header & Footer

Browsers:

'

'

'

'

⁽⁵⁺⁾

Description: My most complete template. It has three columns, a header and footer and will resize with the browser window.

Actions: View | Image Preview | Download [ 6k] [ZIP]

Templates: Two column | Three column | General

Note: The poor colour schemes and thick borders of the templates are for demonstration purposes. :-)

changes made to the structure of each letter to account for thealtered appearance. This is especially true of serif fonts, where inaddition to the fact that the text characters "lean," theserifs may be altered in an italic face. Oblique text, on the otherhand, is simply a slanted version of the normal, upright text. Fontfaces with labels like Italic, Cursive,and Kursivare usually mapped to the italic keyword, whilebox is taller than the other line boxes. However, notice how the "tall" text is aligned in Figure 8-54.

Figure 8-54. Top-aligning text

What's happened here is that the top of the "tall" text's inline box is aligned with the top of the line box. Since the "tall" text has equal values for font-size and line-height, its content height and inline box are the same thing. However, consider this:

These properties operate as you'd expect by now. For example, the following two rules will give the same amount of padding:

H1 {padding: 0 0 0 0.25in;}
H2 {padding-left: 0.25in;}

7.5.3. Padding and Inline Elements

be the same as #66FFAA, and #FFF would come out #FFFFFF, which is the same as white. This approach is sometimes called shorthand hex notation.

One thing to watch out for is that with the hexadecimal methods, unlike the numeric methods, there are no defined clipping methods for the hex-pair systems. If you enter an invalid value, the browser's response could be unpredictable. A well-written allows for frame-style layouts, for example. In paged media such as printouts, a fixed element will appear in the same place on every page. This potentially can be used to create running heads or footers.

The value is inherited from the parent element. See Chapter 10, "CSS2: A Look Ahead", for more details.