CSS

The CMX JumpStart Catalog Update 2009 Free!
by Sheri German - 10-Nov-09
Reader Level:

Our last JumpStart Catalog was published in 2008, and of course we've released quite a few new JumpStarts since then. It's almost 2010(!), so it's definitely time to update and put all our JumpStarts more conveniently at your fingertips.

Hard as it is to believe, it is five years - almost to the day - since we published our first JumpStart, CMX JumpStart Paris, on Oct. 28, 2004. Long live the CMX JumpStart!

This catalog will start out by breaking down the JumpStarts into categories such as fixed-width, fluid, horizontal band, and number of columns. It will then list the special features that can be found in various JumpStarts, such as galleries, widgets, typography enhancements such as sIFR, Flash MP3 players, forms, and many more. Finally, we'll get to the actual catalog of every JumpStart we've published over the last five years. There will be a picture, a list of features, and links to the JumpStart itself, as well as the free article that describes it.

Introducing CMX JumpStart Black Forest Free!
by Sheri German - 30-Oct-09
Reader Level:

Known for its highlands, scenery, and forests, the Black Forest in Germany is a popular center of tourism. When someone mentions Black Forest to me, however, I always think of the wonderful cake or waltzing by the beautiful Blue Danube. Now I am going to us all something else to think about, too, and that's the latest CMX JumpStart Black Forest.

CMX JumpStart Black Forest is a centered, two-column, fixed layout in the new wider width that many designers are now using. The tabbed navigation uses the popular Sliding Door technique. The header features a logo with the text placed on a circular path, and will make it easy to design an attractive logo for your site. The main content resides in the left column, and a Digg content sharing menu occupies the right column.

The JumpStart includes a main style sheet, an Internet Explorer style sheet, and a Design Time Style Sheet (in case your version of Dreamweaver makes the layout difficult to edit in Design View).

Of course Black Forest meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements, too.

CMX JumpStart: The Black Forest
by Adrian Senior - 30-Oct-09
Reader Level:

Welcome to The Black Forest JumpStart!

The Black Forest is a wooded mountain range in Baden-Württemberg, in southwestern Germany. It is a region that has vineyards, river valleys, sunny peaks, wide panoramic views, calm forests, revitalising spas, exciting family destinations and a cuisine that is the most elaborate in Germany.

The Black Forest JumpStart uses the Digg This! widget to provide current and up to date information for your users, ensuring your website is always current and informative.

Cross Browser Image Opacity Transitions
by Adrian Senior - 21-Oct-09
Reader Level:

Adding opacity to your images becomes a realistic possibility with CSS 3, but there is reasonable support out there now for image opacity, though not to the extent that CSS 3 should bring.

In this tutorial we will look at how we can use opacity in a meaningful way on images within your page and look at some of the pitfalls you might expect to come across.

The CSS Starter Page Series Part 12: Adding a JQuery Slideshow
by Sheri German - 15-Oct-09
Reader Level:

The new semester is under way, and my students are using this CSS Starter Page series to design their portfolio sites. As we go along, we'll be exploring various nifty ways to add the portfolios of their graphic design work. In this installment of the CSS Starter Page series, we're going to use a jQuery script to create an attractive slideshow of images with descriptive text. We'll accomplish this objective in stages. First we'll insert the slides into the HTML code so that even older browsers have access to the content. Our next step will be to style the slides with CSS, a "progressive enhancement" that will benefit most users. Finally, we'll add the pre-written jQuery script to add a little wow factor to the slideshow.

Clearing Floats Without Touching Your HTML
by Estelle Weyl - 30-Sep-09
Reader Level:

Yes, it is possible to clear floats without adding <br class="clearfloat" /> into your HTML. In this tutorial, we cover the old fashioned clearfloat element, and three not-so-new but not-oft used unobtrusive CSS methods of clearing floats.

Introducing CMX JumpStart Berlin Free!
by Sheri German - 23-Sep-09
Reader Level:

CMX JumpStart Berlin is a centered, two-column or three-column, liquid/fixed layout. The two tier navigation uses the popular Sliding Door technique for its main navigation. The left column navigation is constructed from an unordered list, and it is easy to add as many links as you need. The header features a third menu, a PhatFusion Image Menu, that lets you add your own categories and images. This feature is especially handy for photographers who would like to feature their work.

The JumpStart filters styles for various versions of Internet Explorer, and includes separate style sheets to address issues found in IE 6 and below versus IE 7. There is also a Design Time Style Sheet in case your version of Dreamweaver makes the layout difficult to edit in Design View. Of course Berlin meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements, too.

CMX JumpStart: Berlin
by Adrian Senior - 23-Sep-09
Reader Level:

Berlin is, of course, renowned as a city of great culture and diversity, and the Berlin JumpStart mirrors those traits. Berlin provides a powerful and flexible interface on which you could base just about any design you could imagine. From the inverted sliding door navigation and the accompanying sub navigation system, and the srolling image menu Berlin is equipped to cope with the largest of websites while remaining attractive and interesting to your users and functional to your clients.

The main construction of Berlin consists of liquid outer divs, while maintaining a fixed inner content width to ensure that the design fills out the user's browser width, while still maintaining a good line reading length. The content, as always, is created with accessibility in mind. Berlin comes complete with an extension to install the design into Dreamweaver, making the creation of new pages a breeze. It also comes complete with a series of tutorials that explain in-depth how the design elements have been put together.

Creating Rounded Borders in Browsers with CSS3 with an IE twist Free!
by Estelle Weyl - 18-Sep-09
Reader Level:

In the past we've generally had to add a bunch of useless HTML as hooks to add corners when making rounded corners. Now, most modern browsers understand their own versions of the CSS border-radius property, which creates rounded corners on elements. In this tutorial we learn a new method of creating rounded corners in all browsers. We'll also target Internet Explorer using a little JavaScript and CSS magic.

CMX JumpStart: Stelvio Pass - Gallery
by Adrian Senior - 19-Aug-09
Reader Level:

The Stelvio Pass - Gallery JumpStart presents a nicely integrated image gallery and flexibility of layout width and advanced CSS column control.

The Stelvio Pass - Gallery also includes inverted sliding door navigation and an accessible sub navigation in the left hand column, both of which can be expanded with ease to suit any given situation.

Introducing CMX JumpStart: Stelvio Pass - Gallery Free!
by Sheri German - 19-Aug-09
Reader Level:

Let's take a car ride along the highest paved mountain pass in the Eastern Alps, the Stelvio Pass of Italy. Then let's take some great shots along the route and when we get home, place them on a web page in a stunning gallery format, courtesy of the free Adobe Lightbox, to share with our friends and family. Guess what? That's exactly what Adrian Senior did for the the latest JumpStart, CMX JumpStart Stelvio Pass - Gallery.

Displaying Horizontal List Navigation in Dreamweaver's Design View
by Adrian Senior - 12-Aug-09
Reader Level:

How to stop your horizontal list navigation from moving out of line in Dreamweaver's design view. In this article we will look at what causes this annoying problem and two different ways it can be corrected.

IE8 - The Good - CSS2.1 Selector Support Free!
by Estelle Weyl - 11-Aug-09
Reader Level:

In the last section we overviewed all the new features of IE8. In this section we take a closer look at all of the CSS2.1 Selectors, and compare IE6, IE7 and IE8 browser support.

The IE8: The Good, The Bad, The Ugly (and Pretty) Series:
IE8: The Good, The Bad, The Ugly (and Pretty)
IE8: The Good - CSS2.1 Selector Support

The CSS Starter Page Series - Part 9: Working with the Conditional Comment
by Sheri German - 22-Jul-09
Reader Level:

Welcome back to another installment of the CSS Starter Page series. We've spent quite a bit of time on navigation systems and Spry Widgets in the most recent tutorials. Now we'll switch gears to work with something a little less sexy, and that is the Conditional Comments that reside in the heads of most CSS Starter Pages. These Conditional Comments address issues that make layouts look different in various versions of Internet Explorer browsers. The problems arise when an unsuspecting designer makes certain modifications to the layout, and then fails to realize that those changes require some adjustments to the Conditional Comments as well.

In this tutorial, we'll look at what we need to change in the IECC (Internet Explorer Conditional Comments) when we want to balance the top headings in the columns and when we need to change the width of the sidebar column.

This tutorial includes support files so you can play along at home.

The CSS Starter Page Series:
The CSS Starter Page Series - Part 1: Faux-Column Images
The CSS Starter Page Series - Part 2: More Background Images
The CSS Starter Page Series - Part 3: Three-Column Fluid Background Images
The CSS Starter Page Series - Part 4: Rounded Corner Background Images
The CSS Starter Page Series - Part 5: Shadows and Rounded Corner Background Images
The CSS Starter Page Series - Part 6A: Adding Navigation Schemes
The CSS Starter Page Series - Part 6B: Adding Navigation Schemes Part Two
The CSS Starter Page Series - Part 6C: Adding Navigation Schemes Part Three
The CSS Starter Page Series - Part 7: Adding a Spry Menu Bar
The CSS Starter Page Series - Part 8: Managing Content with Spry
The CSS Starter Page Series - Part 9: Working with the Conditional Comment
The CSS Starter Page Series - Part 10: Adding a Print Style Sheet
The CSS Starter Page Series - Part 11: Adding a Handheld Style Sheet

IE8 - The Good, the Bad, the Ugly (and Pretty) Free!
by Estelle Weyl - 22-Jul-09
Reader Level:

Browsers come out every day. Webkit has a nightly build. Wireless devices come with their own, often unique browsers. Even with the plethora of available browsers, Internet Explorer, a browser that is not regularly updated, still has over 60% of the browser market. IE8 was released only in March 2009, and by July 2009, it already had 17% of the browser market share.

In this article, we take a look at the IE8 browser and provide an overview of what is new and improved in this release.

The IE8: The Good, The Bad, The Ugly (and Pretty) Series:
IE8: The Good, The Bad, The Ugly (and Pretty)
IE8: The Good - CSS2.1 Selector Support

The CSS Starter Page Series Part 7: Adding A Spry Menu Bar
by Sheri German - 26-Jun-09
Reader Level:

In this installment of the CSS Starter Page series, we are going to segue into exploring Spry widgets by continuing where we left off - that is with trying out different navigation schemes. We're going to add a Spry Menu Bar to the Photo Gallery page of our layout to accommodate the numerous sub categories of images we might have in that section of the site.

This tutorial will take you through the following tasks:

Setting up a site definition - very important for ensuring that the Spry Widget works once you upload the files
Inserting the Spry Menu Bar widget
Customizing the menu items (link text) for each link and its sublinks
Styling the menu

Dreamweaver Built-In CSS Help Features - Part 3: CSS Layout Backgrounds
by Adrian Senior - 17-Jun-09
Reader Level:

CSS Layout Backgrounds, of all the CSS visual aids this is probably my favourite. Activating this option de-clutters design view completely, it takes you right down to the bare bones and really lets you get to grips with the structure of the layout. If I am having a problem with a layout this where I go to, it just makes everything very easy to see. Background images are removed and all your layout elements are given random background colours, it is uncanny how this de-cluttering makes everything so easy to read in design view.

The Dreamweaver Built-In CSS Help Features Series:
Dreamweaver Built-In CSS Help Features - Part 1: CSS Layout Outlines
Dreamweaver Built-In CSS Help Features - Part 2: CSS Layout Box Model
Dreamweaver Built-In CSS Help Features - Part 3: CSS Layout Backgrounds

Introducing CMX JumpStart Siberia Free!
by Sheri German - 11-Jun-09
Reader Level:

It's almost summer, so don't make me think. You may have read the book by Steve Krug, a book about web usability, that uses this phrase as its title. If "don't make me think" is your philosophy, then you're going to love the latest JumpStart, CMX JumpStart Siberia. From its completely neutral color scheme that will easily adapt to any color choices you make, to its ready-made inclusion of the Spry Accordion Widget, to its brain dead method for switching from two to three column layouts, Siberia won't make you think, or certainly not much.

CMX JumpStart: Siberia
by Adrian Senior - 11-Jun-09
Reader Level:

Siberia is, of course, renowned for its freezing temperatures, and the colour theme is based around the coldness of the region. Siberia is a design that sits easy with me - it is understated in appearance yet provides a powerful and flexible interface on which you could base just about any design you could imagine. From the inverted sliding door navigation and the accompanying sub navigation system to the built in accordion and flexible column choice, Siberia has it all.

The main construction of Siberia consists of liquid outer divs, while maintaining a fixed inner content width to ensure that the design fills out the users browser width, while still maintaining a good line reading length. The content, as always, is created with accessibility in mind. Siberia comes complete with an extension to install the design into Dreamweaver, making the creation of new pages a breeze. It also comes complete with a series of tutorials that explain in-depth how the design elements have been put together.

Dreamweaver's Built-In CSS Help Features: Part 2 - CSS Layout Box Model
by Adrian Senior - 10-Jun-09
Reader Level:

In Part 1 of this series, we looked at the CSS Layout Outlines. While this option provided us with clear demarcation by setting a border against our elements, it didn't provide any feedback on the layout itself.

In Part 2 we will be looking at the CSS Layout Box Model option. The CSS Layout Box Model visual aid is a very useful feature, a feature that provides both a method of selecting individual elements and gaining feedback about the CSS rules set against the selected element. All this information can be accessed directly from within Dreamweaver's design view and is available in text and visual design formats.

The Dreamweaver Built-In CSS Help Features Series:
Dreamweaver Built-In CSS Help Features - Part 1: CSS Layout Outlines
Dreamweaver Built-In CSS Help Features - Part 2: CSS Layout Box Model
Dreamweaver Built-In CSS Help Features - Part 3: CSS Layout Backgrounds

Dreamweaver Built-In CSS Help Features - Part 1: CSS Layout Outlines Free!
by Adrian Senior - 05-Jun-09
Reader Level:

Dreamweaver, over the last version or two, has included some very nice CSS help features. The features I'm referring to are termed Visual Aids and can be found within the Visual Aids drop-down menu that can be accessed from the document toolbar. There are several different CSS features within this area and we will look at them one by one to gain a good understanding of each and see how they can benefit our workflow.

The Dreamweaver Built-In CSS Help Features Series:
Dreamweaver Built-In CSS Help Features - Part 1: CSS Layout Outlines
Dreamweaver Built-In CSS Help Features - Part 2: CSS Layout Box Model
Dreamweaver Built-In CSS Help Features - Part 3: CSS Layout Backgrounds

Introducing CMX JumpStart: Nairobi Flexible Free!
by Sheri German - 07-May-09
Reader Level:

It wasn't that long ago - November 26, 2008 to be exact - that we released CMX JumpStart Nairobi. At the time, I introduced the JumpStart based on the capital of Kenya with this sentence:

We think that the latest CMX JumpStart, CMX JumpStart Nairobi, will become one of your most important JumpStarts. Why? Because Nairobi is all about features and flexibility.

Read that last word again, because that is exactly what we're offering in this reworking of Nairobi - CMX JumpStart Nairobi Flexible. My original meaning in the word "flexibility" was meant to underline all the ways you could use the JumpStart. In response to subscriber interest in using Nairobi as a flexible layout, however, Adrian Senior has not only provided a modification of his own Nairobi design, but has provided a comprehensive tutorial on how he accomplished thet transformation.

CMX JumpStart: Nairobi-Flexible
by Adrian Senior - 07-May-09
Reader Level:

In this tutorial we will take the Nairobi JumpStart and change it from its fixed width default layout into a flexible layout that works between two preset points, based on the user's browser width.

We will also discuss the merits and pitfalls of the changes we will make as we progress through the tutorial. We will discuss screen resolution and desktop setup through to problem areas of flexible layouts.

CMX JumpStart: Isle of Skye
by Adrian Senior - 30-Apr-09
Reader Level:

A short while ago, the beginning of March to be more precise, I wrote an article on selling your business. It looked at how easy it was to lose visitors when they printed a page from your web site and what we could do to remedy that problem. You can read the article on CMX; it is called Selling Your Business.

This JumpStart, Isle of Skye, takes the principles of that article and puts them to use in a way that means minimal work for yourself. You just need to add the relevant details into the web site and the CSS files will do the rest for you. Further to this automated functionality, Dreamweaver allows you to easily make any edits you need by making good use of the Style Rendering toolbar. The Style Rendering toolbar allows you to move quickly from one media type to another making it easy to stay on top of the different views available within your web site. All this control is provided with just a simple click of an icon.

