Free CSS Layouts

Tuesday 28th of February 2017 01:08:10 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. inconsistencies in browsers. First, however, let's talk about how it should work in theory.

Figure 4-57. Various kinds of text decoration

WARNING

It's impossible to show the effect of blink in print, of course, but it's easy enough to imagine. User agents are not required to support blink, incidentally, and only Navigator 4.x actually supports it as of this

more than simple tiling of background images. We'll start with the basics and then work our way up.

The default value of none means about what you'd expect: no image is placed in the background. If you want a background image, then you need only give this property a URL value:

BODY {background-image: url(bg23.gif);}

Due to the default values of other

Comments can span multiple lines, just as in C++:

/* This is a CSS1 comment, and it
can be several lines long without
any problem whatsoever. */

It's important to remember that CSS comments cannot be nested. So, for example, this would not be correct:

/* This is a comment, in which we find
another comment, which is WRONG
/* Another comment */
can probably guess that they set H1 elements to bemaroon and BODY elements to have a yellowbackground.

Styles such as these comprise the bulk of any embedded stylesheet -- style rules both simple and complex, short and long. Itwill be only rarely that you have a document where theSTYLE element does not contain any rules.

technique to work. Whether you use that specific property, or simply a value of the border property, doesn't really matter.

Of course, by doing this, you're setting a border on the element, and that border will show up in other user agents as well. And, just to top things off, Navigator doesn't handle padding very well, so the previous example would result in a small amount of blank space between the content box and the borders. Altogether, it isn't a very pretty picture. changes size. Figure 6-56 depicts several views of the same document. So in a certain sense the image isn't fixed in place, but it will remain fixed so long as the viewing area isn't resized.

Figure 6-56

Figure 6-56. Centering still holds, even if the image is "fixed"

There is only one other value for background-attachment, and that's the default value scroll. As you'd expect, this causes the background to scroll along with the rest of the document