Intermediate CSS

If you have spent any time cruising around CSS dedicated sites such as the Zen Garden or CSS Beauty, then you have realized that there's a lot more to CSS than what we have touched on so far. Today we take the next major step: incorporating images into our design. In fact, today we will compose the majority of our design entirely through images!

I have provided two sets of images for today's tutorial. You should create a folder on your desktop called "css_images" and save the following images in the folder (click on the link to open the image, right click on the image and choose "save image as"):

master, header, navigation, body, container, footer

These images were constructed with Adobe Fireworks and saved as .gif (Graphic Interface Format). My goal was to keep image quality relatively high, file size extremely low, and to guarantee that our images would display in every browser (the optimal image format is .png, but IE has particular difficulty rendering these images--I have included a few links on image file types in the tutorial). Thus, even people using dial-up connections wouldn't have long load times when visiting our site. I have also included a tutorial for how to generate and slice your own image in Fireworks.

Here's the first sample we will be creating today. Even if you don't like my layout, by the end of today's session you should know how to create and insert your own backgrounds.

Backing-Up our CSS file

This is an unnecessary step--but those of you who want to save the CSS file we created in a previous session should follow the steps below. For those of you just joining us, you can find the CSS file here (and much of the tutorial discusses making changes to this file, so you probably want to work from it). First, we'll want to create a new CSS file, remove the old CSS file from our XHTML document, and then attach the new file. Here's how I'm going to do this:

  1. First, I am going to find the original CSS file in "My Computer" or "Finder" (depending on whether you are a Mac or PC person). I am going to make a copy of that file and rename it imagedesign1.css. Now find your original resume or vita XHTML file. Make a copy of that file and rename it resume_image1.html. Now we can alter these files without changing the originals.
  2. Next, I am going to make some alterations to our newly created XHTML file, though for our first design these will be minimal. In the head I am going to change the CSS link. Right now it targets resume_style1.css. I am going to delete that file and target "imagedesign1.css" instead. So now this line appears in my header:

    <link href="imagedesign1.css" rel="stylesheet" type="text/css" media="screen" />

  3. Next I am going to include a "class" in our XHTML. I will forestall a longer discussion of classes (and their close relative, "spans") until our next XHTML session, but we'll need to insert one to make this redesign display properly. In the header of your body, find the <h1> tag. As stated we want to give this heading a class, so type:

    <h1 class="noshow">Marc C. Santos</h1>

    In a second we will give this class the property "display:none" in our CSS. Using this method, the information would still be read by a screen reader and search engines, but not displayed by a web browser. This is necessary because the image we will be using display's our name graphically (well, mine... but you can include yours quite easily...and the final step of today's tutorial is to change the header .png), this text would "overlap" and interrupt our page if we didnt't alter its presentation.
  4. First, however, there is one more thing we need to do. You'll notice that I have deleted the title of the page from the header (it used to read "Marc C. Santos / Curriculum Vitae"). So, we are going to add this code to the very top of our content division. Hopefully you can handle this by yourself, but here's a reminder:

    <div id="content"> <h1>Curriculum Vitae</h1>

    Now we can save our XHTML file and begin working with our CSS file.

Inserting Background Images

If you look at the folders, you'll find four images called design1--the first thing we are going to do is add these images to the proper divisions.

  1. Make sure all of the images are saved in the folder "css_images," and make sure that "css_images" is saved the same folder as your XHTML and CSS file.
  2. For each of the images, use the background-image:property and use the proper image. We have:
    • div#container
    • div#header
    • div#navigation
    • div#footer
    We haven't created any CSS code for the footer division yet--but by now you should know how to do this. I would code your footer section after div#content (and all related content selectors) and before any single element (which in my CSS is the h tags).
  3. If you are feeling brave, save and refresh. Yuck... as you can imagine, we have our work cut out for us.

Reset our margins and padding for absolute positioning

In our last style sheet we used percentile widths (remember, to center our design in the body). This time, we are going to use absolute positioning that will always maintain a 100 pixel left margin. We need to use this kind of layout because our background images have precise places for our text--we need to make sure our text appears in these (and only these) place. This means we have to change some of our existing code.

body
Change the background-color to #000066; (it is currently #000033;). Our new design transitions from a lighter to darker shade. We are setting the body background to display the lighter shade so that when the 880px wide background image ends, the screen will seamlessly transition into the lighter color. In other words, you will not be able to see when the background image ends. For an example of this, temporarily change the background color to white (#FFFFFF)... see?
Add the following code:

margin:0px;
padding:0px;

Many browsers include 10px of margin and or padding by default... we want to make sure there's no "hidden" values messing with our carefully measured design.
div#container
add this code: background-repeat:repeat-y;
change the width from 80% to 880px (the width of our images)
delete the min-width and max-width properties
delete all margin code and replace it with margin:0px;
change padding to 0px
delete all border properties
div#header
delete the border-bottom code
add the following:

background-repeat:no-repeat; height:145px;
margin:0px;
padding:0px;

div#navigation
add the following code:

background-repeat:no-repeat;
margin:0px;
padding:0px;
padding-left:125px;
height:45px;
width:1000px;