Introducing CMX JumpStart Isle of Skye Free!
by Sheri German - 30-Apr-09
Reader Level:

National Geographic rated it the fourth best island in the world. It is the second largest island in Scotland, with a coastline strewn with peninsulas and bays. And now, it's a first class design for the latest CMX JumpStart, CMX JumpStart Isle of Skye.

CMX JumpStart Isle of Skye is a centered, fixed-width layout with features that work well for a business site. There is a highlighted style for a promotional paragraph above the two-column main content region. There is an extended area for displaying images that express your business model. A print style sheet includes your business contact information so that it is not lost when a visitor prints out any page of the site. Your logo appears next to the popular accessible Sliding Door tabbed navigation. And best of all, this is one of the easiest JumpStarts to modify! Once you edit the PNG file and export the slices to the defined Dreamweaver site, the changes you'll need to make to the CSS file are minimal.

Firebug - Part 5: Inspecting the Box Model
by Estelle Weyl - 27-Apr-09
Reader Level:

Firebug is the premier (and free) web development tool for Firefox. In previous sections we've looked at editing and debugging CSS using Firebug. One thing you'll need to debug is the box model. Firebug provides a "Layout" tab that enables you to evaluate the box model of any element on your page: measuring an element's height, width, padding, border and margins.

We also go over the quirks of the IE quirksmode box model, and how that box model differs from the W3C specifications.

The Firebug Series:
Firebug - Part 1: The What and Why
Firebug - Part 2: Overview of Firebug Functionality
Firebug - Part 3: Editing with Firebug
Firebug - Part 4A: Inspecting and Troubleshooting CSS
Firebug - Part 4B: Inspecting and Troubleshooting CSS
Firebug - Part 5: Inspecting the Box Model
Firebug - Part 6: HTTP Requests and Download Speeds
Firebug Part 7a: The Script Tab (Basics)

Firebug - Part 4A: Inspecting and Troubleshooting CSS
by Estelle Weyl - 17-Apr-09
Reader Level:

In this section of multi-part series about Firebug, the premier (and free) web development tool for Firefox we learn how to edit CSS within the Firebug window, so we can get immediate feedback on how our edits will change the site in production. Topics include inspecting, editing and troubleshooting CSS using Firebug.

The Firebug Series:
Firebug - Part 1: The What and Why
Firebug - Part 2: Overview of Firebug Functionality
Firebug - Part 3: Editing with Firebug
Firebug - Part 4A: Inspecting and Troubleshooting CSS
Firebug - Part 4B: Inspecting and Troubleshooting CSS
Firebug - Part 5: Inspecting the Box Model
Firebug - Part 6: HTTP Requests and Download Speeds
Firebug Part 7a: The Script Tab (Basics)

Introducing CMX JumpStart Landeck Free!
by Sheri German - 16-Apr-09
Reader Level:

CMX JumpStart Landeck is a centered, two-column or three-column, 770 pixel liquid and fixed-width layout. The content is constrained for optimal line lengths of text, but the outer divs are flexible and expand to the user's window size. The two tier navigation uses Sliding Door technique for its main navigation. The left column navigation is constructed from an unordered list, which has a generous amount of bottom padding to accommodate a decorative background image. The right column of the three-column version provides space for more content, or, as in our JumpStart, some eye catching images. The header div uses the Fireworks Fade Image (Auto Vector Mask in CS4) command to blend its image into the background color.

CMX JumpStart: Landeck
by Adrian Senior - 16-Apr-09
Reader Level:

Welcome to the Landeck JumpStart!

The Landeck JumpStart looks at how we can use the flexibility of a CSS layout to control the number of columns on any given page from a single CSS file. To switch the design from a three-column to a two-column layout you simply need to add a class to the body tag and the CSS takes care of everything else for you!

The main construction of Landeck consists of liquid horizontal outer divs with a fixed inner content width to ensure that the design fills out the user's browser width, while still maintaining a good line reading length. The content, as always, is created with valid code and accessibility in mind.

The Landeck JumpStart

Introducing CMX JumpStart Lima Free!
by Sheri German - 13-Mar-09
Reader Level:

Peru's archaeological heritage and great natural beauty make it a popular travel destination for thousands of visitors each year. Most of them visit Lima, Peru's cultural and business center. The latest CMX JumpStart, CMX JumpStart Lima, will also become an artistic center - for designers. With its neutral color scheme, modern design, and elegant simplicity, it will be a JumpStart you can use again and again to almost instantly create a new site.

CMX JumpStart Lima is a centered, two-column, fixed-width layout that makes extensive use of background images to produce its space age design. The left column navigation is constructed from an unordered list. The header div uses the Fireworks Fade Image (Auto Vector Mask in CS4) command to create a subtle blend whose visual appeal makes a great substitute for the navigation buttons in Gordon's original Mercury Design Element.

That's right - if this design looks familiar, it should. Adrian Senior coded it from Gordon Mackay's Design Element Mercury.

Of course Lima meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements, too.

CMX JumpStart: Lima
by Adrian Senior - 13-Mar-09
Reader Level:

Welcome to the Lima JumpStart.

Lima is, of course, the capital of Peru and is our second JumpStart from that country, the first being Machu Picchu. Lima uses the Mercury design element that was designed by Gordon Mackay. The Mercury design element is a simple, yet effective, design to which I have made some subtle changes. Lima is an exercise in taking a design element and modifying it suit your needs. I have kept the main design structure intact and have introduced a change to the main header that originally held the navigation and moved the navigation into the side bar. Design elements are easy and quick to work with, I highly recommend them.

JumpStart Lima

Selling Your Business
by Adrian Senior - 05-Mar-09
Reader Level:

When we build a web site we take a great deal of time in ensuring that our copy and images precisely reflect the services we are selling. The aim is, of course, to make everything as appealing as we possibly can as soon as a viewer enters the web site. The time for capturing a viewers interest is minimal and initial impressions are vital in encouraging a visitor to explore further into the web site. Hopefully they are encouraged enough to make the purchase, use the contact form or pick up a phone to talk about their needs. This is fine for screen interaction and it is where many web sites and web designers seem to stop putting in the effort to sell the business.

In this tutorial, we will look at what happens when a user prints a page for referral purposes. The content is still there but what about the contact information? Do we expect the user to find the URL printed on the page and go back online to find out the info he/she needs? We will look at how we can carry on the good work already completed for our screen web site into the printed page.

Losing that Rollover Lag
by Adrian Senior - 24-Feb-09
Reader Level:

Rollover lag on image swaps can be one of the most annoying problems of all to deal with. The lag can really detract from your web site and give the appearance that things are not really working as they should! I find that this problem varies from browser to browser and the lag time in some is really unacceptable.

No matter if you mouseover or click to generate the swap image, it is only then that the swap image is requested from the server. Fortunately, this is an easy problem to fix - we just need a little CSS magic to ensure that our swap images are already in the cache when they are requested by the browser. This will ensure that our image swaps are as instant as they can be.

From Screen to Print: Creating a Print CSS in Dreamweaver Free!
by Stephanie Sullivan - 12-Jan-09
Reader Level:

Questions often arise about how to print web pages. Should you create a separate, simple page for printing? Should you just leave users to their own devices knowing they control whether backgrounds or images print anyway? Cascading style sheets (CSS) make it simple to maintain a single page while presenting the content in two different manners using media types.

In this article, you'll learn about media types and how to take advantage of them to create compact pages for print. At the end of the fixed width chapter of the book Greg Rewis and I wrote called, Mastering CSS with Dreamweaver CS4 (there's also a Dreamweaver CS3 version of the book if you have not yet upgraded), we discuss the rules of creating a print style sheet. In this article, you will see those principles in action as you build an example CSS page. Let's get started!

Introducing CMX JumpStart: The New Forest Free!
by Sheri German - 08-Jan-09
Reader Level:

Where can you stay in a five-star hotel or bed-and-breakfast, experience all kinds of wildlife, visit gardens and museums, go biking, and even get married? How about England's newest National Park The New Forest, where there is, it seems, something for everyone? There is also something for everyone in the latest CMX JumpStart, CMX JumpStart: The New Forest.

CMX JumpStart The New Forest is a centered, two-column or three-column, 770 pixel liquid and fixed-width layout. The content is constrained for optimal line lengths of text, but the outer divs are flexible and expand to the user's window size. The two tier navigation uses the infamous Sliding Door technique for its main navigation. The left column navigation is constructed from an unordered list, which has a generous amount of bottom padding to accommodate a decorative background image. The right column of the three-column version provides space for more content, or, as in our JumpStart, an eye catching image. The header div uses the Fireworks Fade Image (Auto Vector Mask in CS4) command to create a blend of images that has great visual appeal.

Of course The New Forest meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements, too.

CMX JumpStart: The New Forest
by Adrian Senior - 08-Jan-09
Reader Level:

Welcome to The New Forest JumpStart!

The New Forest JumpStart looks at how we can use the flexibility of a CSS layout to control the number of columns on any given page from a single CSS file. To switch the design from a three column to a two column layout you simply need to add a class to the body tag and the CSS takes care of everything else for you!

The main construction of The New Forest JumpStart consists of liquid horizontal outer divs while maintaining a fixed inner content width to ensure that the design fills out the user's browser width, while still maintaining a good line reading length. The content, as always, is created with valid code and accessibility in mind.

Approximate download size: 4.4MB

CSS Tabbed Navigation Sets for Sliding Doors Navigation
by Adrian Senior - 11-Dec-08
Reader Level:

Navigation is the most important part of any website - no matter how nice the site looks it has to be usable or it has little to no value in the real world. Not only does the navigation need to be well thought out, it also needs to be well designed, be accessible, look good and be robust enough to not break when a user resizes the page content. Their aren't too many systems that fill all those criteria, but one springs to mind almost every time I build a new site and that is Douglas Bowman's "Sliding Doors" navigation system. In this tutorial I will introduce you to the sliding doors technique. The tutorial is also accompanied by a sliding doors tab starter pack. The starter pack contains four different sets of images in the form of png files that you can easily edit to suit any given layout and all the (X)HTML and CSS required is available within the downloads.

HTML/CSS Crash Primer Free!
by Tom Muck - 02-Dec-08
Reader Level:

This article is intended as a re-introduction to HTML and CSS, and something I have used in the past to give to any new employees who may have had HTML experience, but exhibited some bad habits in actual coding. You may think HTML is simple and you may think you know all you need to know, but HTML is misused daily. Following are some basics to help correct some of the common problems.

CMX JumpStart: Nairobi
by Adrian Senior - 26-Nov-08
Reader Level:

Welcome to the Nairobi JumpStart!

Nairobi allows you to quickly change the layout of the page from a three-column to a two-column layout by using descendant selectors to change the pages appearance. It also features an "upside down" version of the popular sliding doors navigation method, which is complemented by an accessible sub navigation set.

The main construction of Nairobi consists of liquid outer divs while maintaining a fixed inner content width to ensure that the design fills out the users browser width, while still maintaining a good line reading length. The content, as always, is created with accessibility in mind.

Nairobi comes complete with an extension to install the design into Dreamweaver, making the creation of new pages a breeze. It also comes complete with a series of tutorials that explain in-depth how the design elements have been put together.

Nairobi is a JumpStart not to be missed!

Introducing CMX JumpStart Nairobi Free!
by Sheri German - 26-Nov-08
Reader Level:

Nairobi is the capital and largest city in Kenya. The latest U.S. election put focus on Kenya as the President-Elect, Barack Obama, had a Kenyan father. Nairobi is now one of the most important cities in Africa, and we think that the latest CMX JumpStart, CMX JumpStart Nairobi, will become one of your most important JumpStarts as well. Why? Because Nairobi is all about features and flexibility.

The CSS Starter Page Series - Part 1: Faux-Column Images Free!
by Sheri German - 30-Oct-08
Reader Level:

Most of you have probably opened a CSS Starter Page by now, intending to use it as a launching pad for a site design. Sure, they save a lot of headaches in that they give you the basic structure for columns, header, and footer. They include generic classes for floating images left and right. They even take the worry out of figuring out how to code a liquid versus fixed, or elastic versus hybrid, layout. And what a blessing that they include some basic Internet Explorer fixes!

Still, you may have looked at them with some dismay as soon as you noticed what they don't include. Like how about that pesky little detail called the navigation scheme? Or what about the fact that the second (or third column, if there is one) has a background color that stops as soon as the content within stops? Or what to do about the Internet Explorer problems that you introduce as you modify the CSS Starter Page?

Relax. This series will tackle the missing puzzle pieces of the CSS Starter Pages in a codified and modular fashion by taking on one issue at a time. The first topic of this series will be devoted to background images and faux column technique in all of their permutations, starting with background images for columns in liquid, elastic, and fixed-width layouts. So settle back, download the support files at the bottom of the page, and begin your journey towards becoming a background image guru.

The CSS Starter Page Series:
The CSS Starter Page Series - Part 1: Faux-Column Images
The CSS Starter Page Series - Part 2: More Background Images
The CSS Starter Page Series - Part 3: Three-Column Fluid Background Images
The CSS Starter Page Series - Part 4: Rounded Corner Background Images
The CSS Starter Page Series - Part 5: Shadows and Rounded Corner Background Images
The CSS Starter Page Series - Part 6A: Adding Navigation Schemes
The CSS Starter Page Series - Part 6B: Adding Navigation Schemes Part Two
The CSS Starter Page Series - Part 6C: Adding Navigation Schemes Part Three
The CSS Starter Page Series - Part 7: Adding a Spry Menu Bar
The CSS Starter Page Series - Part 8: Managing Content with Spry
The CSS Starter Page Series - Part 9: Working with the Conditional Comment
The CSS Starter Page Series - Part 10: Adding a Print Style Sheet
The CSS Starter Page Series - Part 11: Adding a Handheld Style Sheet

Introducing CMX JumpStart Tokyo Free!
by Sheri German - 16-Oct-08
Reader Level:

Want a JumpStart where you need to modify only two graphics AND you can choose a two or three column version that you turn on with the flick of one class? Then welcome to CMX JumpStart Tokyo!

Tokyo is a centered, two-column or three-column, 770 pixel fixed-width layout that has many appealing design features. The left column navigation is constructed from an unordered list, and it is easy to add as many links as you need. The right column of the three-column version has a series of pods that can be used for "teaser text" with thumbnail images.

CMX JumpStart: Tokyo
by Adrian Senior - 16-Oct-08
Reader Level:

The Tokyo JumpStart looks at how we can use the flexibility of a CSS layout to control the number of columns on any given page from a single CSS file.

The Tokyo JumpStart provides the easiest of solutions for changing the amount of columns on a page - you simply need to add a class to the body tag and the CSS takes care of everything else for you!

The Tokyo JumpStart includes the following tutorials:

Centering a Wrapper - by John Gallant & Holly Bergevin
Create Columns with Floats by Zoe Gillenwater
Do You Want To Do That With CSS? - Floating Clear- by John Gallant & Holly Bergevin
CMX Internet Explorer Conditional Comment Extension by Paul Davis
Making CC & DT style sheets work for you by Adrian Senior
CSS Tricks: Using Descendant Selectors to Control the Number of Columns by Stephanie Sullivan

There are some great tutorials for you to work through in that list, as well as a great extension for creating the conditions for using conditionally commented style sheets that feed styles to the various versions of Internet Explorer.

Making a Three-Column Layout - Part 4: Fixed, Fluid and Elastic Layouts
by Estelle Weyl - 03-Sep-08
Reader Level:

In Part 1, we learned the basics of making 3 columns lay out side by side. It was ugly! In Part 2, without touching the (X)HTML, we learned to make the columns appear to all be the same length, using absolute widths. In Part 3 we learned how to change the order of the columns via CSS.

In this tutorial, without touching our original (X)HTML from Part 1, we learn how to create fluid and elastic layouts and the tricks to make these more complex columns look like they're all the same height.

The Making a Three-Column Layout Using CSS Series:
Making a Three-Column Layout Using CSS - Part 1
Making a Three-Column Layout Using CSS - Part 2
Making a Three-Column Layout Using CSS - Part 3: Changing Column Order With CSS
Making a Three-Column Layout Using CSS - Part 4: Fixed, Fluid and Elastic Layouts

The Complete JumpStart Catalog 2008 Update Free!
by Sheri German - 02-Sep-08
Reader Level:

You asked for it, and it's finally here: a massive update to the CMX JumpStart Complete Catalog. This catalog starts off with a rundown of all the types and features of our inventory of JumpStarts. It then lists each JumpStart in the order we released it, including a summary of its main features, along with an image to help you better visualize it. Each itemized JumpStart also includes links to both its subscriber article, as well as the free introductory article.

