Monday 06th of October 2008 02:53:37 PM

left

#left {
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;
element's background is visible. For example, look at Figure 7-5, which shows the difference between two
paragraphs without any margins, and the same two paragraphs with some
margins.



Figure 7-5
Figure 7-5. Paragraphs with, and without, margins


The simplest way to set a margin is by using the property
margin.



Suppose we
wish to set a quarter-inch margin on H1 elements,
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;
}


surprise that the simplest property used to affect this area is called padding.

padding

Values

[ <length> | <percentage> ]{1,4}

explain what's going on here. Since the border doesn't exist, it can't have any width, so the width is automatically set to 0 (zero). This may seem completely backward, but it actually makes a great deal of sense. After all, if a drinking glass is empty, you can't really describe it as being half-full of nothing. You can only discuss the depth of a glass's contents if it has actual contents. In the same way, talking about the width of a border only makes sense in the context of borders that have some existence.

This rule will tell the browser that it should do asbrowsers have always done, and discardextra whitespace. Any extra spaces and carriage returns arecompletely ignored by the browser.

Should you set white-space topre, however, the whitespace in affected elementswill be treated as though the elements were PREelements, in that whitespace would not be ignored, as shown in Figure 4-20:

<P>This paragraph's 'font-size' is 18pt, and the 'line-height' for this paragraph is 27pt. A <BIG>larger element</BIG> within the paragraph does not cause the line's height to change, but setting its 'line-height' does, which leads to some interesting effects.</P>
Figure 4-28

Figure 4-28. Changing the line-height of an inline element

Setting a line-height of 1em for the BIG element will actually cause its line-height to be the same size as the BIG text itself. This has the same effect the images did: it opens up the entire line of text enough to clearly