Free CSS Layouts

Thursday 08th of December 2016 08:59:44 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.

With all of this shorthand stuff, you're probably starting to suspect that it goes even further, and you're right. We finally come to the shortest shorthand border property of all: border.

This property has the advantage of being very compact, although that brevity introduces a few limitations. Before we worry about that, let's see how border is used. If you want all H1 elements to have a thick, silver border, it's very simple. This declaration would be displayed as shown

Finally, the default border color is the foreground color of the element itself. If no color has been declared for the border, then it will be the same color as the text of the element. If, on the other hand, an element has no text -- let's say a table which contains only images -- then thanks to the fact that color is inherited, the border color for that table would be the text color of its parent element. This is likely to be BODY, DIV, or another TABLE. Thus, if an image has a border, and the BODY is its parent,


<color> | transparent

The background is the area of the content box and the padding and isalways behind the foreground of the element. Therefore, the declaredbackground color is applied to both the element's content boxand its padding, as illustrated in Figure 6-14:

P {background-color: gray;}

Despite all the blank space, the effective value ofline-height has not changed. It simply has noeffect on the image's inline box, which is in this case30px tall.

Nonetheless, an inline replaced element still has a value forline-height. Why? In order to be able to correctlyposition the element if it's been vertically aligned. Recallthat, percentage values for vertical-align arecalculated with respect to an element's line height. Thus:

7.4.6. Borders: Known Issues

Of course, there are a few problems with using borders. The most distressing is the fact that Navigator 4.x won't draw a border around the content area of a block-level element but instead inserts some space between the content and the border. There doesn't seem to be any way to override this behavior.

Despite its limitations, border is obviously a very useful property. It can even be used to work around what seems like a completely unrelated bug in Netscape Navigator 4.x. If you surprising to learn that this is the part of CSS2 that user agentsusually first attempt to support. Given that there were some verygood positioning implementations on the horizon as the book was beingcompleted, we felt it worthwhile to give readers a glimpse ofwhat's coming soon -- or, if you're reading this booka year or three after its publication, what can be done.

You may notice that, unlike other chapters, almost none of thefigures in this chapter was generated with a web browser. This issomething of a statement about the reliability and consistency of