Introducing CMX JumpStart Phoenix Free!
by Sheri German - 21-Aug-08
Reader Level:

It's another JumpStart, and this one is named after a city I visited and loved, Phoenix, Arizona.

CMX JumpStart Phoenix is a centered, two-column, 760 pixel fixed-width layout that has many appealing design features. There is a strikingly contrasted color scheme, vertical navigation in the right column, and "swap image" rollovers that use a caching technique that corrects flaws in Internet Explorer.

The JumpStart filters styles for various versions of Internet Explorer, and includes separate style sheets to address issues found in IE 6 and below versus IE 7.

Of course Phoenix meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements, too.

CMX JumpStart: Phoenix
by Adrian Senior - 21-Aug-08
Reader Level:

Welcome to the Phoenix JumpStart!

Phoenix, as with all CMX JumpStarts, comes complete with all source files - from the XHTML document to the PNG files to, of course, the heart of the JumpStart, the CSS files.

It is a two-column centred design and can easily be modified to suit your own requirements. Phoenix makes good use of Conditionally Commented style sheets and comes complete with a design time style sheet to ensure everything looks just as you would expect in Dreamweaver's design view.

Making a Three-Column Layout Part 3: Changing Column Order With CSS
by Estelle Weyl - 18-Aug-08
Reader Level:

In Part 1, we learned the basics of making three columns layout side by side. It was ugly! In Part 2, without touching the HTML, we learn to make the columns appear to all be the same length. In Part 3, we cover changing the order of your columns via CSS, without touching your (X)HTML code.

The Making a Three-Column Layout Using CSS Series:
Making a Three-Column Layout Using CSS - Part 1
Making a Three-Column Layout Using CSS - Part 2
Making a Three-Column Layout Using CSS - Part 3: Changing Column Order With CSS
Making a Three-Column Layout Using CSS - Part 4: Fixed, Fluid and Elastic Layouts

Making a Three-Column Layout Using CSS: Part 2
by Estelle Weyl - 08-Aug-08
Reader Level:

Anyone can make a three column layout look good.... using tables. In part 1 we learned the basics of making 3 columns layout, but it was ugly! In this tutorial, without touching the HTML, we learn to make a three column layout with columns that always appear to be the same length.

The Making a Three-Column Layout Using CSS Series:
Making a Three-Column Layout Using CSS - Part 1
Making a Three-Column Layout Using CSS - Part 2
Making a Three-Column Layout Using CSS - Part 3: Changing Column Order With CSS
Making a Three-Column Layout Using CSS - Part 4: Fixed, Fluid and Elastic Layouts

CMX JumpStart: Prague
by Adrian Senior - 07-Aug-08
Reader Level:

The Prague JumpStart looks at how we can lay out over-lapping elements within our designs and investigates the use of multiple wrappers to ensure that our layout maintains its structure on resize.

In previous JumpStarts we have looked at how we can filter our CSS rules to one browser or another; with Prague we will be filtering our CSS in a slightly different way by providing a style sheet to take care of specific navigation problems that can be found in IE 5.01.

Introducing CMX JumpStart Prague Free!
by Sheri German - 07-Aug-08
Reader Level:

It's that time again! CMX is proud to introduce our latest JumpStart design, CMX JumpStart Prague. CMX JumpStart: Prague is a two-column, centered, 770 pixel fixed-width layout that features rounded corners. Multiple wrappers, used in conjunction with faux column technique, maintain the integrity of the structure even upon text resize. Additionally, the JumpStart provides an attractive example of overlapping areas within a design. This JumpStart filters styles for various versions of Internet Explorer, and includes a separate style sheet to address navigation issues found in IE 5.01. Of course Prague meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements, too.

CSS: All Browsers Can Be Created Equally
by Estelle Weyl - 11-Jul-08
Reader Level:

Different browsers have slightly different default rendering. Removing the inconsistent default styling for elements in various browsers creates an equal starting point and allows you to explicitly set your own default settings that are equal in (almost) all browsers. This article will show you tricks on how to start a CSS file that not only works in all browsers, but also reduces CSS file size and headaches.

Dreamweaver for GoLive Users: Part Four Free!
by Sheri German - 07-Jul-08
Reader Level:

It's been a while since the third installment in the Dreamweaver for GoLive users series, but I didn't forget you while I was writing about the Dreamweaver public beta or the latest CMX JumpStart! In parts four and five of this tutorial, we'll get to the really exciting stuff. We'll use Adobe GoLive to add the styles that will transform the pure markup from a series of divs that stack vertically down the page into a neatly contained fixed-width layout with side-by-side columns.

Then, in part six, you'll learn how to perform the same tasks in Dreamweaver.

This tutorial includes both starter and completed files folders.

The Dreamweaver for GoLive Users Series:
Dreamweaver for GoLive Users: Part 1
Dreamweaver for GoLive Users: Part 2
Dreamweaver for GoLive Users: Part 3
Dreamweaver for GoLive Users: Part 4
Dreamweaver for GoLive Users: Part 5
Dreamweaver for GoLive Users: Part 6
Dreamweaver for GoLive Users: Part 7
Dreamweaver for GoLive Users: Part 8
Dreamweaver for GoLive Users: Part 9

Introducing CMX JumpStart: The Lake District Free!
by Sheri German - 20-Jun-08
Reader Level:

The Lake District in rural North West England is famous for its gorgeous scenery — and, of course, lakes. It is also associated with the poetry of William Wordsworth and the Lake Poets. It is to that region that we travel for our latest JumpStart design, CMX JumpStart The Lake District.

CMX JumpStart: The Lake District features an accessible split level navigation system. The main navigation is a series of tabs that uses the Sliding Door method as described by Douglas Bowman. The sub navigation is an unordered list based system, and has rounded corners, as well as a decorative background image on the bottom that is reminiscent of CMX JumpStart North Pole. Both navigation systems provide clear "you are here" page markers. The design is a two column layout fixed at 750px wide and utilizes subtle gradients on various page areas.

The color scheme of this layout was selected to make sure that the eye goes to the subject matter rather than the design. Thus, The Lake District is composed of black, gray, and white to help the images pop.

CMX JumpStart: The Lake District
by Adrian Senior - 20-Jun-08
Reader Level:

The Lake District JumpStart wanders away slightly from our usual city theme. The Lake District is an area in the North West of England that has a beautiful collection of (guess this if you can...) lakes and some absolutely stunning scenery. You should really visit The Lake District if you ever get the slightest opportunity to do so.

The nature of the images in this type of website demands that the eye be drawn to the subject matter rather than the design. With this in mind The Lake District allows the content images to take centre stage by utilising a design that consists of black, greys and white to ensure the design does not subtract from the content.

Introducing CMX JumpStart Bordeaux Free!
by Sheri German - 14-May-08
Reader Level:

It's May, and for many of us that means lots of end-of-year events. School concerts, graduations, award ceremonies, last meetings till the fall...we celebrate these endings and look forward to the easy lifestyle of summer. Many of our celebrations are accompanied by parties - delicious food, and sometimes a special wine. What more preeminent center of great wine is there than Bordeaux, France? And to that region we dedicate our latest JumpStart design, CMX JumpStart Bordeaux.

CMX JumpStart Bordeaux features an accessible split level navigation system. The main navigation is a series of tabs that use the Sliding Door method as described by Douglas Bowman. The sub navigation is an unordered list based system, and both navigation systems provide clear "you are here" page markers. The design is a two column layout fixed at 740px wide and utilizes gradients on various page areas. Of course Bordeaux meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements, too.

CMX JumpStart: Bordeaux
by Adrian Senior - 14-May-08
Reader Level:

Welcome to the Bordeaux JumpStart.

Bordeaux features a split-level navigation system, both of which are accessible. The main navigation incorporates the sliding door method as described by Douglas Bowman. The sub-navigation is an unordered list based navigation system and both navigation systems provide clear "you are here" page markers. The design is a two-column layout, fixed at 740px wide, and utilises gradients in the background while using the full width of the user's browser to provide a full and expansive appearance to the overall design. Bordeaux can be integrated into the New File dialog window of Dreamweaver by using the extension that is provided within the download

CMX JumpStart: Malé
by Adrian Senior - 10-Apr-08
Reader Level:

The Malé JumpStart is a fixed-width, two and three-column layout. It has a right column that can be shown, or hidden, on a page-by-page basis, without the need to delve into the code. The centre column is our main info area while the left column features a CSS based flyout menu. This is a menu design that owes some thanks to Peter Nederlof for his work on the csshover.htc script that allows the menu to function in versions of Internet Explorer that don't support the hover on non-anchor elements. Coupled with this JumpStart is an excellent introductory tutorial written by John Gallant and Holly Bergevin that explains the set up of the menu. Read and enjoy.

Introducing CMX JumpStart Malé Free!
by Sheri German - 10-Apr-08
Reader Level:

I grew up at the New Jersey shore, and spent my childhood playing in the surf and sand. I felt, and still feel, a bliss and peace there that I feel no where else in the world. So, when I first viewed Adrian Senior's latest JumpStart design, CMX JumpStart Malé, I was immediately smitten.

CMX JumpStart Malé, one of our most flexible JumpStarts to date, is a fixed-width two and three-column layout. You can show or hide the third column on a page-by-page basis, without having to delve into the code. The left column features a CSS based flyout menu that you can customize with as many levels as you need.

Of course Malé meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements, too.

Baltimore: Developing a CSS Starter Page Part Three
by Sheri German - 09-Apr-08
Reader Level:

In the first two parts of the Baltimore CSS Starter Page series, you created a comp for the design we are naming after the city of Baltimore. You analyzed the graphics in relation to the fixed-width, two-column, centered layout CSS Starter Page, and developed a slicing strategy. Finally, you exported the graphics to the defined Baltimore site. You now should have the following documents in the site folder:

mockup.html, the XHTML page (with the CSS rules in the head of the document)
an images folder with the exported graphics for the site

In this third part of the series, you will apply the exported graphics to the existing sidebar and mainContent columns, using the CSS Starter Page as your launching pad.

This tutorial includes a starter folder and a completed exercise folder in its download.

The Developing a CSS Starter Page: Baltimore Series
Baltimore: Developing a CSS Starter Page - Part One
Baltimore: Developing a CSS Starter Page - Part Two
Baltimore: Developing a CSS Starter Page - Part Three
Baltimore: Developing a CSS Starter Page - Part Four
Baltimore: Developing a CSS Starter Page - Part Five

Baltimore: Developing a CSS Starter Page - Part One
by Sheri German - 02-Apr-08
Reader Level:

I am pleased to introduce Baltimore, the third city to form the basis of a CSS Starter Page series. I am particularly fond of Baltimore as my family and I live between this largest city in Maryland and Washington, DC. We go into Baltimore every week for our son's musical activities at the Peabody Preparatory Department, which is a division of John Hopkins University.

If you followed along with Honolulu or Chicago, you'll remember that the CSS Starter Pages, while extremely useful, do lack navigation schemes and other bells and whistles, such as gradient background images. So, you need a little knowledge in order to turn them into viable layouts.

You may remember that Honolulu guided you through adding faux column technique and vertical buttons created with an unordered list. Chicago added a horizontal navigation bar and sidebar pods to your growing skill set. This time around you'll add "modules" to the two-column, fixed-width, left-sidebar CSS Starter Page to turn it into a horizontal band layout. You'll use a Fireworks graphical representation of the layout to develop the graphics for the design we're calling Baltimore. You'll export the slices and develop the XHTML and CSS to create a working template that you can use for a personal or client project.

In the first part of this tutorial series, you will select a CSS Starter Page, define the Baltimore Dreamweaver site, and develop the graphics in Fireworks.

The Developing a CSS Starter Page: Baltimore Series
Baltimore: Developing a CSS Starter Page - Part One
Baltimore: Developing a CSS Starter Page - Part Two
Baltimore: Developing a CSS Starter Page - Part Three
Baltimore: Developing a CSS Starter Page - Part Four
Baltimore: Developing a CSS Starter Page - Part Five

Chicago: Developing a CSS Starter Page - Part Five
by Sheri German - 18-Mar-08
Reader Level:

If you've been following along with the Chicago CSS Starter Page series, you're almost to the finish line. There are just two tasks left to accomplish: add the horizontal navigation bar, and check the layout for cross browser issues, particularly those that relate to Internet Explorer.

At the end of this tutorial, you'll have a completed layout that you can modify with your own branding to use in a client or personal project.

This tutorial includes starter files as well as a folder with the completed layout.

The Developing a CSS Starter Page Series:
Chicago: Developing a CSS Starter Page - Part 1
Chicago: Developing a CSS Starter Page - Part 2
Chicago: Developing a CSS Starter Page - Part 3
Chicago: Developing a CSS Starter Page - Part 4
Chicago: Developing a CSS Starter Page - Part 5

From Chicago Style to Picture Perfect - Customizing the Chicago JumpStart
by Jim Babbage - 18-Mar-08
Reader Level:

I was recently approached by a friend to update her site. I had done the initial design a few years ago and while she still received positive feedback on the site, she wanted a more contemporary, corporate feel to attract business customers.

As luck would have it, Sheri German was just wrapping up her series on the Chicago JumpStart. This new JumpStart design is based on one of the Dreamweaver CS3 CSS templates. If you followed Sheri's series, you saw her take the skeleton template and turn it into a fully fledged design, including the PNG artwork.

This article will focus primarily on customizing the PNG, and try to retain as much of the original CSS as possible. For my design, I did customize the slicing in a couple areas in the PNG, so we will also talk about how to make those changes in the CSS.

Approximate download size: 1.3MB

Introducing CMX JumpStart Sydney Free!
by Sheri German - 06-Mar-08
Reader Level:

It has to be one of the most beautiful opera houses in the world: the Sydney Opera House in Sydney, Australia. Opulence, elegance, and grandeur all come to mind when viewing pictures of the architecture and the city. And now those very same qualities come to you in the latest JumpStart, CMX JumpStart Sydney. Indeed, the header includes an image of the Sydney Opera House under a night sky as the centerpiece of a tasteful and elegant page layout.

CMX JumpStart Sydney is a centered, fixed-width layout that features an absolutely positioned left column with menu system that drapes over the header and content regions. With its quiet color scheme and simplicity of layout, JumpStart Sydney wreaks of class.

Read on to find out what the Sydney package includes and to view a Sydney example modification.

CMX JumpStart: Sydney
by Adrian Senior - 06-Mar-08
Reader Level:

Welcome to the Sydney JumpStart. Sydney is comprised of two columns, one of which is an absolutely positioned div that contains the nested list navigation elements.

Sydney utilises three style sheets, one that is read by all browsers and a second that is read only by versions of Internet Explorer that are greater than version 5. The final style sheet is used only at design time and provides a workaround for Dreamweaver's lack of support for the min-height value and property.

The Sydney JumpStart comes complete with a comprehensive set of tutorials and it also includes all source files, from the design png file right through to the xhtml and CSS files. Also included within the Sydney download file is the CMX design time style sheet extension which builds on and enhances the native functionality.

Chicago: Developing a CSS Starter Page - Part Four
by Sheri German - 05-Mar-08
Reader Level:

In the last article in the Chicago: Developing a CSS Starter Page series, you established "the big picture" for the layout by styling the main divs, such as the header, columns, and footer. Now it is time to start painting in some of the finer details. You'll tweak the text, add an image with a border to the content area, and use definition lists to provide the hooks for the sidebar pod styles.

For this tutorial, you can use the work you completed in the last installment of this series, or you can use the starter site that is in the download folder that is included with this article. There is also a completed site that you can use to compare your work against should you develop any problems.

The Developing a CSS Starter Page Series:
Chicago: Developing a CSS Starter Page - Part 1
Chicago: Developing a CSS Starter Page - Part 2
Chicago: Developing a CSS Starter Page - Part 3
Chicago: Developing a CSS Starter Page - Part 4
Chicago: Developing a CSS Starter Page - Part 5

Chicago: Developing a CSS Starter Page Part Three
by Sheri German - 20-Feb-08
Reader Level:

In the first two parts of the Chicago CSS Starter Page series, you created a comp for the design we are naming after the city of Chicago. You analyzed the graphics in relation to the fixed-width, two-column, centered layout with header and footer CSS Starter Page, and developed a slicing strategy. Finally, you exported the graphics to the defined Chicago site. You should now have the following documents in the site folder:

