Wednesday 10th of March 2010 07:04:43 PM

left

#left {

I've left out a background color in order to keep the ruleshort, but remember to include a background color any time you have abackground image. And, of course, the effect shown in Figure 6-28 would have been the same if we'd leftout the background-repeat property altogether,since repeat is its default value.
Let's assume, though, that we just want images down the leftside of the document. Instead of having to create a special imagewith a whole lot of blank space to the right of the image, we caninstead make a small change to our styles:
position: absolute;
left: 2%;
width: 19%;
top: 106px;
background-color: #ffffff;
}

Warning

These pages use certain CSS definitions that are unsupported by older browsers.
more nice and free css templates


css


middleleft

#middleleft {
position: absolute;
left: 22%;
width: 28%;
top: 106px;
background-color: #ffffff;
}

Calculations in your head

This example requires some calculations. The sum of the widths yields 98%. The distance from the border of body to the first box plus its width plu the distance yields the left position of the next box.

If you want boxes of different width you need to adjust these values accordingly.

Use of this code is encouraged!

Try it with 2 or 3 columns



middleright

#middleright {
position: absolute;
left: 51%;
width: 28%;
top: 106px;
background-color: #ffffff;
}

box border

Borders, pading and margin are defined in

#right,#middleright,#middleleft,#left{
border: 1px solid #564b47;
padding:0px;
margin:0px;
}

Font definitions

Padding are passed to p, h1 and h3.

p,h1, h3, pre {
padding: 5px 15px;
margin: 0px;
}


containing 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.

TIP

What's depicted in Figure 9-2, and in most ofthe examples in this chapter, will only work if the containing blockwas established by an element with an explicitly defined height. This Sometimes,the values you're entering for margin get alittle repetitive:

P {margin: 0.25em 1em 0.25em 1em;}

You don't have to keep typing in pairs of numbers like this,though. Instead of the preceding markup, try this:

P {margin: 0.25em 1em;}
Figure 7-13

Figure 7-13. Value replication pattern

there is no apparent difference between the EM andI elements. In practice, not every font is sosophisticated as to have both an italic face and an oblique face, andeven fewer web browsers are sophisticated enough to tell thedifference when both faces do exist.

Figure 5-26

Figure 5-26. More font styles

If either of these is the case, a few things can happen. If there isno Italic face, but there is an Oblique face, then the latter can beused for the former. If the situation is reversed -- an Italic

The second problem is a little more fundamental: there are nostandard color values for these names. Declaring that an elementshould be colored orange doesn't mean thatdifferent browsers, or even the same browser running on differentplatforms, will produce exactly the same shade of orange. With thesixteen standard colors, there is at least some hope that they willappear as similar as possible, because the color values for thesesixteen are defined. Beyond those, all bets are off. Browsers mayimplement similar shades for the same color name, or they may not;the differences may be imperceptible to the eye, or so obvious that "bullet," it's the little decoration to the side ofa list item, as depicted in Figure 7-79.

Figure 7-79

Figure 7-79. Bullets

In an unordered list, these will be little symbols, but in an orderedlist, the bullet could be a letter or number.

7.7.1. Types of Lists

This part will probably seem very familiar