Wednesday 22nd of February 2017 01:52:51 PM


#left {
position: absolute;
left: 0px;
width: 190px;
color: #564b47;
margin: 0px;
padding: 0px;
padding: 0px;

This column inherited it's background color from the body definition. Padding is defined through p.


3 columns / menu fixed, content and head dynamic.
3 columns layout grid. The navigation columns are fixed in their widths, the content column is dynamic and adjusts itself to the browser window.
The head box is dynamic in its height. It adjusts to the height of the logo.
more nice and free css templates

html {
body {
background-color: #e1ddd9;
font-size: 12px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
#content {
margin: 0px 190px 0px 190px;
border-left: 2px solid #564b47;
border-right: 2px solid #564b47;
padding: 0px;
background-color: #ffffff;
way to the top of its parent element. Thus, if aDIV 's first child element is a paragraph,followed by a floated image and then another paragraph, the top ofthe floated image can't be any higher than the top of theparagraph that precedes it. It is also impossible for a floatedelement's top to be any higher than the top of a floatedelement that occurs earlier. Figure 8-34 is anexample of this.

Figure 8-34

Figure 8-34. Keeping floats below their predecessors

This will keep the links yellow no matter what, just as they are now.Figure 11-3 shows us the new, improved,FONT-tag-free sidebar which results from thepreceding styles, and this markup:

Figure 11-3

Figure 11-3. The well-styled sidebar

That was pretty easy, eh? Now let's tackle the navigation barat the top of the main part of the page. This area also has a greenbackground, and within it are a few images. Again, we use a doesn't actually use that color, it's still passed on tothe border. We'll talk about another way to change bordercolors in a later section.

The result, shown in Figure 7-33, is a paragraphwith a solid top border, a dashed right border, a dotted bottomborder, and a solid left border.

Figure 7-33

Figure 7-33. Multiple border styles on a single element

Again we see the top-right-bottom-left order of values. This is just set a single background image so that it's hanging off thepage, you're probably better off producing an image that isalready cut off and just putting it in the top left corner.

Throughout this section, every example has had a repeat value ofno-repeat. The reason for this is simple: withonly a single background image, it's much easier to see howpositioning affects the placement of the first background image. Wedon't have to prevent the background image from repeating,

7.5.1. Percentage Values and Padding

As stated earlier, it's possible toset percentage values for the padding of an element. Percentages arecomputed in relation to the width of the parent element, so they canchange if the parent element's width changes in some way. Forexample, assume the following, which is illustrated in Figure 7-59:

P {padding: 10%; background-color: silver;}