mockup.html, the XHML page
main.css, the external style sheet
an images folder with the exported graphics for the site

In this third part of the series, you will apply the exported graphics to the appropriate page areas, using the CSS Starter Page as your launching pad. The beauty of using a CSS Starter Page is that all of the basic structure is coded for you. The floated column, the clearing element, the centering of the layout, and other generic features are in place. All you have to do is tweak the design to suit your taste.

The Developing a CSS Starter Page Series:
Chicago: Developing a CSS Starter Page - Part 1
Chicago: Developing a CSS Starter Page - Part 2
Chicago: Developing a CSS Starter Page - Part 3
Chicago: Developing a CSS Starter Page - Part 4
Chicago: Developing a CSS Starter Page - Part 5

Chicago: Developing a CSS Starter Page Part Two
by Sheri German - 12-Feb-08
Reader Level:

In Part One of the Chicago CSS Starter Page series, you defined a Dreamweaver site and created a Fireworks composite of the layout from a template PNG that corresponded with the fixed-width, two-column, left sidebar with header and footer CSS Starter Page.

In this second tutorial in the series, you will analyze the composite document to determine slicing strategies, set the optimization format for each slice, and export the resulting images to your defined Chicago site.

Approximate download size: 2.3MB

The Developing a CSS Starter Page Series:
Chicago: Developing a CSS Starter Page - Part 1
Chicago: Developing a CSS Starter Page - Part 2
Chicago: Developing a CSS Starter Page - Part 3
Chicago: Developing a CSS Starter Page - Part 4
Chicago: Developing a CSS Starter Page - Part 5

Chicago: Developing a CSS Starter Page - Part One
by Sheri German - 01-Feb-08
Reader Level:

The CSS Starter Pages are an invaluable addition to the CSS toolset in Dreamweaver CS3. With well over thirty different layout types from which to choose, you're able to rapidly develop page designs, free from the onerous task of having to build the underlying structure from scratch.

You need some knowledge to modify them, however. They do not include navigation schemes, nor do they include any bells and whistles, such as sidebar pods.

In this series you'll modify the two-column, fixed-width, left-sidebar, header and footer CSS Starter Page by adding a horizontal button navigation scheme as well as definition list-based pods. You'll use a Fireworks graphical representation of the layout to develop the graphics for a design we'll call Chicago.

In the first part of this tutorial series, you will select a CSS Starter Page, define the Chicago Dreamweaver site, and develop the graphics in Fireworks.

CSS Starter Page Chicago

The Developing a CSS Starter Page Series:
Chicago: Developing a CSS Starter Page - Part 1
Chicago: Developing a CSS Starter Page - Part 2
Chicago: Developing a CSS Starter Page - Part 3
Chicago: Developing a CSS Starter Page - Part 4
Chicago: Developing a CSS Starter Page - Part 5

CMX JumpStart: Stirling
by Adrian Senior - 24-Jan-08
Reader Level:

The Stirling JumpStart is based around the popular Playa Blanca JumpStart, with one or two subtle enhancements that will allow you to easily flip the design from a two-column layout to a three-column layout on a page-by-page basis.

Introducing CMX JumpStart Stirling Free!
by Sheri German - 24-Jan-08
Reader Level:

CMX JumpStart Stirling, a centered, fixed-width layout with a header, is based upon the popular Playa Blanca JumpStart. However, it has some intriguing enhancements, the most notable of which is the use of descendant selectors to flip the design from a two-column layout to a three-column layout on a page-by-page basis. Stirling also positions the main structure in a different way than Playa Blanca in that all of the columns are floated to achieve the design layout. The navigation in the left hand column, on the other hand, is switched to an AP div for older versions of IE in order to enable the bleed into the main content area from the page marker. Of course Stirling meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements.

Design Your Own Custom CMX CSS Course - Part Two Free!
by Sheri German - 09-Jan-08
Reader Level:

On Jan. 4, 2007, we offered a compilation of our CSS articles and tutorials in the article Design Your Own Custom CMX CSS Course. Its purpose was to make it easier to find the ever-growing number of web standards related articles and tutorials on Community MX.

In the year since the CSS course publication, CMX authors have written almost a hundred more CSS and accessibility related articles, tutorials, technique updates, and extensions. Clearly it is time for the sequel to the first CSS course.

Simple Server-Side Form Validation
by Adrian Senior - 02-Jan-08
Reader Level:

Setting up a simple custom server-side form validation is a straightforward process and has the advantage over JavaScript in that it cannot be turned off by the user in order to override your validation.

In this tutorial, we will look at how we can use a combination of ColdFusion, JavaScript and CSS to provide an interactive form validating process. Although we do use a little JavaScript in this process it does not have a bearing on the validation process and is used only to enhance the messaging that is passed to the user.

CSS Problems and Fixes: Vertical List Navigation - Part 3
by Adrian Senior - 12-Dec-07
Reader Level:

In the final part of this series we will look at how you can use borders set on the LI and UL elements to provide a nice finish to your navigation list.

The CSS Problems and Fixes Series:
Css Problems and Fixes: Vertical List Navigation - Part 1
CSS Problems and Fixes: Vertical List Navigation - Part 2
CSS Problems and Fixes: Vertical List Navigation - Part 3

CSS Problems and Fixes: Vertical List Navigation - Part 2
by Adrian Senior - 06-Dec-07
Reader Level:

In this tutorial we will continue to build our navigation list with the use of Conditionally Commented CSS files where appropriate. We will look at how we can filter specific values for specific versions of IE from within a single style sheet and put this to good affect to fix a problem in an older version of IE.

The CSS Problems and Fixes Series:
Css Problems and Fixes: Vertical List Navigation - Part 1
CSS Problems and Fixes: Vertical List Navigation - Part 2
CSS Problems and Fixes: Vertical List Navigation - Part 3

JumpStarts Fix: IE7 Zoom Body Background Image Bug Free!
by Adrian Senior - 03-Dec-07
Reader Level:

This is a fix for all JumpStarts [and any other web page design] that use background images set against the body tag.

The zoom bug only exists in IE7 and therefore the fix is only required for IE7. The bug manifests itself when the keyboard short-cut ctrl + + is used to zoom the web page, this is very different to altering text size in IE7 via the view menu.

CSS Problems and Fixes: Vertical List Navigation - Part 1
by Adrian Senior - 30-Nov-07
Reader Level:

Producing unordered lists for site navigation is without doubt the favoured method for most designers/developers. However, the method isn't without its problems.

This article will look at the common problems you will come up against and you will learn how you can create navigation lists that display correctly from browser to browser.

The CSS Problems and Fixes Series:
Css Problems and Fixes: Vertical List Navigation - Part 1
CSS Problems and Fixes: Vertical List Navigation - Part 2
CSS Problems and Fixes: Vertical List Navigation - Part 3

Quick Shot - Using CSS to Create a Scrolling Content Area - The Text Version Free!
by Jim Babbage - 26-Nov-07
Reader Level:

Adding a scrolling region to your pages is pretty easy using CSS and DIV's, as we saw in my recent video tutorial. Having received a couple subscriber requests, though, I decided to make a simple written version of this process for our CMX Quick Shot series.

Using CSS to Create a Scrolling Content Area
by Jim Babbage - 13-Nov-07
Reader Level:

Sometimes, CSS makes things so easy you have to smile. Such was the case when several of my students posed the question, "How can I make a long page of content fit in a short area on my web page?"

In a few quick steps, I demonstrated how to set up a generic div to act as a scrollable content area. They were surprised (and relieved) the process was so quick and easy. The following video shows the steps I took to create such a scrollable area within a web site mock up.

Approximate download size: 9.8MB

Honolulu - Developing a CSS Starter Page: Part Three
by Sheri German - 12-Nov-07
Reader Level:

In this last part of the Developing a CSS Starter Page series, you will add the navigation scheme and polish the text styles for Honolulu. You'll order the CSS rules to make them easier to edit and read. Finally, you'll add special Internet Explorer only styles and put them into a separate style sheet that you'll reference from within Conditional Comments.

This tutorial includes a starter folder with everything that you coded into Honolulu in part two of this series. You'll also find a completed Honolulu project that you can use for troubleshooting problems in your own work.

The Honolulu - Developing a CSS Starter Page Series:
Honolulu - Developing a CSS Starter Page: Part 1
Honolulu - Developing a CSS Starter Page: Part 2
Honolulu - Developing a CSS Starter Page: Part 3

Quick Shot - Fixed Background Image Free!
by Paul Davis - 07-Nov-07
Reader Level:

Quick shot for the CSS on fixed background images.

Styling Skip Nav Links, Revisited
by Zoe Gillenwater - 05-Nov-07
Reader Level:

In Using Skip Nav Links, you learned why skip navigation links are important for the accessibility of your web pages, as well as how to implement them. In this follow-up tutorial, you'll learn how to style your skip nav links using CSS to hide them from sighted users. This was previously covered in Styling Skip Nav Links, but this tutorial presents an alternate technique that is likely to be preferred by more people. However, since there is nothing wrong with the original technique, we've chosen not to update and replace the old tutorial, but simply present a new one.

It's not necessary to read both Styling Skip Nav Links tutorials, as they both include the same background information, rather than one building on the next. If you've already read the earlier tutorial, simply skip past the background information to the description of the new CSS. If you haven't read the earlier tutorial, there's no need to — this one contains all the information you need to implement a hidden skip nav link. Do, however, read Using Skip Nav Links as a good introduction for why and how skip nav links work.

Before reading this tutorial, please keep in mind that hiding skip nav links is not recommended because it renders them useless to some of the users they are supposed to benefit. If you can, leave your skip nav link visible to help as many people as possible with it. However, I know that some clients may insist that the link be hidden, so I will show you how to hide your skip nav links in a variety of ways. I'll start out with the least accessible methods and move to the best, finishing with a method that can return the usefulness of your hidden skip nav links to keyboard users.

CMX JumpStart: Playa Blanca
by Adrian Senior - 01-Nov-07
Reader Level:

Playa Blanca is a two column fixed width design that uses valid XHTML 1.0 and CSS 2.1 markup and follows WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design you may wish to use it for.

The colours in Playa Blanca have been used to reflect the sunshine and the many wonderful volcanic shades that can be found on the island. I hope you like Playa Blanca and it serves you well for future work.

Approximate download size: 1.8MB

Introducing CMX JumpStart: Playa Blanca Free!
by Sheri German - 01-Nov-07
Reader Level:

I admit it: this JumpStart city necessitated that I do a little geography lesson. Adrian Senior, creator of the latest CMX JumpStart Playa Blanca gave me clues to googling for Playa Blanca information in the introduction to his article:

While not exactly a city, Playa Blanca is a beautiful town that can be found on the southern tip of Lanzarote. Lanzarote is one of a group of small volcanic islands that despite sitting off the African coast come under Spanish sovereignty.

All right! A beautiful beach resort that brought me back to my summer trip in Hawaii. Now on to the latest JumpStart....Playa Blanca is a centered, two-column, fixed-width layout with header and footer, but it is a more complex variation of that common layout type. It uses a series of nested divs that create the illusion of the secondary navigation effect that bleeds the appropriate button into the related content region. Of course Playa Blanca meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements.

Honolulu - Developing a CSS Starter Page: Part Two
by Sheri German - 17-Oct-07
Reader Level:

In the first part of the CSS Starter Page series, you developed a Fireworks composite to use with the two-column, fixed-width, right sidebar with header and footer CSS starter page. In this tutorial, you will slice the composite, export the slices, and apply the graphics to either the CSS or XHTML document, depending on whether its purpose is presentation or content.

In this tutorial you will learn the following skills:

Use different slicing methods
Analyze a composite for creating slices that are most effective in a CSS based layout
Set export options for a CSS based layout
Apply background images to the various starter page divs
Determine which graphics should be in the CSS and which graphics should go into the XHTML page

Approximate download size: 1.8MB

The Honolulu - Developing a CSS Starter Page Series:
Honolulu - Developing a CSS Starter Page: Part 1
Honolulu - Developing a CSS Starter Page: Part 2
Honolulu - Developing a CSS Starter Page: Part 3 Coming Soon

Taking Madrid to Print Free!
by Adrian Senior - 16-Oct-07
Reader Level:

Perhaps the most common down-fall when designing for print is to overdo things. You need to remember that you are creating a style sheet that will present your information to your users in a printed format.

There is no need whatsoever to redesign or recreate your web site, it is simply the information that we want to provide and it is the information that your users are interested in.

Honolulu - Developing a CSS Starter Page: Part One
by Sheri German - 01-Oct-07
Reader Level:

The CSS Starter Pages are an invaluable addition to the CSS toolset in Dreamweaver CS3. With well over thirty different layout types from which to choose, you'll be able to rapidly develop page designs, free from the onerous task of having to build the underlying structure from scratch.

In this two-part tutorial you'll learn to take advantage of this feature as you modify the two-column, fixed-width, right-sidebar, header and footer layout. You'll use a Fireworks graphical representation of the layout to develop the graphics for a design we'll call Honolulu.

Approximate download size: 1.5MB

The Honolulu - Developing a CSS Starter Page Series:
Honolulu - Developing a CSS Starter Page: Part 1
Honolulu - Developing a CSS Starter Page: Part 2
Honolulu - Developing a CSS Starter Page: Part 3 Coming Soon

CMX JumpStart Madrid
by Adrian Senior - 20-Sep-07
Reader Level:

The latest CMX JumpStart follows the same city theme, but this time you are magically transported across the continents to Europe and the beautiful city of Madrid, Spain.

The Madrid JumpsStart is an elastic three-column layout that incorporates the use of header and footer divs. Elastic layouts are a little different than liquid layouts and are perhaps a little more awkward to work with. Not to worry: we'll be exploring the intricacies of working with an elastic layout and you'll soon be in a position to start modifying Madrid for your own ends.

The Madrid JumpStart contains all source files that were generated in its creation, from the CSS files, to the PNGs and of course the XHTML code that lies at the heart of the design. Madrid meets the W3C standards for CSS and XHTML as well as the WAI accessibilty requirements.

Approximate download size: 2MB

Introducing CMX JumpStart Madrid Free!
by Sheri German - 20-Sep-07
Reader Level:

Madrid, Spain, capital of Spain and one of Europe's major political and financial centers, is home to some of the most captivating museums and cultural events in the world. Like the atmosphere that pervades the city, we are pleased to introduce the equally warm and vibrant CMX JumpStart Madrid!

Madrid is a three-column, elastic layout that includes a background image in the content region that uses the background attachment property set to a value of fixed, an expandable header region, and a dual navigation system. The main navigation consists of an inline unordered list at the top of the design, and vertical sub navigation buttons in the left column. As with all the CMX JumpStarts, Madrid meets the W3C standards for CSS and XHTML, as well as for WAI and 508 accessibility.

Positioning Outside The Box - Part Two
by John Gallant,Holly Bergevin - 31-Aug-07
Reader Level:

In Part One of this series we showed how to move boxes outside a parent element via absolute positioning. Now we present an alternate method for the cases where the first method doesn't work or happens to have difficulties of some kind. This method also works with fixed position boxes.

It's a neat trick all on its own, and just might come in handy some day when you are faced with a difficult layout situation. At least that's the general idea!

The Positioning Outside the Box Series:
Positioning Outside the Box - Part One
Positioning Outside the Box - Part Two

Introducing CMX JumpStart Palm Springs Free!
by Sheri German - 16-Aug-07
Reader Level:

Palm Springs, California, a desert city that is about 110 miles east of Los Angeles, is home to some of the most famous golf courses in the country. With that in mind, we have a new JumpStart that should especially appeal to all the golf fans among us. Welcome to CMX JumpStart Palm Springs!

Palm Springs is a three-column, fixed-width layout that includes a dual navigation system. The main navigation consists of horizontal tabs at the top of the design, and vertical sub navigation buttons in the left column. The design also features pre-prepared login and subscribe form layout elements. As with all the CMX JumpStarts, Palm Springs meets the W3C standards for CSS and XHTML, as well as for WAI and 508 accessibility.

CMX JumpStart: Palm Springs
by Adrian Senior - 16-Aug-07
Reader Level:

Palm Springs is a three-column fixed-width layout that incorporates a dual navigation system consisting of a horizontal tab section at the top of the design and a left column vertical sub navigation set. The design includes a pre-prepared log in form, layout elements and a subscribe form layout in the right hand column. As always the JumpStart contains all source files that were generated in its creation, from the CSS files, to the PNGs and of course the XHTML code that lies at the heart of the design. Palm Springs meets the W3C standards for CSS and XHTML as well as the WAI accessibilty requirements.

