Free CSS Layouts

Friday 26th of August 2016 03:29:00 AM

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

XML is structured

When you create your data using an XML editor (that you can write), you can not only input the content of your data, but also define the structural relationships that exist inside your data. By allowing you to define your own tags and create the proper structural relationships in your information (with a DTD), you can use any XML parser to check the validity and integrity of the data stored in your XML documents. This makes it very easy to validate the structure and content of your information when you use XML. Without XML, you could also provide this validation feature at the expense of developing the code to this yourself. XML is a great time saver because most of the features that are available in XML are used by most programmers when working on most projects.

By using XML and Java, you can quickly create and use information that is properly structured and valid. By using (or creating) DTDs and storing your information in XML documents, you have a cross-platform and language independent data validation mechanism (for free) in all your projects!

You might use XML to define file formats to store information that is generated and used by your applications. This is another use of the structured nature of XML. The only limitation is that binary information can't be embedded in the body of XML documents. For example, if you wrote a word processor in Java, you might choose to save your word processor documents to an XML (actually your ApplicationML) file. If you use a DTD then your word processor would also get input file format validation as a feature for free. There are many other advantages to using XML and a file storage format for your applications which will be illustrated later in the chapter.

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.

the left edge of the containing block. The outer right edge of thepositioned element, however, is not offset from the right edge of thecontaining block, so the two are coincident. Similar reasoning holdstrue for the top and bottom of the positioned element: the outer topedge is placed halfway down the containing block, but the outerbottom edge is not moved up from the bottom. This leads towhat's shown in Figure 9-2.


What's depicted in Figure 9-2, and in most ofelement," but not all browsers seem to agree. This is importantbecause some borders are "intermittent" -- forexample, dotted and dashed styles -- and the element'sbackground should appear in the spaces between the visible portionsof the border.

Every border has three aspects: its width, or thickness; its style,or appearance; and its color. The default value for the width of aborder is medium , which is not explicitly definedbut usually works out to be two or three pixels. Despite this, the 0 (zero). Negative values are permitted, and causethe letters to bunch closer together.


permitted. Using a number defines a scaling factor that is multipliedby the font-size, and the number itself is inherited, not thecomputed value. This allows for much more intelligent page layout,and is strongly preferred over other methods of settingline-height.

The drawback to using a number value is that IE3 will interpret

Figure 1-1

Figure 1-1. A simple document

Now, let's examine each portion of the document.

1.4.1. The LINK Tag

<LINK REL="stylesheet" TYPE="text/css" HREF="sheet1.css" TITLE="Default">

First we consider the use of theLINK tag. The LINK tag is alittle-regarded but nonetheless perfectly valid tag that has beenhanging around the HTML specification for years, just waiting to beput to good use. Its basic purpose is to allow HTML authors to


Yes, that's really all there is to it. One simple url value, and you're putting images in for bullets, as you can see in Figure 7-81.

Figure 7-81

Figure 7-81. Using images as bullets

Of course, you should exercise care in the images you use, as this example makes painfully clear (shown in Figure 7-82):