Page 1 of 4 Merry Christmas and a Happy New Year to all!
To celebrate the holidays we are giving away the North Pole JumpStart. As is usual with all the CMX JumpStarts, this design uses CSS positioning techniques and meets the accessibility specifications of 508 and WAI. The xhtml and CSS also meet the standards laid down by the W3C, ensuring your pages pass all the necessary checks that will allow you start customising the North Pole JumpStart from a solid base.
The North Pole JumpStart is a two column, fixed-width design that uses clever deployment of background images in both the navigational elements and the content areas of the design. The graphics used in North Pole are both simple and complex. They range from the beautifully created snowman made in Freehand and converted to Fireworks format by Kim Dudley, to the simple black line art provided by Kim Cavanaugh that I was able to - ahem, cough, cough - "professionally colour in" to make some simple yet effective images that enhanced the Christmas theme with only a few minutes work. Now that's what I call working with graphics! Thanks Kim and Kim ;).
The North Pole JumpStart (click to see a full size image)
North Pole is an effective yet simple design that was built using the following techniques that are available in the download of the North Pole JumpStart.
The site layout was created using the following tutorials, all of which are included in the North Pole download:
In the first tutorial, John and Holly teach you how to work with that very important element, the wrapper div. A wrapper is an often used technique that gives your design a containing element from which you can control your layout.
The left column in the North Pole JumpStart is created using a float. In the second tutorial, John and Holly provide you with a good grounding in the theory of floating elements. Understanding floats is an important part of working with positional CSS layouts.
You can learn the basics of working with background images in the third tutorial by Adrian Senior, where we investigate the positional property and values of placing a background image.
Let's make those li elements look like buttons! In the fourth tutorial, Stephanie Sullivan shows you how to do just this to great effect.
If you are going to be working with CSS positioning then you will need to understand the basics of positioning your elements on the page. The fifth tutorial by Adrian Senior will give you a nice gentle introduction into how the property and value settings for absolute, relative and static positioning can be used within your design.
Finally, make sure you read Zoe Gillenwater's excellent tutorial on Semantic (X)HTML Markup: Styling Lists. It has everything you need to know to set up your lists. All the various browser interpretations that have to be taken into consideration are unearthed in this excellent and comprehensive tutorial. Read it and read it again as it has plenty of great information to demystify lists.
All the techniques used to create the graphics with the North Pole JumpStart can be found in the excellent tutorials provided below by CMX partners Kim Cavanaugh and Kim Dudley:
In the first, Kim Dudley shows you how to come to grips with Freehand, a much underused application that can provide some stunning results. If you don't have Freehand don't worry. The snowman that is used in the North Pole JumpStart is available in the download as a .png file for you to work on in Fireworks.
The second, Kim Cavanaugh's Christmas black line pack, is also included within the download. The pack contains many, many samples of Christmas black line art. You can colour these within Fireworks and apply a myriad of effects to gain the look you want for your design, great fun!
What I will do now is show you the methods I have used to set the main background images. The "Happy Holidays" banner at the top of the page is very straightforward. It is simply a single graphic, set as a background image in the banner div, with banner div given a height to ensure that the background image is always visible.
The background images that are above and below the navigation are not so straightforward. They require a little preparation work, as indeed does the background image that consists of the presents and the sleigh. I'll start with the background images that I have set above and below the navigation. While these techniques do not require anything but simple CSS property/value pairs to make them work, they still need to be added to the style sheet.
The construction of the navigation block for this JumpStart is list based and the methods used in its creation are covered within the tutorials you'll download with North Pole.
The code below is our CSS for the #leftcol selector. The image above the navigation block is a background image set at the top of the leftcol div.
#leftcol {
float: left;
width: 169px;
margin-bottom: 100px;
margin-left: 7px;
margin-top: 25px;
background-image: url(../images/box_bg.jpg);
background-repeat: no-repeat;
padding-top: 35px;
}
Code Block 1: Background properties and padding
The properties and values we are interested in here are highlighted in blue in Code Block 1. The background-image property is where we supply the url path to the image, and the background-repeat property is where we dictate whether the image is allowed to repeat. In this case, we will not be allowing it to repeat. We also want our background image to show in the top left corner of the leftcol div. Since this position, {background-position: top left;} is the default rendering we have no need to declare the background-position property and value and so have left them out.
The padding-top property has a value of 35px. This moves the navigation div down 35px from the top of the leftcol div thereby revealing the area of the leftcol div that our box_bg image will occupy. If we didn't declare this padding on the top of the leftcol div then the navigation div would sit tight to the top of the leftcol div, obscuring the background image.
Preview the North Pole JumpStart in your browser and then open the northpole.css file and change the value of the padding-top property to 0 (zero) then preview your page again. The result will look like Image 1.
Image 1: Using {padding-top: 0;} hides
the background image.
Make sure you put the value back to 35px so the background image can be seen.
At the bottom of the navigation list we have a second background image and the CSS for this can be seen below.
#leftcol #navigation {
line-height: 100%;
width: 169px;
background-image: url(../images/icicles.gif);
background-repeat: no-repeat;
background-position: bottom;
padding-bottom: 100px;
}
Code Block 2: Setting the background image on the navigation div
Once again I have highlighted the section of the ruleset that we are interested in. We have already discussed the background-image and the background-repeat properties and we can now introduce the background-position property. We want this background image to be placed at the bottom of the navigation div and we can do this by using bottom as the value for our background-position property.
In the previous example we used padding-top to move the navigation div down within leftcol to allow our background image be visible. What we are doing here uses exactly the same principle except we are applying the padding to the bottom of the navigation div; to do that we need to use the padding-bottom property. The value should be great enough to clear the height of the image.
Keywords
JumpStart, CSS, positioning, background, images, float, North Pole