Approximate download size: 2.3MB

CSS Cheat Sheet: Inheritance, Cascade, Specificity Free!
by Zoe Gillenwater - 09-Aug-07
Reader Level:

Even seasoned CSS developers need a quick refresher course in CSS concepts and techniques from time to time. This CSS Cheat Sheet is designed for just that need. Use it as a reference on topics that you've already learned about in-depth but need a few reminders on. If you're still a beginner to CSS, use it to learn the nuts and bolts of working with CSS, then use our other articles, listed at the end of this one, to extend your learning and practice your new skills.

This Cheat Sheet reviews how the fundamental CSS concepts of inheritance, cascading and specificity work. It also contains a printable PDF illustration of the rules of the cascade that you can download and keep handy for continued reference.

The Dreamweaver Web Standards Lesson Plan Series - Part Eleven
by Sheri German - 31-Jul-07
Reader Level:

Beware the Properties Inspector. It is after you create your CSS based layout and then troubleshoot and validate its code that your vigilance should really begin. When you start adding content, whether as images, text, or from Word and Excel documents, you can lose that clean code and introduce deprecated elements into the page.

In this article, you will learn what to use and what to avoid on the Properties Inspector when it is set to format text, images, or tables. You will learn the meaning of deprecated elements and attributes, why you should avoid formatting text with the Properties Inspector, and when deprecated code might cause validation to fail. You will also learn about the CSS problem of the cellspacing attribute, the use of target="_blank", and some legacy buttons such as "Low Source" on the Properties Inspector.

The Dreamweaver Web Standards Lesson Plan Series:
The Dreamweaver Web Standards Lesson Plan Series - Part 1
The Dreamweaver Web Standards Lesson Plan Series - Part 2
The Dreamweaver Web Standards Lesson Plan Series - Part 3
The Dreamweaver Web Standards Lesson Plan Series - Part 4
The Dreamweaver Web Standards Lesson Plan Series - Part 5
The Dreamweaver Web Standards Lesson Plan Series - Part 6
The Dreamweaver Web Standards Lesson Plan Series - Part 7
The Dreamweaver Web Standards Lesson Plan Series - Part 8
The Dreamweaver Web Standards Lesson Plan Series - Part 9
The Dreamweaver Web Standards Lesson Plan Series - Part 10
The Dreamweaver Web Standards Lesson Plan Series - Part 11
The Dreamweaver Web Standards Lesson Plan Series - Part 12
The Dreamweaver Web Standards Lesson Plan Series - Part 13
The Dreamweaver Web Standards Lesson Plan Series - Part 14 Coming Soon

Positioning Outside The Box - Part One
by John Gallant,Holly Bergevin - 27-Jul-07
Reader Level:

With this tutorial, it's time to step up to the next level in Absolute Positioning. Allow us to by your guides for several of the steps. We'll flip a positioning problem inside out and upside down too, revealing a backdoor solution to a confining CSS question, precisely positioning child elements to the outside of their parent element. You're going to like this!

The Positioning Outside the Box Series:
Positioning Outside the Box - Part One
Positioning Outside the Box - Part Two

Cross-Browser Form Legend Positioning - Part 2
by Zoe Gillenwater - 27-Jul-07
Reader Level:

In Cross Browser Form Legends Positioning - Part 1, you learned that positioning a legend differently from the browser default display of halfway in and halfway out of the fieldset is not as easy as it should be! However, with a little bit of extra markup and minimal CSS rules, we were able to position a legend completely outside of its fieldset. In this tutorial, we'll move the legend completely inside the fieldset. There are a variety of ways to accomplish this effect, three of which will be fully explained and demonstrated here.

While the first technique should be all that you need in most cases, there may be cases, depending on your content and precise formatting needs, where the others are more cross-browser compatible or efficient to implement. Plus, learning how to implement the other techniques provides a good lesson in the versatility and flexibility of CSS, valuable practice working with negative margins, and perhaps just a way that you find easier to work with. That's one of the great things about CSS: there are often no right answers and you can do whatever variation makes the most sense to you.

This tutorial picks up right where Part 1 left off, so please make sure you are familiar with that tutorial before starting work on this one.

The Dreamweaver Web Standards Lesson Plan Series - Part Ten
by Sheri German - 20-Jul-07
Reader Level:

In Part Ten of the Dreamweaver Web Standards Lesson Plan series, you will complete the bug squashing work you started in part nine, as well as learn some "best practices" for feeding Internet Explorer the unique styles it needs. Here is what you will do in this tutorial:

Identify the 3-pixel text jog bug
Use the CSS Advisor to find solutions to fix the bug
Create an Internet Explorer specific style sheet for all IE bugs from lessons nine and ten
Use Conditional Comments to feed the style sheet to Internet Explorer only

Making Positioned Elements Obey the Flow - Part Two
by John Gallant,Holly Bergevin - 17-Jul-07
Reader Level:

Auto-positioning is very interesting, but is it any good for real web pages? Follow along as we employ auto-positioning to achieve at least one useful design goal, fixed column headings. Put on your thinking cap because this stuff is tricky!

Cross-Browser Form Legend Positioning - Part 1
by Zoe Gillenwater - 16-Jul-07
Reader Level:

In "The IE Fieldset Background Color Bleed Bug," you learned how to use absolute positioning on a form's legend element to work around Internet Explorer's bug allowing background colors on fieldsets to bleed out of their tops and behind their legends. In that tutorial, the absolute positioning was hidden from all browsers other than Internet Explorer (IE), and the legend's position remained halfway over the top border of the fieldset, emulating all browsers' default display. But perhaps that gave you an idea: what if you could use absolute positioning in all browsers to move the legend to a different location altogether, like all the way out of the fieldset or all the way in it, or even off to its side? These types of effects are possible, but unfortunately not as easy as they sound (and perhaps should be). IE once again poses a problem, and, surprisingly, so does Firefox.

In this tutorial, you'll learn how to work around these bugs and shortcomings in order to successfully position the legend element outside its fieldset across a variety of modern browsers. Part 2 of this tutorial will cover positioning the legend inside the fieldset.

You don't need to have read "The IE Fieldset Background Color Bleed Bug" to work through this tutorial, but it is helpful. All that's really required, however, is a good understanding of document flow, positioning, and proper form markup. See the abstract of "The IE Fieldset Background Color Bleed Bug" for references to some helpful articles to read on these subjects if you need to get up to speed.

Introducing CMX JumpStart Washington, D.C. Free!
by Sheri German - 12-Jul-07
Reader Level:

Washington, D.C. is, of course, significant for being the capital of the United States, but it has also been my "hometown" since I was seventeen years old. I have lived in the city or one of its suburbs for all of my adult life. It is with the greatest pleasure, therefore, that I introduce the newest JumpStart, designed and coded by Adrian Senior, CMX JumpStart Washington, D.C.

Washington, D.C. is a two-column, fixed-width design that employs a horizontal band method for the header and footer areas. It has a main navigation level that uses the popular tabbed sliding doors technique. CSS based buttons on the left form the secondary navigation. Washington, D.C. meets the standards for CSS, XHTML and Accessibility, thus ensuring that you have a good solid layout on which to base a client site.

CMX JumpStart: Washington, D.C.
by Adrian Senior - 12-Jul-07
Reader Level:

The Washington, D.C. JumpsStart is a two-column fixed-width design. It uses the sliding doors method for presenting the navigation as a nice horizontal tabbed menu, which acts as a main navigation for the page-level vertical sub-navigation set.

Washington, D.C. makes good use of background images and, as always, meets the standards for CSS, XHTML and Accessibility, thus ensuring you have a good solid layout in which to begin your conversion to a client site.

Approximate download size: 2.6MB

The Dreamweaver Web Standards Lesson Plan Series Part Nine
by Sheri German - 26-Jun-07
Reader Level:

In Part Nine of the Dreamweaver Web Standards Lesson Plan series, you are going to move away from novice status as you delve into more complex CSS topics. In this tutorial, you are going to add more accessibility to the page by modifying the navigation buttons and putting them into an unordered list. This will launch you into the world of browser bug squashing as you work to resolve the Internet Explorer issues caused by links in lists.

Here is what you will do in part nine:

Take the links in the left column out of their paragraph formatting, and put them into a bulleted list in order to group them.
Change the name of a rule in the CSS Styles panel with the new CS3 CSS management features.
Identify possible CSS browser bugs by using the Dreamweaver CS3 Check Page feature.
Fix the problems by viewing and choosing solutions from the new Adobe CSS Advisor.
Implement the "hacks" and solutions that will correct the problems.

Don't have CS3? You can still play along at home - look for alternative steps along the way.

This tutorial is a two-parter within the series. You'll find a list of what you will do in this tutorial's sequel, Part Ten, at the end of this article.

Creating a Table-less Horizontal Looper in ColdFusion
by Tom Muck - 19-Jun-07
Reader Level:

Dreamweaver has a Repeat Region server behavior that loops through your data and allows you to display it in a vertical or horizontal manner. If you want to display the data in a grid pattern, however, it requires a little more effort. Typically, a Horizontal Looper extension or code is used to create a table and put your individual data sections in a table cell. In this tutorial I'll show how to do that using <div> tags and CSS without tables.

This is a version of an article I did for PHP—but for ColdFusion instead. For this tutorial I'll assume you know how to use your database tools to create and manage databases, and how to create connections for ColdFusion.

The IE Fieldset Background Color Bleed Bug Free!
by Zoe Gillenwater - 19-Jun-07
Reader Level:

When it comes to changing text styles in forms, there's little you can't do. As soon as you attempt extending your custom styles into the realm of background colors, borders, and layout, however, things can get difficult. Styling fieldsets and legends are among the more difficult form elements to style because they come laden with a good deal of default browser styling, as well as a few bugs.

In this tutorial, we'll focus on one of the most common fieldset and legend styling frustrations: the fieldset background color bleed bug in Internet Explorer, where the background color of the fieldset extends outside the top border of the fieldset. This bug occurs any and every time you try to give a fieldset a background color, and it affects even the latest version of IE, 7. This tutorial will show you how to fix the bug using a couple additional CSS rules and no changes to markup or hacks.

This tutorial assumes you're already familiar with the building blocks of forms and how to use them correctly to build accessible forms. If you do not have a good understanding of what fieldsets and legends are and how to use them, please see Tricia Littlefield's video tutorial Accessible Forms with Dreamweaver, which covers not only those elements but all the standard form components. You'll also need to have a good understanding of document flow and positioning for this tutorial. For a great introduction to these concepts, see Flowing and Positioning: Two Page Models -Revised for IE7 by Holly Bergevin and John Gallant.

Making Positioned Elements Obey the Flow - Part One Free!
by John Gallant,Holly Bergevin - 29-May-07
Reader Level:

This series will cover the use of 'auto-positioning' (such as {left: auto;}) and the flow to control the placement of absolute and fixed positioned elements. It's a CSS topic that affords advanced functionality for your layouts. Take a chance and join us!

It is strongly recommended that before reading this article that you read, or have read, Absolute Positioning and the Top Property

Flowing and Positioning: Two Page Models -Revised for IE7
by John Gallant,Holly Bergevin - 25-May-07
Reader Level:

In seeking to broaden your web design horizons beyond the use of tables for laying out pages, you may have come across terms such as 'Normal flow' and 'CSS Positioning.' However, you may be slightly hazy concerning what these terms actually mean. If so, it's time to learn some basics on the ways web pages are visually constructed on the screen by current browsers. In this article we'll look at 'the flow' of a web page, and briefly cover each of four position property values, static, absolute, relative and fixed. We'll also talk about some of the bugs you may encounter. When we're done, you should have a much better grasp on the topic at hand.

This article is an update (May 2007) to the original article, with special attention paid to the IE7 browser.

CMX JumpStart: Tahoe
by Zoe Gillenwater - 18-May-07
Reader Level:

CMX JumpStart Vegas, created in the summer of 2005 by Stephanie Sullivan and Linda Rathgeber, has proven to be a very popular JumpStart. And with good reason: it's a clean, two column design that adapts well to a variety of subject matter, content types, and graphic identities. However, some CMX subscribers were interested in using it as a liquid or fluid design, meaning the layout's overall width would be determined by the width of the user's browser window, instead of a rigid pixel-based width assigned in the style sheet by the designer.

Out of this idea the CMX JumpStart Tahoe was born. Tahoe, the place, shares many similarities with Vegas, the place: both located in Nevada, they are centers of entertainment known for their casinos, nightlife, and incredibly cheap buffets. But Tahoe has something Vegas doesn't: a whole bunch of water in the form of the beautiful Lake Tahoe. Thus, the tagline for the Tahoe JumpStart: "Like Vegas, only fluid."

As do all our JumpStarts, Tahoe uses valid XHTML 1.0 and CSS 2.1 markup and follows WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design you may wish to use it for. Both pages from Vegas, a home page and contact page, are included in Tahoe as well. They feature a two column, centered, fluid layout that is constrained to your desired range of widths by using a minimum and maximum width. The layout is constructed of floats and utilizes a faux column technique. We provide an extensively commented style sheet so you know what each rule does and how to change it to suit your design, as well as an uncommented version for deployment on your site with smaller file size.

This JumpStart has been designed to teach you about the logistics of designing a fluid layout, as well as how to convert an existing fixed-width design into a fluid design. All of the files for Tahoe — the Fireworks PNG, XHTML pages, and style sheets — are simply modifications of those used in Vegas as an exercise to demonstrate how an entire site design can be radically transformed with very little modification to its XHTML structure. However, you need not be familiar with Vegas to use Tahoe. As with all our JumpStarts, each technique or component of Tahoe is fully explained in either this article or one of the 14 tutorials we've included in your download.

Approximate download size: 10MB

Introducing CMX JumpStart Tahoe Free!
by Sheri German - 18-May-07
Reader Level:

If you've been around a while, you may remember the CMX JumpStart Vegas that was released in the summer of 2005 by Stephanie Sullivan and Linda Rathgeber. As one of our most popular JumpStarts, it inspired some CMX subscribers to request a fluid version of this fixed-width design. Zoe Gillenwater, one of our great CSS gurus, happily complied with our newest CMX JumpStart Tahoe, a JumpStart modification. Tahoe, like Vegas, is located in Nevada, and because it shares many of the same kinds of entertainment centers, seems like a fitting city for a permutation of the Vegas design. And Tahoe has one thing that Vegas doesn't - the beautiful Lake Tahoe that gives literal meaning to the tagline in the Tahoe JumpStart: "Like Vegas, only fluid."

Tahoe uses valid XHTML 1.0 and CSS 2.1 markup and follows WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design you may wish to use it for. Tahoe is a two column elastic layout, which means it expands in width based on the user's font size. This allows the overall proportions of the page to stay intact regardless of the visitor's window or font size. The design also features a subhead area, skip link, a styled list as a navigation menu, and floated images.

Create a Teaser Thumbnail List Using CSS: Part 4 - **Updated**
by Zoe Gillenwater - 10-May-07
Reader Level:

This tutorial is the fourth part in a series on creating "teaser thumbnail lists" with CSS. Teaser thumbnail lists are those lists of items made up of a title, short description, and thumbnail. They're often used to provide short teasers that link to more information about the products, articles, or sections of the site being listed.

In Parts 1, 2, and 3, you've learned how to build teaser thumbnail lists from both definition lists and unordered lists and learned a couple different ways to style them. However, so far all of the lists created have been fixed to a specific pixel-based width.

In this tutorial, you'll learn how to create a teaser thumbnail list that can expand and contract in width so that it can be used in fluid or liquid sites. As with the other lists, we'll use floats to accomplish the layout.

This is an updated version of the original tutorial published in June 2006. The CSS used to create the teaser thumbnail list was slightly modified in earlier parts of this series to allow the list to accept text that is very short or images that are very tall without overlaps occuring. This tutorial reflects that updated CSS carried over from the earlier parts, although the basic techniques for this tutorial have not changed.

The Updated Create a Teaser Thumbnail List Using CSS Series:
Create a Teaser Thumbnail List Using CSS: Part 1 - **Updated**
Create a Teaser Thumbnail List Using CSS: Part 2 - **Updated**
Create a Teaser Thumbnail List Using CSS: Part 3 - **Updated**
Create a Teaser Thumbnail List Using CSS: Part 4 - **Updated**

Create a Teaser Thumbnail List Using CSS: Part 3 - **Updated**
by Zoe Gillenwater - 03-May-07
Reader Level:

This tutorial is the third part in a series on creating "teaser thumbnail lists" with CSS. Teaser thumbnail lists are those lists of items made up of a title, short description, and thumbnail. They're often used to provide short teasers that link to more information about the products, articles, or sections of the site being listed. In Parts 1 and 2, you've learned how to build teaser thumbnail lists from both definition lists and unordered lists and learned a couple different ways to style them.

In this tutorial, you'll learn how to create a version of the teaser thumbnail list that is not seen as often as the versions we have already created: the horizontal version, where each item follows the next to its right instead of below. We'll give the horizontal list a unique style from the list created in Part 2 to illustrate the various styling possibilities that exist for lists like these. Without touching the markup and only editing the CSS slightly, you can create lists that match the look and feel of your site easily.

This is an updated version of the original tutorial published in April 2006. The CSS used to create the teaser thumbnail lists in the original Parts 1 and 2 was slightly modified to allow the lists to accept text that is very short or images that are very tall without overlaps occurring. Part 3 has been updated accordingly to reflect the updated CSS from Parts 1 and 2, though the method in this part has not had to change, since the original did not suffer from overlaps.

The Updated Create a Teaser Thumbnail List Using CSS Series:
Create a Teaser Thumbnail List Using CSS: Part 1 - **Updated**
Create a Teaser Thumbnail List Using CSS: Part 2 - **Updated**
Create a Teaser Thumbnail List Using CSS: Part 3 - **Updated**
Create a Teaser Thumbnail List Using CSS: Part 4 - **Updated**

Dreamweaver CS3 - CSS Management
by Chaz Chumley - 27-Apr-07
Reader Level:

We have all been awaiting the new Adobe CS3 products to come out, especially that of Dreamweaver CS3. There have been a lot of great improvements with this latest version in terms of Cascading Style Sheet management. Not to say that Dreamweaver 8 didn't display CSS particularly well, but we all know it had its shortcomings. However this newest version implements some great design flow tools when it comes to how most developers work with CSS.

We will be taking a look at converting inline styles to a CSS rule, reordering CSS rules and finally how to move embedded styles to an external style sheet all from the CSS Styles Panel or context menu.

Create a Teaser Thumbnail List Using CSS: Part 2 - **Updated**
by Zoe Gillenwater - 23-Apr-07
Reader Level:

"Teaser thumbnail lists" are those lists of items made up of a title, short description, and thumbnail. They're often used to provide short teasers that link to more information about the products, articles, or sections of the site being listed.

In Part 1, you learned how to structure the XHTML and CSS to create such a list, featuring a fixed-width, grid-like design, with the thumbnails aligned to the left and the title and description for each item sitting to the right. In this tutorial, you will learn how to restructure the XHTML in a way that offers even more styling possibilities, such as boxing in each item with background colors and borders. Once again, the resulting list is flexible, accessible, and built with a minimum of markup and CSS.

This updated version of the original tutorial, published in March 2006, includes slightly modified CSS to allow the list to accept text that is very short or images that are very tall without overlaps occuring. Fortunately, the CSS required for this enhancement is not significantly more than the CSS required for the first version, so even if you don't anticipate having short text or tall images, it's best to use this new version from now on.

The Updated Create a Teaser Thumbnail List Using CSS Series:
Create a Teaser Thumbnail List Using CSS: Part 1 - **Updated**
Create a Teaser Thumbnail List Using CSS: Part 2 - **Updated**
Create a Teaser Thumbnail List Using CSS: Part 3 - **Updated**
Create a Teaser Thumbnail List Using CSS: Part 4 - **Updated**

The Dreamweaver Web Standards Lesson Plan Series Part Six
by Sheri German - 17-Apr-07
Reader Level:

In lesson five of the Dreamweaver Web Standards series, you created a comp, or design prototype, of the Shakespeare layout. You then exported five images from the slices you drew in the comp.

In this part of the series, you'll use those exported images to set backgrounds on various regions of the layout. In the process, you will explore many of the options for setting background images. You will also learn fundamentals of div behavior that affect the display of background colors and images. Finally, you will work through exercises that guide you in modifying "CMX JumpStart Stratford-on-Avon" so that you can use it for your own projects.

Approximate download size: 960k

The Dreamweaver Web Standards Lesson Plan Series:
The Dreamweaver Web Standards Lesson Plan Series - Part 1
The Dreamweaver Web Standards Lesson Plan Series - Part 2
The Dreamweaver Web Standards Lesson Plan Series - Part 3
The Dreamweaver Web Standards Lesson Plan Series - Part 4
The Dreamweaver Web Standards Lesson Plan Series - Part 5
The Dreamweaver Web Standards Lesson Plan Series - Part 6
The Dreamweaver Web Standards Lesson Plan Series - Part 7
The Dreamweaver Web Standards Lesson Plan Series - Part 8
The Dreamweaver Web Standards Lesson Plan Series - Part 9
The Dreamweaver Web Standards Lesson Plan Series - Part 10
The Dreamweaver Web Standards Lesson Plan Series - Part 11
The Dreamweaver Web Standards Lesson Plan Series - Part 12
The Dreamweaver Web Standards Lesson Plan Series - Part 13
The Dreamweaver Web Standards Lesson Plan Series - Part 14 Coming Soon

Create a Teaser Thumbnail List Using CSS: Part 1 - **Updated** Free!
by Zoe Gillenwater - 16-Apr-07
Reader Level:

"Teaser thumbnail lists" are those lists of items made up of a title, short description, and thumbnail. They're often used to provide short teasers that link to more information about the products, articles, or sections of the site being listed. This tutorial will go over one way to structure the XHTML and CSS to create such a list that maximizes flexibility for the site owner and accessibility for the end user. The resulting list will feature a fixed-width, grid-like design, with the thumbnails aligned to the left and the title and description for each item sitting to the right. All with only 23 lines of CSS!

This updated version of the original tutorial, published in March 2006, includes slightly modified CSS to allow the list to accept text that is very short or images that are very tall without overlaps occuring. Fortunately, the CSS required for this enhancement is not significantly more than the CSS required for the first version, so even if you don't anticipate having short text or tall images, it's best to use this new version from now on.

The Updated Create a Teaser Thumbnail List Using CSS Series:
Create a Teaser Thumbnail List Using CSS: Part 1 - **Updated**
Create a Teaser Thumbnail List Using CSS: Part 2 - **Updated**
Create a Teaser Thumbnail List Using CSS: Part 3 - **Updated**
Create a Teaser Thumbnail List Using CSS: Part 4 - **Updated**

Understanding the New Dreamweaver CS3 CSS Layouts
by Stephanie Sullivan - 13-Apr-07
Reader Level:

Today, more designers and developers than ever are adopting web standards to deliver their content. One example is the migration from table-based layouts to cascading style sheets (CSS). And while the benefits of embracing web standards such as CSS include a more flexible and robust cross-browser site design, many people don’t have the time to learn brand new ways to get their work done.

Dreamweaver CS3 helps by offering CSS Layouts that not only get your page up and running quickly, they also help you learn by providing extensive inline comments in the code. Most site designs on the web can be categorized as one-, two-, or three-column layouts, each with a number of additional elements (such as headers, footers, etc.). Dreamweaver offers a comprehensive list of essential layout designs, which enable you to start using CSS with the click of the mouse.

In this article, we will discuss the CSS Layouts in Dreamweaver CS3, what they are, how to access them, and what to watch for as you utilize them in your projects.

CMX Internet Explorer Conditional Comment Extension
by Paul Davis - 12-Apr-07
Reader Level:

Rapidly put Internet Explorer conditional comments in your web pages without looking it up every time for the syntax. This extension will insert conditional comments for Internet Explorer in a couple of clicks!

How To Attack An Internet Explorer Display Bug -Revised for IE7 Free!
by John Gallant,Holly Bergevin - 11-Apr-07
Reader Level:

Many authors who desire to make the switch to tableless design can be brought up short when they encounter various browser bugs. Internet Explorer for Windows can present some significant challenges to this switch, exhibiting a variety of display problems. Although a full understanding of how IE "gets it wrong" may not be within reach for everyone, it is possible to get by with a few key bug fixing tools.

The original article was written with IE6 and lower browsers in mind, but there's a new player in the arena, IE7. While many of the display problems have been dealt with, this new browser may still need some special treatment.

So, we've revised, updated and rewritten this article, with a focus on how to bring IE7 along when it needs bug fixing like its older siblings. This is information you need to know!

Introducing CMX JumpStart Detroit Free!
by Sheri German - 05-Apr-07
Reader Level:

We are pleased to introduce our latest CMX JumpStart: Detroit. Created by Adrian "JoJo" Senior, it has all the trademarks of his designs: clean with no-fuss CSS, easy to modify, and always professional looking. This two-column, centered, fixed-width layout includes a shadowed, tapering background image on the main column that gives the effect of a raised platform for the content. Like all JumpStarts, Detroit uses valid XHTML 1.0 and CSS 2.1 markup and follows WAI and Section 508 accessibility guidelines.

CMX Jumpstart: Detroit
by Adrian Senior - 05-Apr-07
Reader Level:

Detroit is a two column design that uses background shadows created in the Fireworks to present the content as if it was sitting on a raised and tapering canvas.

As always there are a host of bundled tutorials that discuss each of the techniques used in great depth. I hope you enjoy Detroit and that it will become a useful addition to your design armory.

Create a Horizontal Band CSS Layout - Part 5
by Zoe Gillenwater - 03-Apr-07
Reader Level:

In Create a Horizontal Band CSS Layout - Part 4, you learned how to modify the widths of individual bands to differ from one another. This tutorial showed how you could use these techniques to mix fixed and fluid values for the various bands. One use for this is fixing the width of a navigation bar so that elements within it do not wrap to more than one line of text, either when the window is narrowed or the text size is larger than the default.

Before I go any further, let me state that many usability proponents, myself included, believe that not allowing navigation items to wrap is harming usability by forcing users to scroll to see all the navigation items, when it would serve the users better to allow them to wrap and be able to see all of them at once. Not allowing navigation items to wrap also raises the possibility that users will not notice the scrollbar and will never realize there are more items to choose from, at which point they may decide your site doesn't have what they want and leave. If you can get your client to see how this decision for the sake of design harms his or her business, and thus to allow you to make the more usable choice, that's great. However, I know it is not always possible to persuade clients to choose the best route, so I've written this tutorial on keeping navigation items from wrapping for the sake of real-world practicality.

This tutorial uses the same fluid layout built in Create a Horizontal Band CSS Layout - Part 3, but the techniques used in this article can be applied to any horizontal navigation bar you want to keep from wrapping.

The Create a Horizontal Band CSS Layout Series:
Create a Horizontal Band CSS Layout - Part 1
Create a Horizontal Band CSS Layout - Part 2
Create a Horizontal Band CSS Layout - Part 3
Create a Horizontal Band CSS Layout - Part 4
Create a Horizontal Band CSS Layout - Part 5

CS3 Sneak Preview: The CSS Panel Free!
by Adrian Senior - 28-Mar-07
Reader Level:

Not everyone can create the right CSS rules, in the right place, on the first try. To get things right, it’s often necessary to move, rename, or otherwise change the structure of your CSS. Additionally, many people like to introduce CSS changes incrementally to a site, first by getting the CSS working on a single page, and then working on the entire site. Others prefer to step back further and get the CSS working on a single element before trying to make it work for a whole page. The Manage CSS feature makes it easier for you to move CSS rules from document to document, from the head of a document to an external sheet, between external CSS files, and more. You can also convert inline CSS to CSS rules, and place them where you need them—just by dragging and dropping.

Methods for Testing in Multiple Versions of IE - **Updated** Free!
by Zoe Gillenwater - 22-Mar-07
Reader Level:

Internet Explorer 7 (IE), released in October 2006, greatly improves its CSS rendering capabilities. However, it's only available for Windows XP and Vista, so we still have to support IE 6 — and possibly IE 5.5 and 5.0, depending on your site's audience — for some time to come. Unfortunately, the integration of IE into the Windows operating system, and Microsoft's refusal to allow multiple versions of it to run at the same time, have made testing web sites in various versions of the ubiquitous browser difficult. There are, however, ways it can be done, and the advent of IE 7 has brought some new methods out for our consideration.

In this article I'll provide an overview of the current methods available for testing multiple versions of Windows IE and provide the pros and cons of each method so you can decide which suits you best.

Note: This article was originally written in late November 2006. Right after it was written, Microsoft released a free virtual machine image for Virtual PC, making it easier for developers to use the software. Thus, the section on Microsoft Virtual PC has been revised from the original, with other small changes throughout. My recommendations remain virtually (no pun intended) the same. You can view the original article here.

Fixed Position in IE7 - Part Eight - Making Allowances for IE6
by John Gallant,Holly Bergevin - 21-Mar-07
Reader Level:

In this last part of our series, we see what can be done to alter the code of our fixed positioning demo for IE6 and make that browser render our fixed popup in a way that it can handle, allowing a user to actually use the page and its contents.

We'll also wrap a few loose odds and ends while we're at it, and put a tail on this wild and crazy CSS fixed positioning series. Let's go!

The Fixed Position in IE7 Series:
Fixed Position in IE7 - Part One
Fixed Position in IE7 - Part Two
Fixed Position in IE7 - Part Three: Fixed Position and Older IE Versions
Fixed Position in IE7 - Part Four: Fixed Popups!
Fixed Position in IE7 - Part Five: Fixed Popups from Flowed Elements
Fixed Position in IE7 - Part Six: Tricky Popups!
Fixed Position in IE7 - Part Seven: A Hovered Fallback
Fixed Position in IE7 - Part Eight: Making Allowances for IE6

Create a Horizontal Band CSS Layout - Part 4
by Zoe Gillenwater - 13-Mar-07
Reader Level:

In the Create a Horizontal Band CSS Layout tutorial series, you've learned how to structure your XHTML and build your CSS to create a layout made up of stacked bands of color. In this tutorial, you'll learn how to allow the bands in either the fixed or fluid versions of the layout to vary from each other in width. You can even mix fixed and fluid within the same layout with the changes outlined in this tutorial.

The Create a Horizontal Band CSS Layout Series:
Create a Horizontal Band CSS Layout - Part 1
Create a Horizontal Band CSS Layout - Part 2
Create a Horizontal Band CSS Layout - Part 3
Create a Horizontal Band CSS Layout - Part 4
Create a Horizontal Band CSS Layout - Part 5

CSS Tricks: Using Descendant Selectors to Control the Number of Columns
by Stephanie Sullivan - 08-Mar-07
Reader Level:

Descendant selectors are powerful tools in your CSS toolbox. By learning to maximize their use, your code can be substantially decreased. The following tutorial walks you through a simple, yet elegant solution for using descendant selectors to control the number of columns in the layout on your X/HTML pages. This method can be used instead of optional regions in your Dreamweaver templates.

Create a Horizontal Band CSS Layout - Part 3
by Zoe Gillenwater - 26-Feb-07
Reader Level:

In Create a Horizontal Band CSS Layout - Part 1, you learned how to structure your XHTML and build your CSS to create a layout made up of stacked bands of color. In Part 2, you added background colors and images to the main content area. In this tutorial, you'll learn how to make the layout you've been working on fluid or liquid so that it adjusts to the width of the browser window. You'll also learn how to add a minimum and maximum width to restrict the fluidity to a range of widths.

This tutorial picks up right where Part 2 left off, so if you haven't read Parts 1 and 2 or it's been a while, make sure you go back and work through them or review as needed.

The Create a Horizontal Band CSS Layout Series:
Create a Horizontal Band CSS Layout - Part 1
Create a Horizontal Band CSS Layout - Part 2
Create a Horizontal Band CSS Layout - Part 3
Create a Horizontal Band CSS Layout - Part 4
Create a Horizontal Band CSS Layout - Part 5

Putting the Sting into the CMX San Francisco JumpStart
by Jim Babbage - 23-Feb-07
Reader Level:

I was recently contacted by a small, family run business who wished to update their website. They wanted to make some content changes and have the overall look of the site be more contemporary. Being a small business, their budget was limited as well. I took on the project, thinking that a CMX JumpStart would be the perfect solution.

I see many questions on our forums about the CMX JumpStarts and how to make them work for one's own specific needs. As you may be aware, the JumpStarts are designed and tested to work based on specific layout concepts - that's why we have so many and continue to create more.

