Free CSS Layouts

Thursday 22nd of March 2018 10:11:14 PM

Free CSS Layouts

Please feel free to borrow, steal, abduct, and/or torture the documents contained here. Enjoy.

Two Column Layouts

2 columns - left menu

A simple two column layout with the standard left-side menu.

2 columns - right menu

Practically the same HTML as 2 columns - left menu, but with a different stylesheet.

Three Column Layouts

3 columns - flanking menus

Three columns, no tables, intelligent order of elements. What more is there to say?

Many a talented web designer has struggled with CSS-based centering. Though CSS vertical centering eludes us, two techniques for horizontal centering are approved. Take your pick: Auto-width Margins or Negative Margin.

are typically preceded by a marker, such as a small dot or a number. This marker isn't actually part of the list-item's content area, so you get effects like those illustrated in Figure 8-25.

In CSS1, very little is said about the placement and effects of this marker with regard to the layout of a document. CSS2 introduces properties specifically designed to address this issue, such asworks fairly well. It's less elegant, granted, but it does work. We use a width of 0.75em because most letters are not as wide as they are tall, but of course you may use other values; experiment to see what you like best.

11.2.10. Disappearing Styles

more useful for people who use programs such as Photoshop, whichproduce such color values, or for those who are familiar enough withthe technical details of color generation to already think in termsof 0-255 values.

Then again, such people are probably more familiar with thinking inhexadecimal notation, which is what we turn to next.

the way line boxes are generated, as Figure 8-59illustrates.

Figure 8-59

Figure 8-59. Large inline boxes can overlap many other lines

One can assign margins to nonreplaced inline elements as well, butthese effectively do not apply to the top and bottom of a nonreplacedinline element, and so don't affect the height of the line box.The ends of the element are another story, as we saw in Chapter 7, "Boxes and Borders". Once again, this is because an inline elementthat is displayed on multiple lines is just the same as a single-lineelement that has been broken into pieces. Consult Figure 8-60 for a more detailed look at this situation