From GIMP to xHTML and CSS

Now it's time to apply the images, starting with the header image. I have my images in a subfolder called 'assets'.

#header {
background: url(assets/header-bg.png) left top no-repeat;
}

We also need to get rid of the text. It should still be visible for text readers and spiders (e.g. Google), but invisible to our eyes. In order to do that, we apply a very large negative text-indent:

#header {
text-indent:-9999px;
}

Next is the background image (the tiling gradient) for the navigation block. We will place it inside #nav and have it tile horizontally:

#nav {
background: url(assets/menu-bg.png) left top repeat-x;
}

Now let's apply the background image to our navigation buttons, meaning to the list elements:

#nav ul li {
background: url(assets/menubutton-bg.png) left top no-repeat;
}

We also need to change the font size and color for the links and remove the underlines. When we do that, we also need to change our padding values. The rule then becomes:

#nav ul li a {
display: block;
padding: 18px 5px;
text-align: center;
font-size: 1.4em;
text-decoration: none;
color:#333;
}

Let's also set an underline when the user hovers over the links:

#nav ul li a:hover {
text-decoration: underline;
}

Nextr: #f1780f;
line-height: 0.8em;
margin-bottom: 2px;
font-size: 1.8em;
}

#body h3 {
color: #005ca1;
}

#body h2+h3 {
color: #f1780f;
font-size: 1.2em;
font-style: italic;
margin-bottom: 12px;
}

We also need to replace our temporary background to the color we picked for our color scheme:

#centralCol {
background: #ebedf1;
}

We also need to apply the background image to the #footer DIV. Once again, we are going to tile it horizontally. Because we want the image to start from the bottom, we need to apply a background-position of 'left bottom':

#footer {
background: url(assets/footer-bg.png) left bottom repeat-x;
}

Finally, we apply the background image for the body, and let it tile horizontally:

body {
background: url(assets/body-bg.png) left top repeat-x;
} is the body area. All we need to do there is change the colors for the headings, remove the temporary background colors and change a couple of styles, for example set the h3 subheading to italics. So for the headings inside the body area, this becomes:

#body h2 {
color: #f1780f;
line-height: 0.8em;
margin-bottom: 2px;
font-size: 1.8em;
}

#body h3 {
color: #005ca1;
}

#body h2+h3 {
color: #f1780f;
font-size: 1.2em;
font-style: italic;
margin-bottom: 12px;
}

We also need to replace our temporary background to the color we picked for our color scheme:

#centralCol {
background: #ebedf1;
}

We also need to apply the background image to the #footer DIV. Once again, we are going to tile it horizontally. Because we want the image to start from the bottom, we need to apply a background-position of 'left bottom':

#footer {
background: url(assets/footer-bg.png) left bottom repeat-x;
}

Finally, we apply the background image for the body, and let it tile horizontally:

body {
background: url(assets/body-bg.png) left top repeat-x;
}

The full CSS code at this moment is:

/* 1. Reset margins and paddings for all elements. You can use this, or you can use your own CSS reset rules */

* {
margin: 0;
padding: 0;
}

ul {
list-style-type: none;
}

/* 2. Setting a base font size */

body {
font-size: 62.5%;
font-family: tahoma, verdana, sans-serif;
background: url(assets/body-bg.png) left top repeat-x;
}

/* 3. Positioning the central column */

#centralCol {
width: 960px;
margin: 0 auto;
background: #ebedf1;
}

/* 4. Styling the header block */
#header {
height: 140px;
background: url(assets/header-bg.png) left top no-repeat;
text-indent:-9999px;
}

/* 5. Styling the navigation */

#nav {
height: 90px;
background: url(assets/menu-bg.png) left top repeat-x;
margin-bottom: 20px;
}

#nav ul {
list-style-type: none;
padding-top: 15px;
}

#nav ul li {
width: 171px;
height: 58px;
margin-right: 40px;
float:left;
background: url(assets/menubutton-bg.png) left top no-repeat;
}

#nav ul li a {
display: block;
padding: 18px 5px;
text-align: center;
font-size: 1.4em;
text-decoration: none;
color:#333;
}#footer p {
text-align: center;
position: absolute;
left: 50%;
top: 50%;
}

#nav ul li a:hover {
text-decoration: underline;
}

#centralCol {
font-size: 1.4em;
line-height: 1.6em; /* set the base line height inside the central Col */
}

#header, #nav, #body { padding: 0 30px; /* Padding to line up everything vertically */ }

/* 6. Styling the #body block */

#body p {
margin-bottom: 12px;
}

#body h2 {
color: #f1780f;
line-height: 0.8em;
margin-bottom: 2px;
font-size: 1.8em;
}

#body h3 {
color: #005ca1;
}

#body h2+h3 {
color: #f1780f;
font-size: 1.2em;
font-style: italic;
margin-bottom: 12px;
}

    #twoCols {
    float: left;
    margin-bottom: 40px;

    }

    #leftCol {
    float: left;
    width: 420px;
    padding-right: 30px;
    }

    #rightCol {
    float: right;
    width: 420px;
    padding-left: 30px;
    }

#footer {
position:relative;
clear:both;
height: 80px;
background: url(assets/footer-bg.png) left bottom repeat-x;
}

#footer p {
text-align: center;
position: absolute;
left: 50%;
top: 50%;
}

Now, the next step to take, is to add the red-to-black bars on either side of the central column. In our image -and also in our webpage- our content area was 960px wide, and the bars themselves were 20px wide. We need to put these in the padding. This means we need to add a left and right padding of 20px for #centralCol. Then we add the image as a background-image and let it tile vertically. We also set #ebedf1 (light gray) as a background color:

#centralCol {
padding: 0 20px;
background: #ebedf1 url(assets/centralcol-bg-faux.png) left top repeat-y;
}

That will put the borders into place.