But I'd like to share with you my own personal experience in customizing one of our recent JumpStarts: San Francisco. San Francisco is based on Gordon Mackay's CMX Design Element: Gold PNG file. My customizations include:

Fireworks PNG

Color alterations
Changing dimensions of the background image for the innerwrapper div
Altering export format of slices

CSS

Adjusting rules to change the position of the navigation
Adding a custom bullet image
Creating a secondary modified style sheet and web page for a pop up window requirement.

So what are you waiting for? Hop on that trolley and follow me from San Francisco to Sooke, British Columbia.

CMX JumpStart: Kansas City Free!
by Heidi Bautista - 20-Feb-07
Reader Level:

Welcome to the next design in the CMX JumpStarts series, Kansas City, located in the wide, open great plains of the U.S.

The Kansas City JumpStart is a two-column design based on Zoe Gillenwater’s Horizontal Band Layout. The content is centered and fixed-width. The bands of color behind the header, footer, and main navigation bar stretch across the entire browser giving the design a wide, open feeling. Much like driving through the miles and miles of wheat fields in Kansas.

As with all of our JumpStarts, Kansas City can be used in any way you wish, commercial or personal, and includes several tutorials, an extension, and source PNG.

Kansas City is structured to be as hack-free and straightforward as possible. So, if you've been looking for a smooth transition into using CSS for positioning as well as aesthetics, this may be just the JumpStart for you.

Kansas City JumpStart pages

Kansas City comes with a starter page and a nicely styled form page. Of course, both use valid XHTML 1.0 Transitional and CSS 2 markup and follow WAI and Section 508 accessibility guidelines making it ready for you to customize to suit your own requirements.

Using Background Images in a Horizontal Band Design Free!
by Sheri German - 20-Feb-07
Reader Level:

Zoe's part two of the Horizontal Band Layout series describes ways to set additional background images on various areas of the design. While Heidi Bautista's JumpStart Kansas City focuses on the layout that Zoe described in part one of her series, the design that I created as the companion site for the Graphic Design for the Web class that I am now teaching focuses on the techniques in part two. Taken together, these two free articles that we're offering on the day that Community MX reaches its second grand milestone should give you plenty of ideas about how to capitalize on the horizontal band layout technique.

Fixed Position in IE7 - Part Seven: A Hovered Fallback
by John Gallant,Holly Bergevin - 19-Feb-07
Reader Level:

In the last segment of this series we talked about how to use Javascript clicking to replace hovering when triggering our fixed position popup. The fallback for script-disabled browsers was to create a separate page duplicating the popup content and use a link to go there instead.

This time we will dispense with the duplicate page and just have CSS hovering be the fallback strategy. It sounds easy, and it is, more or less. Let's go!

The Fixed Position in IE7 Series:
Fixed Position in IE7 - Part One
Fixed Position in IE7 - Part Two
Fixed Position in IE7 - Part Three: Fixed Position and Older IE Versions
Fixed Position in IE7 - Part Four: Fixed Popups!
Fixed Position in IE7 - Part Five: Fixed Popups from Flowed Elements
Fixed Position in IE7 - Part Six: Tricky Popups!
Fixed Position in IE7 - Part Seven: A Hovered Fallback
Fixed Position in IE7 - Part Eight: Making Allowances for IE6

The Mobile Internet - Part 4: Text Elements
by Adrian Senior - 15-Feb-07
Reader Level:

In Part 4 of this series we will be taking a look at text elements and cross browser issues. We'll investigate how we can implement our CSS to provide our handheld users with the most consistent display we can.

The Mobile Internet Series:
The Mobile Internet - Part 1: An Introduction
The Mobile Internet - Part 2: Image Display & Filtering
The Mobile Internet - Part 3: Background Images & A Different Breed of Mobile Browser
The Mobile Internet - Part 4: Text Elements
The Mobile Internet - Part 5: Sniffing for Operating Systems

Create a Horizontal Band CSS Layout - Part 2
by Zoe Gillenwater - 09-Feb-07
Reader Level:

In Create a Horizontal Band CSS Layout - Part 1, you learned how to structure your XHTML and build your CSS to create a layout made up of stacked bands of color. In this tutorial, you'll build on that basic layout to allow a background color or image behind the main content area. This tutorial picks up right where Part 1 left off, so if you haven't read that tutorial or it's been a while, make sure you go back and work through it or review it as needed.

The Create a Horizontal Band CSS Layout Series:
Create a Horizontal Band CSS Layout - Part 1
Create a Horizontal Band CSS Layout - Part 2
Create a Horizontal Band CSS Layout - Part 3
Create a Horizontal Band CSS Layout - Part 4
Create a Horizontal Band CSS Layout - Part 5

Fixed Position in IE7 - Part Six - Tricky Popups!
by John Gallant,Holly Bergevin - 07-Feb-07
Reader Level:

Our series so far has covered fixed positioning for main elements on a web page, and we've also shown some tricks with hovered popups and fixed positioning.

This installment takes a look at usability and accessibility issues that the previous hovered popups create, and uses JavaScript to replace the hovering, and overcome the problems. We also take a look at how to make the popup content available if JavaScript is disabled.

The Fixed Position in IE7 Series:
Fixed Position in IE7 - Part One
Fixed Position in IE7 - Part Two
Fixed Position in IE7 - Part Three: Fixed Position and Older IE Versions
Fixed Position in IE7 - Part Four: Fixed Popups!
Fixed Position in IE7 - Part Five: Fixed Popups from Flowed Elements
Fixed Position in IE7 - Part Six: Tricky Popups!
Fixed Position in IE7 - Part Seven: A Hovered Fallback
Fixed Position in IE7 - Part Eight: Making Allowances for IE6

Create a Horizontal Band CSS Layout - Part 1
by Zoe Gillenwater - 26-Jan-07
Reader Level:

One of the stereotypical types of CSS layouts is known as a toilet paper roll layout: a centered, fixed-width column of content, usually subdivided into two or three columns, with a header and footer spanning them all. It became known as the toilet paper roll layout because the content seemed to spill down the page as if paper coming off a roll. It has a very vertical feel to it.

Another type of CSS layout that is now popular, however, is what I call a horizontal band layout. Its content can still be fixed-width and centered, but instead of the vertical feel of the toilet paper roll layouts it has a horizontal one because of the background colors or images applied to the stacked divs that stretch across the entire width of the viewport. Sometimes these horizontal bands are just restricted to the header and footer areas. Other times the entire layout is made up of stacked bands.

Despite the many different looks of these horizontal band layouts, the markup and CSS required for forming their basic shape is quite similar throughout. In this tutorial, you'll learn what separates them from vertically oriented layouts by modifying the markup and CSS of a simple vertical layout and turning it into a basic horizontal band layout.

This tutorial assumes you have an intermediate understanding of CSS, specifically backgrounds, margins, and floats.

The Create a Horizontal Band CSS Layout Series:
Create a Horizontal Band CSS Layout - Part 1
Create a Horizontal Band CSS Layout - Part 2
Create a Horizontal Band CSS Layout - Part 3
Create a Horizontal Band CSS Layout - Part 4
Create a Horizontal Band CSS Layout - Part 5

The Mobile Internet - Part 2: Image Display & Filtering
by Adrian Senior - 25-Jan-07
Reader Level:

In this tutorial you will look at how images are rendered in Internet Explorer, Opera and Opera Mini. You will see some very different behaviours and how the handheld media type affects the way Opera displays images.

You will look at how you can plan your design and lay down foundations with mobile media in mind; you will learn how you can assign classes and IDs and then use those selectors to perform filtering actions within the mobile website's display.

The Mobile Internet Series:
The Mobile Internet - Part 1: An Introduction
The Mobile Internet - Part 2: Image Display & Filtering
The Mobile Internet - Part 3: Background Images & A Different Breed of Mobile Browser
The Mobile Internet - Part 4: Text Elements
The Mobile Internet - Part 5: Sniffing for Operating Systems

The CMX Mobile Device Reference Resource Free!
by Adrian Senior - 18-Jan-07
Reader Level:

Information in general on CSS support for mobile browsers is scarce, often such browsers do not look for handheld media types and instead use the screen CSS to display the target page. The goal of the the CMX Mobile Device Reference Resource is to build an accurate resource for information on handheld devices. You will be able to search devices by: Manufacturer, Model names/numbers, Browser types and User Agent Strings. You can also check for CSS support, linked handheld and screen media, @import handheld and screen media and CSS 3s content switching support.

Create Mixed Alignment Forms with CSS
by Zoe Gillenwater - 15-Jan-07
Reader Level:

In Vertically Align Labels and Inputs with CSS, you learned how to create a basic form layout where the labels are placed to the left of their input fields with right-aligned text. In all but the simplest forms, however, this strict label-left field-right layout is not sufficient to the varied types of content that typical forms contain. If you have any checkboxes or radio buttons in your forms, or textareas with very long labels, you will not want all your labels floated to the left of their inputs. In this tutorial, you'lll learn how to create custom classes for questions with checkboxes and radio buttons where you want the labels placed to the right and for textareas where you want the labels placed above.

This tutorial assumes you're already familiar with the building blocks of forms and how to use them correctly to build accessible forms, and that you've read the previous tutorial Vertically Align Labels and Inputs with CSS.

Design Your Own Custom CMX CSS Course Free!
by Sheri German - 04-Jan-07
Reader Level:

A common question on the forums is for the recommendation of the name of a good CSS book. There are certainly valuable CSS books on the bookshelves of Borders or Barnes and Noble and the virtual bookshelves of Amazon, but why not start right here with the scores of CSS articles on CMX? Perhaps it has been hard to keep track of them all, and even harder to know where to start from among so much bounty. That is where this learning guide comes in. It will group articles into categories, guide you in determining their levels, and help you design your own custom CSS course.

Fixed Position in IE7 - Part Three - Fixed Position and Older IE Versions
by John Gallant,Holly Bergevin - 28-Dec-06
Reader Level:

Last time we framed our whole demo page with fixed position elements, header, footer and side columns. Now it's time to add some new code that will make the page display in a simpler but acceptable fashion in IE6 and older IE browsers that don't support fixed positioning. The modifications are made mostly in the CSS, but also add two background images to create faux-columns in those older browsers.

This is information you need, so join us!

The Fixed Position in IE7 Series:
Fixed Position in IE7 - Part One
Fixed Position in IE7 - Part Two
Fixed Position in IE7 - Part Three: Fixed Position and Older IE Versions
Fixed Position in IE7 - Part Four: Fixed Popups!
Fixed Position in IE7 - Part Five: Fixed Popups from Flowed Elements
Fixed Position in IE7 - Part Six: Tricky Popups!
Fixed Position in IE7 - Part Seven: A Hovered Fallback
Fixed Position in IE7 - Part Eight: Making Allowances for IE6

Using a CF Custom Tag for Multiple Tabs
by Tom Muck - 21-Dec-06
Reader Level:

Tabs in a web page are an intuitive way for a user to navigate elements on a page. Using tabs, you can create pages of an article, multi-tab forms, multi-tab pages of links, or other types of pages where there is too much content to fit on one page. Using two ColdFusion custom tags -- one for the tab functionality and one for each individual tab -- you can create a simple way to add tabs to a ColdFusion page. The tab code shown in the article is simple, but can be used to expand on, or you can simply use the techniques shown with your own tab code.

CSS Cheat Sheet: Basic Link Styling
by Zoe Gillenwater - 18-Dec-06
Reader Level:

Even seasoned CSS developers need a quick refresher course in CSS concepts and techniques from time to time. This CSS Cheat Sheet is designed for just that. Use it as a reference on topics that you've already learned about in-depth but need a few reminders on. If you're still a beginner to CSS, use it to learn the nuts and bolts of working with CSS, then use our other articles, listed at the end of this one, to extend your learning and practice your new skills.

This Cheat Sheet describes how to style links throughout a site. It reviews the types of selectors available to you for styling links, including the link pseudo-classes. It also provides tips and tricks on working with common link styling issues, including avoiding styles on named anchors and image links and styling links differently depending on where they appear on the page.

The Complete JumpStart Catalog Update Free!
by Sheri German - 15-Dec-06
Reader Level:

We now have 20 JumpStarts and are still counting. For anyone who has ever agonized over which to use for a current project, this article is for you. Updated from an article we released a year ago, the newly expanded and refreshed catalog should help you make the tough decisions about which layout and features will work for your latest client's site.

Fixed Position in IE7 - Part Two
by John Gallant,Holly Bergevin - 11-Dec-06
Reader Level:

Last time, based on new CSS support in IE7, we introduced fixed positioning in the context of a simple header. Now in Part Two, we continue by adding a footer and side columns as well, and making sure that they can coexist on the page. The effect is interesting, and the possibilities are quite intriguing.

What are you waiting for? Let's go!

The Fixed Position in IE7 Series:
Fixed Position in IE7 - Part One
Fixed Position in IE7 - Part Two
Fixed Position in IE7 - Part Three: Fixed Position and Older IE Versions
Fixed Position in IE7 - Part Four: Fixed Popups!
Fixed Position in IE7 - Part Five: Fixed Popups from Flowed Elements
Fixed Position in IE7 - Part Six: Tricky Popups!
Fixed Position in IE7 - Part Seven: A Hovered Fallback
Fixed Position in IE7 - Part Eight: Making Allowances for IE6

CMX PHP Breadcrumbs
by Gordon Mackay - 06-Dec-06
Reader Level:

As a web site's content grows, so does it's need to ensure that users can navigate around it in the easiest possible ways. In larger web sites it's very simple for users to lose track of their orientation within a site.

Enter breadcrumbs... A very simply way to keep your users oriented, as well as giving them instant access to the pages closest to the one that they're viewing. Using the directory structure of a web site is the easiest way to implement breadcrumbs using PHP. In this tutorial we will look at creating a simple function that will automatically generate a breadcrumb trail in valid and semantic (X)HTML.

Methods for Testing in Multiple Versions of IE Free!
by Zoe Gillenwater - 04-Dec-06
Reader Level:

Internet Explorer 7 (IE), released in October 2006, greatly improves its CSS rendering capabilities. However, it's only available for Windows XP and Vista, so we still have to support IE 6 — and possibly IE 5.5 and 5.0, depending on your site's audience — for some time to come. Unfortunately, the integration of IE into the Windows operating system, and Microsoft's refusal to allow multiple versions of it to run at the same time, have made testing web sites in various versions of the ubiquitous browser difficult. There are, however, ways it can be done, and the advent of IE 7 has brought some new methods out for our consideration.

In this article I'll provide an overview of the current methods available for testing multiple versions of Windows IE and provide the pros and cons of each method so you can decide which suits you best.

Introducing CMX JumpStart Metropolis Free!
by Jim Babbage - 22-Nov-06
Reader Level:

Metropolis. Home of the Man of Steel. Where looking up in the sky means you could see something other than a bird or a a plane. This symbol of a thriving cosmopolitan American city complete with villains and heroes, is now the feature of our latest JumpStart. Metropolis is based on the Gordon Mackay's CMX Design Element, Krypton (Hmmm, I sense a theme . . .). Sheri German has sliced up the Krypton PNG file and created all the necessary components to make Metropolis a solid, standards-based design that holds up well in even the latest browser, I.E. 7. In fact, it's just super!

Read on to find out what Metropolis includes and get some tips about how you can adapt it in unique ways. We'll even include our own Metropolis adaptation to give you inspiration to build your own design, faster than a speeding bullet. At the end of this article we'll provide the link for you to download Metropolis so you can get started today!

CMX JumpStart: Metropolis
by Sheri German - 22-Nov-06
Reader Level:

CMX JumpStart Metropolis is a two-column, hybrid layout that has a fluid left column and a fixed-width right column. It includes rounded corners on its right side, and employs faux column technique to achieve equal height columns. It has a footer as well as a fixed header that remains in view even as the visitor scrolls the page - a property that is now supported by Internet Explorer 7. It features styled unordered lists for the navigation, styled skip links, min and max width, and has a placeholder for a photo gallery. Finally, there are several style sheets involved: a main style sheet, a style sheet for print, and a style sheet for all of the special Internet Explorer rules. And of course, as always, Metropolis validates for XHTML 1.0 Transitional, CSS 2.1, and 508 and WAI accessibility.

Approximate download size: 7.1MB

Fixed Position in IE7 - Part One
by John Gallant,Holly Bergevin - 20-Nov-06
Reader Level:

While many people have heard of fixed positioning, very few have ever used it because, until IE7 arrived, no IE/Win version supported it. Now we have an IE version that does support fixed positioning, and soon it will be prevalent enough in the userbase to consider this CSS feature for real world commercial sites.