delete all border information
div#navigation ul li
padding:0px;
padding-right:4px;
margin-right:4px;
background-color:#666666;
border:1px #999999 solid;
div#navigation ul li a, a:visited
remove all padding information
div#content
change the margin-right property to zero
add the following code:

margin-top:-20px; padding:0px; padding-left:190px; width:600px;

div#footer
add the following code:

background-repeat:no-repeat; height:130px; color:#666666;

div#footer > p {
add the following code:

font-size:12px; padding-left:140px; padding-top:25px;

you will also need to put in code for the four anchor states (a, a:visited, a:hover, and a:active). Try these by yourself, if you get stuck I have provided an answer.
h1, h2, h3
add the following code:

margin-left:-20px; font-variant:small-caps;

h2, h3,
add the following code:

color:#666666; margin-left:0px;

h3
change the color back to #000033;
h1.show
add the code: display:none;
p.headerp
add the code:

float:right;
width:250px;
font-size:12px;
margin-top:33px;
margin-right:55px;
font-size-adjust:none;
line-height:14px;
}

If you save and refresh, it won't look like we have made much progress--but we're getting there! Up next, we are going to use that class we added to our xhtml code. At the very bottom of your CSS, add:

h1.noshow {
display:none;
}
p.headerp {
float:right;
width:270px;
font-size:12px;
margin-top:40px;
margin-right:60px;
font-size-adjust:none;
}

This should have made some major changes! Just to check, my final code looks like this:

/* CSS Document */
body {
background-color:#000066;
font-family:"Gill Sans MT", "Gill Sans", Arial, sans-serif;
font-size:14px;
word-spacing:3px;
margin:0px;
padding:0px;
}

div#container {
background-image:url(css_images/desgin1contain.png);
background-repeat:repeat-y;
width:880px;
margin:0px;
padding:0px;
}

div#header {
background-image:url(css_images/desgin1header.png);
background-repeat:no-repeat;
height:145px;
margin:0px;
padding:0px;
}

div#navigation {
background-image:url(css_images/desgin1nav.png);
margin-top:-23px;
padding:0px;
padding-left:125px;
height:45px;
background-repeat:no-repeat;
width:1000px;
}

div#navigation ul li {
display:inline;
padding:0px;
background-color:#666666;
padding:2px;
padding-right:4px;
margin-right:4px;
border:1px #999999 solid;
}

div#navigation ul li a, a:visited {
color:#000033;
text-decoration:none;
}

div#navigation ul li a:hover, a:active {
color:#D2D6E2;
}

div#content {
margin-top:-20px;
padding:0px;
margin-right:0px;
padding-left:190px;
width:600px;
}

div#content a, a:visited {
color:#666666;
text-decoration:none;
padding:0px;
margin:0px;
}

div#content a:hover, a:active {
text-decoration:underline;
}

div#footer {
height:130px;
background-image:url(css_images/desgin1footer.png);
color:#666666;
}

div#footer p {
padding-left:140px;
padding-top:25px;
font-size:12px;
}

div#footer a, a:visited {
color:#666666;
text-decoration:none;
}

div#footer a:hover, a:active {
color:#D2D6E2;
}

h1, h2, h3 {
color:#000033;
font-family:"Bell MT", "Abadi MT Condensed", GillSans, Arial, serif;
letter-spacing:1.5px;
margin-left:-20px;
font-variant:small-caps;
}

h2, h3 {
color:#666666;
margin-left:0px;
}

ul {
list-style-type:none;
}

li {
margin-top:4px;
}

ul ul {
list-style-type:circle;
}

ul li ul {
margin-top:8px;
}

ul li ul li {
margin-top:0px;
}

ul ul ul {
list-style-type:square;
}

p {
margin-left:40px;
}

.vita_pubpres {
list-style-type:circle;
margin-left:40px;
}

ul.vita_pubpres li {
padding-top:5px;
margin-bottom:5px;
}

h1.noshow {
display:none;
}

p.headerp {
float:right;
width:250px;
font-size:12px;
margin-top:33px;
margin-right:55px;
font-size-adjust:none;
line-height:14px;
}

The final step for today is to change the header.png file (assuming you have an image-editing program such as Adobe Photoshop or Fireworks, or the free open source editor GIMP). The appendix includes an extended tutorial on how to create a background in Fireworks--but changing the text is fairly easy. When you open the file in either program, you shoud see a "layers" area on the right side of the screen. One of these layers will be a text box. Double-click on the text appearing in the image and you should get your standard flashing cursor (you'll know you are in the right layer because the text-box will be highlighted in the layer area). Make your changes and save (overwrite the existing file). Poof!

Final Thoughts

Well, there's no direct homework for next session, but I would strongly recommend creating your own page design. To repeat for the 50th time, I have created a Fireworks tutorial for first-time users. If you are already familiar with image-editing, then you should see how this works: either keep your images the same size as those used in the tutorial or change the div sizes in the CSS.

The next session will focus on some advanced XHTML coding, especially on images (so you might want to have an image based project in mind for that session). We will also work on definition lists and talk more about spans and classes.