Join us as we explore what fixed positioning is and what it can do for you. We'll get into all the dirty details one step at a time as we progress through the series, and by the end you will have a decent grasp of the subject. Just think, you'll be ready to authoritatively answer any probing questions a future client may have about this new 'fixed' stuff they've been hearing about.

Here we go...

The Fixed Position in IE7 Series:
Fixed Position in IE7 - Part One
Fixed Position in IE7 - Part Two
Fixed Position in IE7 - Part Three: Fixed Position and Older IE Versions
Fixed Position in IE7 - Part Four: Fixed Popups!
Fixed Position in IE7 - Part Five: Fixed Popups from Flowed Elements
Fixed Position in IE7 - Part Six: Tricky Popups!
Fixed Position in IE7 - Part Seven: A Hovered Fallback
Fixed Position in IE7 - Part Eight: Making Allowances for IE6

Modify Dreamweaver to Create a Default Style Sheet
by Zoe Gillenwater - 15-Nov-06
Reader Level:

When you work with CSS as much as I do, you find that there are certain rules that you use over and over again across your sites. Instead of writing them out in each sheet every time, you can save them as Dreamweaver snippets that you can insert into each new sheet you create. However, an even faster way to get all your standard CSS rules into your style sheet is to have them already in there as soon as you create a new style sheet in Dreamweaver. You can make this happen by editing the default style sheet file that Dreamweaver loads.

In this tutorial you'll learn how to locate and edit Dreamweaver's default style sheet. You'll also get recommendations on rules to put in your customized default style sheet, helping you learn how to optimize your workflow and manage your CSS effectively.

Newly Supported CSS Selectors in IE7 Free!
by John Gallant,Holly Bergevin - 08-Nov-06
Reader Level:

If you know a little about CSS selectors, you have probably discovered how limiting they can be in some ways. Well get ready to expand your CSS horizons, because IE7 has extended its selector support quite a bit, and we want you to become aware of the things these newly supported CSS combinator tools will do for you. All too soon we coders will be expected to know and use this stuff, so put on that thinking-cap and set the selector to "Combinators." Here we go...

Easy Nav for ColdFusion
by Ray West - 01-Nov-06
Reader Level:

In this tutorial I will show you how to develop a navigation handler in ColdFusion that will do the following:

The navigation would be made up of a CSS styled unordered list, <ul>
Each list item, <li>, within the <ul> would be a link to a page within the site
Each <li> would contain an anchor (a) with an href to the target page.
Whichever page the visitor was on at the moment should not show up as a link in the nav, rather it should just show <strong> so as to indicate the current location and avoid self-referencing links
It should be self updating as the navigation changes so that no manual changes are necessary to the code to 'code-around' the links on each target page

Put a Calendar on your Web Page
by Paul Davis - 27-Oct-06
Reader Level:

Get the code to put a calendar on your page, all JavaScript, explained and styled via CSS. Can put multiple calendars on one page with this code too!

The Put a Calendar on Your Web Page Series:
Put a Calendar on Your Web Page - Part 1
Put a Calendar on Your Web Page - Part 2

Full Height CSS Layouts with Footers
by Zoe Gillenwater - 26-Oct-06
Reader Level:

In Multiple Column CSS Layouts that Fill the Browser Window, you learned how to combine the faux column technique with height and min-height rules to create a two-column and header layout that expanded vertically to fill the browser viewport. In this tutorial we'll develop that layout further by adding a footer that stays pinned to the bottom of the screen when the content is short but follows the content like a normal footer when the content is long. We'll also add rules to contain the floated sidebar in case it is longer than the non-floated content div.

This tutorial builds on the previous two tutorials on creating full-height pages, Create Pages that Fill the Browser with CSS and Multiple Column CSS Layouts that Fill the Browser Window, so please make sure you have read those tutorials before continuing with the present one. This tutorial also utilizes the concepts of negative margins and floats, so make sure you are familiar with these topics to get the most out of this tutorial.

Switching CSS Based on Time of Day with PHP
by Gordon Mackay - 24-Oct-06
Reader Level:

Sometimes dynamic code can have advantages when it comes to adding some aesthetic features to a web design. In this example we will build a small PHP function that will output a different CSS link to your pages depending on what time of the day it is. We will also have a look at the best way to deploy this technique in terms of CSS.

We will take advantage of PHP's date function and switch statements to make our function work.

The support files download for this tutorial contain a nice looking example of a CSS header image rotation based on the time of day. It's complete with the 4 PNG files used, CSS files, PHP function and test page.

Approximate download size: 658k

Multiple Column CSS Layouts that Fill the Browser Window
by Zoe Gillenwater - 20-Oct-06
Reader Level:

In Create Pages that Fill the Browser with CSS, I introduced the CSS rules necessary to make a div stretch to fill the height of the browser viewport. The principles in that article can be applied to multiple divs to create a multiple column layout where each column stretches to fill the viewport. In this tutorial, you'll learn how to make a two column layout with a header stretch to fill the browser viewport, regardless of the amount of content in the divs or the height of the header. Note: This tutorial assumes you are familiar with how to create a basic two column layout using floats and does not cover how to create the columns themselves. Instead, it focuses on how to take those existing columns and stretch them to fill a window.

Converting the Santorini JumpStart to Use Two Columns Instead of Three Free!
by Heidi Bautista - 18-Oct-06
Reader Level:

The Santorini JumpStart - 18th in our ongoing series - provides you with a simple 3-column fluid layout. But what if you wanted just two columns? No problem. This article shows you exactly what you need to change. And it's only three things! Isn't it nice when things are simple for a change? That's the whole idea behind our JumpStarts. If Santorini doesn't meet your needs, be sure to check out our other designs.

Faux Image Maps - Part Two
by John Gallant,Holly Bergevin - 13-Oct-06
Reader Level:

Last time in Part One, we covered a basic way to use CSS to replace image maps. This time we get into some extra tricks that really enhance the hovering of the links and make them stand out in a way that no image map can.

The Faux Image Maps Series:
Faux Image Maps - Part One
Faux Image Maps - Part Two

Layout Building Blocks
by Paul Davis - 10-Oct-06
Reader Level:

Create a base CSS layout structure that you can use again and again to quickly begin your web site creation. Don't re-invent the wheel each time!

CMX JumpStarts: Santorini Free!
by Heidi Bautista - 05-Oct-06
Reader Level:

Welcome to the next design in the CMX JumpStarts series, Santorini, a sun-kissed island in legendary Greece.

View of bay of Caldera, island of Santorini, in Greece.

The Santorini JumpStart is a three-column design that leverages the entire width of the browser. The center (main content) column widens and shrinks as the user resizes his window. But the two outer columns are fixed width so your links and extra info is always visible to the user.

As always, the Santorini CMX JumpStart can be used in any way you wish. commercial or personal, and includes several tutorials and an extension.
CMX JumpStart:Santorini.
Santorini is structured to be as hack-free and straightforward as possible. So, if you've been looking for a relatively painfree way of getting started with CSS layouts this may be just the JumpStart for you.

The source PNG included with Santorini is pretty simple too in that it doesn't have any complicated images that you need to slice up and shoehorn into the design. What you get with Santorini is a starter page that uses valid XHTML 1.0 Strict and CSS 3 markup and follows WAI and Section 508 accessibility guidelines making it ready for you to customize to suit your own requirements.

Approximate download size: 2.9MB

CMX Announces a JumpStart Contest and FREE JumpStart Free!
by Sheri German - 05-Oct-06
Reader Level:

The Greek island of Santorini is considered by some to be the location of the legendary Atlantis. Atlantis still fascinates and inspires everything from literature and art to movies and music. Now, as the latest Community MX JumpStart, we hope that Santorini will inspire your Web designs, too.

Santorini is our 18th JumpStart, and we think that this is a nice "coming of age" number. To celebrate, we're going to give Santorini away for free AND hold a JumpStart contest. Read on to learn more about our latest JumpStart and to get all the contest rules.

Faux Image Maps - Part One
by John Gallant,Holly Bergevin - 29-Sep-06
Reader Level:

With this tutorial, we begin a new series covering the many available CSS methods for replacing image maps with better and more versatile code. We'll start with a very basic but highly useful technique, and build upon that to show you fancier tricks as the series progresses. It's pretty handy stuff to know.

Create Pages that Fill the Browser with CSS Free!
by Zoe Gillenwater - 25-Sep-06
Reader Level:

A frequently asked question in CSS forums is how to create pages that stretch vertically to fill the browser window, regardless of the amount of content. With tables, you would nest your entire design in a table with a single cell and set both the cell and table's height to be 100 percent. With CSS, it's also quite simple and easy. In this tutorial, you will learn the basic CSS technique for making pages fill the browser window, which you can also use any time you have a div that you want to stretch to fill its parent.

Please note, however, that this is not a tutorial about making a footer stick to the bottom of the browser viewport or about emulating frames. These are more complicated layout requirements that may be covered in further tutorials, building on the 100 percent height technique introduced here.

All About CSS Drop Shadows - Part Seven
by John Gallant,Holly Bergevin - 19-Sep-06
Reader Level:

In the previous tutorial in our series (Part Six) we detailed a fancy "button-depress" trick for use with the drop shadow method that was for browsers other than IE. This time we will explain how you can get IE6/Win and IE5.5/Win to behave the same way, more or less.

The All About CSS Drop Shadows Series:
All About CSS Drop Shadows - Part One
All About CSS Drop Shadows - Part Two
All About CSS Drop Shadows - Part Three
All About CSS Drop Shadows - Part Four
All About CSS Drop Shadows - Part Five
All About CSS Drop Shadows - Part Six
All About CSS Drop Shadows - Part Seven

Create a Style Sheet in Dreamweaver 8
by Zoe Gillenwater - 11-Sep-06
Reader Level:

Although it's always best to know how to perform web development tasks by hand, the CSS Styles panel of Dreamweaver 8 lets you get away with not having to create, attach, or edit a style sheet by hand ever again if you don't want to. In this tutorial, you'll learn how to use the CSS Styles panel to:

attach a style sheet to a page
create new rules in a style sheet
edit existing rules' properties and add new ones

Note: Although this tutorial is aimed at beginner users of CSS and Dreamweaver, you still need to understand CSS syntax and what each property controls in order to know how to set the appropriate values in Dreamweaver. If you're not yet familiar with how CSS works, please read Adrian Senior's introductory series of CSS tutorials first.

All About CSS Drop Shadows - Part Six
by John Gallant,Holly Bergevin - 05-Sep-06
Reader Level:

Last time we covered the small details of our new CSS drop shadow method, cleaning up a lot of loose ends. Now we will introduce a fancy trick that will cause our shadowed element to behave like a depressable button when it is hovered. It's a really neat effect, and we feel it will eventually become a common method on the web.

The All About CSS Drop Shadows Series:
All About CSS Drop Shadows - Part One
All About CSS Drop Shadows - Part Two
All About CSS Drop Shadows - Part Three
All About CSS Drop Shadows - Part Four
All About CSS Drop Shadows - Part Five
All About CSS Drop Shadows - Part Six
All About CSS Drop Shadows - Part Seven Coming Soon

Create Columns with Floats Free!
by Zoe Gillenwater - 28-Aug-06
Reader Level:

Floating is the primary method for laying out pages using CSS. In this tutorial, you'll learn how to create the look of columns using the float, width and margin properties. You'll learn the principles for creating both liquid and fixed-width layouts of as many columns as you like.

In order to complete this tutorial, you need to already be familiar with the syntax of CSS and have read Flowing And Positioning: Two Page Models and Float: The Theory.

All About CSS Drop Shadows - Part Five
by John Gallant,Holly Bergevin - 21-Aug-06
Reader Level:

Once you feel confident with making and applying drop shadows to elements in your pages, you may find that you need to do more. In Part Five of our CSS Drop Shadow series we'll look at centering elements that have drop shadows created using our previous method, using an image as the innermost nested element, as well as how to deal with various levels of browser support for drop shadows that use PNG transparency. Join us!

The All About CSS Drop Shadows Series:
All About CSS Drop Shadows - Part One
All About CSS Drop Shadows - Part Two
All About CSS Drop Shadows - Part Three
All About CSS Drop Shadows - Part Four
All About CSS Drop Shadows - Part Five
All About CSS Drop Shadows - Part Six
All About CSS Drop Shadows - Part Seven Coming Soon

Introduction to Design-Time Style Sheets
by Zoe Gillenwater - 14-Aug-06
Reader Level:

Design-time Style Sheets (DTSS) is a feature that was introduced back in Dreamweaver MX (version 6) and continues to exist in Dreamweaver 8 today, as well as Contribute. A Design-time Style Sheet allows you to apply or hide certain styles within Dreamweaver, without applying these styles to your live page in the browser. That means that if Dreamweaver is displaying certain styles incorrectly, you can write a separate style sheet with styles to correct the problem and have this style sheet only affect the Design View in Dreamweaver.

DTSS can also be used for a whole lot more than correcting style rendering problems in Design View, such as:

Showing styles on includes
Showing content that is hidden with CSS
Highlighting content you need to take action on
Showing styles from dynamic style sheets
Displaying styles from external style sheets

This tutorial will explain these uses in more detail, then show you how to create a DTSS and apply it to a page.

Introducing CMX Jumpstart Greenville Free!
by Sheri German - 10-Aug-06
Reader Level:

The name Greenville evokes the radiant ambiance of gardens, nurseries, and landscapes. And that is just how Heidi Bautista paints it in our latest Community MX JumpStart: Greenville, NC. Let's take a closer look at this bloomingly lovely design to see what new treasure we've added to our JumpStart collection.

CMX JumpStarts: Greenville
by Heidi Bautista - 10-Aug-06
Reader Level:

Our summertime JumpStart takes us to Greenville, North Carolina. Chances are that if you were born in the United States your state has a town named Greenville. And with a name like that, it's got to have great gardening opportunities, right? Our Greenville JumpStart features a beautiful tapestry of transparent backgrounds that afford the designer all sorts of artistic opportunities. Plus, Greenville, like all our JumpStarts, uses valid XHTML 1.0 and CSS 2.1 markup and follows WAI and Section 508 accessibility guidelines. Taken altogether, Greenville provides you with a solid foundation for any design.

Greenville is a two column, fixed width layout with header and footer. It features styled unordered lists for the navigation, a styled form, and styled skip links. Several style sheets are included: commented and uncommented style sheets for print and screen media and three Win IE - only sheets that take care of browser anomalies in WinIE5, WinIE5.5 and WinIE6. The JumpStart features Zoe Gillenwater's Teaser Thumbnail List to display the images and text in lefthand column. Last but not least, the JumpStart includes the PNG file used to create the layout.

The download for this JumpStart is fairly large at 18MB, due in large part to an included tutorial that weighs in at 12.5MB. If you are purchasing CMX JumpStart Greenville and would like to download the package without that tutorial, or download it in smaller chunks, please send an email to info@communitymx.com and we will make arrangements for you to do so. If you are a CMX subscriber, you will find links at the end of the article, but prior to the list of supported browsers, to download the JumpStart various different ways.

All About CSS Drop Shadows - Part Four
by John Gallant,Holly Bergevin - 08-Aug-06
Reader Level:

In the last part of our series, we introduced a drop shadow method that employs a background image to simulate the shadow on a box element. This time we will introduce a slightly different method that produces a superior shadow, using some additional markup and images.

The All About CSS Drop Shadows Series:
All About CSS Drop Shadows - Part One
All About CSS Drop Shadows - Part Two
All About CSS Drop Shadows - Part Three
All About CSS Drop Shadows - Part Four
All About CSS Drop Shadows - Part Five
All About CSS Drop Shadows - Part Six
All About CSS Drop Shadows - Part Seven Coming Soon

Clever CSS Menus with PHP
by Gordon Mackay - 02-Aug-06
Reader Level:

In this tutorial we will explore making an intelligent CSS menu system using a very simple PHP function.

While techniques exist in CSS that allow people to add current page indication based on body tags with classes applied to them they involve the editing of the individual pages to make them function. They also do not remove the current page's link from the navigation list.

This menu will automatically remove the link from the current page navigation list item and add an ID that will allow it to be styled with a current page indicator of some sort via CSS.

Let's get started.

Float Images Within Text
by Zoe Gillenwater - 31-Jul-06
Reader

Past Week's New Content

Search CMX

Latest Free Content

View All
Free Content

Accessibility

CMX Learning Guides

CSS