CSS

The CS5 CSS Starter Page Series - Part 9: Quality Assurance Free!
Reader Level:

In the last installment of the Dreamweaver CS5 CSS Starter Page series, we finally finished the base layout. Before we can move on to creating new pages from the layout, we need to perform a few maintenance and quality assurance chores:

Check the layout in multiple browsers at Adobe BrowserLab
Order the rules so that they are more organized and easier to read
Move the rules into an external style sheet
Create a separate style sheet for browser specific properties and values
Validate the document at the W3C CSS validator

CSS Animations: The Transition Properties
Reader Level:

CSS3 Transitions allow CSS properties to change from one value to another over a period of time. Did you know that you don't need JavaScript to slowly transition a background color from blue to red? In this section we learn the semantics of the CSS3 Transition properties.

The CS5 CSS Starter Page Series - Part 8: Adding a Custom Font Free!
Reader Level:

In this installment of the Dreamweaver CS5 CSS Starter Page series, we'll add the last finishing touch to the design. We'll use @font-face to add a custom font that expresses the rugged terrain of Alaska and the Yukon.

The CSS property @font-face offers true font support. After linking to a custom font within your style sheet and uploading the font file to your site (just as you would for an image), you can then use it on your pages without users having to have the font on their own systems. There is a catch, however, and that is the variability of browser support. Fonts have to be converted to a number of different formats in order to work in Safari, Firefox, IE, Opera, Chrome, the iPhone, and the iPad. These formats then have to be written in a somewhat complex syntax in the style sheet.

Fortunately, there is a free service called Font Squirrel that offers hundreds of fonts that are licensed for use on the web, and that are already converted to the formats you'll need for them to work in all major browsers. In this tutorial we'll use this service to add the font Gesso to the Yukon layout.

The CS5 CSS Starter Page Series:
The CS5 CSS Starter Page Series - Part 1: The Yukon
The CS5 CSS Starter Page Series - Part 2: Marking up the Page
The CS5 CSS Starter Page Series - Part 3: Structuring with CSS
The CS5 CSS Starter Page Series - Part 4: Refining Details with CSS
The CS5 CSS Starter Page Series - Part 5: Adding Navigation Systems
The CS5 CSS Starter Page Series - Part 6: Converting to Horizontal Navigation
The CS5 CSS Starter Page Series - Part 7: Adding CSS3 Pods
The CS5 CSS Starter Page Series - Part 8: Adding a Custom Font
The CS5 CSS Starter Page Series - Part 9: Quality Assurance

The CS5 CSS Starter Page Series - Part 7: Adding CSS3 Pods Free!
Reader Level:

After all the hard work of learning how the new Dreamweaver CS5 CSS Starter Pages work, it's time to have some fun with them. The "next big thing" on the web is CSS3 properties that let you create all kinds of visual effects without using images. In this installment of the series, we're going to create three pods in the sidebar, each of which will contain a heading and paragraph with a link to a page with more information about its topic. The pods will have rounded corners, box shadows, and a gradient background.

In the old days this would have required multiple DIVs and images. CSS3 offers the promise of freedom from all of that. Web standards compliant browsers offer good, though differing, support for CSS3. While these properties do not work in Internet Explorer 6, 7, and 8 (Internet Explorer 9 is about to arrive and will support many CSS3 properties), you have some choices in handling the web's problem child browser. We'll get to that towards the end of the tutorial.

The CS5 CSS Starter Page Series:
The CS5 CSS Starter Page Series - Part 1: The Yukon
The CS5 CSS Starter Page Series - Part 2: Marking up the Page
The CS5 CSS Starter Page Series - Part 3: Structuring with CSS
The CS5 CSS Starter Page Series - Part 4: Refining Details with CSS
The CS5 CSS Starter Page Series - Part 5: Adding Navigation Systems
The CS5 CSS Starter Page Series - Part 6: Converting to Horizontal Navigation
The CS5 CSS Starter Page Series - Part 7: Adding CSS3 Pods
The CS5 CSS Starter Page Series - Part 8: Adding a Custom Font
The CS5 CSS Starter Page Series - Part 9: Quality Assurance

The CS5 CSS Starter Page Series Part 5: Adding Navigation Systems
Reader Level:

In the last installment of this series, we completed all parts of the layout except for the navigation. In this tutorial, we'll style the unordered list of links into a set of vertical buttons. This is the default navigation styling for the Dreamweaver CS5 CSS Starter Pages. In the next tutorial, we'll change the navigation scheme into a horizontal navigation bar under the header, but for now it is important for you to understand how navigation in the CSS Starter Pages works.

This tutorial includes exercise files so you can "play along at home". There are also completed files so you can compare your work.

The CS5 CSS Starter Page Series:
The CS5 CSS Starter Page Series - Part 1: The Yukon
The CS5 CSS Starter Page Series - Part 2: Marking up the Page
The CS5 CSS Starter Page Series - Part 3: Structuring with CSS
The CS5 CSS Starter Page Series - Part 4: Refining Details with CSS
The CS5 CSS Starter Page Series - Part 5: Adding Navigation Systems
The CS5 CSS Starter Page Series - Part 6: Converting to Horizontal Navigation
The CS5 CSS Starter Page Series - Part 7: Adding CSS3 Pods
The CS5 CSS Starter Page Series - Part 8: Adding a Custom Font
The CS5 CSS Starter Page Series - Part 9: Quality Assurance

@font-face Hurdles and Tips Free!
Reader Level:

Web site design has been hampered by the limited number of fonts available to most clients. Designers have been using image replacement and methods such as sIFR and Cufón to make up for limited choices in typography. Not anymore. With basically universal support of embedded fonts, we now have more options. This article discusses hurdles and tips to embedding fonts with @font-face.

CMX JumpStart: Brasilia
Reader Level:

The Brasilia JumpStart looks at how we can use the flexibility of a CSS layout to control the number of columns on any given page directly from your CSS file. You simply need to add a class to the body tag and the CSS takes care of everything else for you! Brasilia also has a slight variation on the popular sliding doors CSS navigation system. While the concept is exactly the same as we have used in the past, on this occasion the navigation hangs from the top of the page rather than sitting at the bottom of its containing element.

The main construction of Brasilia 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 layout will collapse gracefully on smaller viewports while the images in the strap are self centering to ensure the layout always displays at it's best. The content, as always, is created with valid code and accessibility in mind.

Introducing CMX JumpStart Brasilia Free!
Reader Level:

CMX JumpStart Brasilia is fluid, both in its outer and inner DIVs. The outer DIVs are completely fluid and conform to the width of the viewport. The inner DIVs are fluid, but with max width to keep reading lines comfortable, and min width to keep the layout from collapsing in narrow windows. There are styles for two or three column options that can be controlled from a single CSS file. The first tier tabbed navigation uses the popular Sliding Door technique, and the second tier navigation uses an unordered list for greater accessibility. Both navigation schemes provide for a current page marker. There is a "fat" header that allows your company to showcase important content and/or branding. The PNG allows for the editing of the images in the monitor screens if you wish to stick to the computer theme. In lieu of images, you could also put text in either the right or left floated areas of the header for a real "above the fold" showcasing of your message. The JumpStart includes a main style sheet, a version six and below Internet Explorer style sheet, a version seven and above 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 Brasilia meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements, too.

Dreamweaver CS5 New Features Part 2: CSS Troubleshooting Free!
Reader Level:

In this second article about the new features in Dreamweaver CS5, we'll look at some of the new ways Dreamweaver will help you troubleshoot your layouts. You'll wonder how you ever lived without CSS Inspect, or without the ability to enable and disable properties with the click of a button in the CSS Styles panel. You'll marvel at the new capabilities in the Style Rendering Toolbar, and become addicted to the new online service, BrowserLab.

Join me in a guided tour.

The Dreamweaver CS5 New Features Series:
Dreamweaver CS5 New Features Part 1: The All New CSS Starter Pages
Dreamweaver CS5 New Features Part 2: CSS Troubleshooting

Discovering CSS 3: Attribute Selectors
Reader Level:

In this tutorial we will learn how we can set multiple background images in an unordered list without the need to set class specific markup within your (X)HTML code. We will achieve this by making good use of available attributes. In this instance we will be using the type and lang attributes to provide links to language specific documents. By using this technique you will be able to affect all content within your documents that carry any given attribute from directly within your style sheet. You can of course apply this technique to any given element that accepts an attribute; it isn't limited to the type and lang attributes that I will use to show the technique in this tutorial.

CSS3 Colors: Part III Colors & Browser Support
Reader Level:

In CSS2 we were limited to RGB, Hexidecimal and named colors. With greater CSS3 support in modern browsers, we have new value types, and new values, including native support for alpha transparency. This article provides a brief overview of all the color choices, along with a grid displaying browser support for all the color values.

The CSS3 Colors Series:
CSS3 Colors - Part 1
CSS3 Colors - Part 2: HSL & HSLA
CSS3 Colors - Part 3: Colors & Brower Support

CSS3 Colors - Part 2: HSL & HSLA
Reader Level:

In CSS2 we were limited to RGB, Hexidecimal and named colors. With greater CSS3 support in modern browsers, we have new value types, and new values, including native support for alpha transparency. This article provides a brief overview of all the color choices. and goes in depth into HSL - hue, saturation and lightness: the new CSS3 color system.

The CSS3 Colors Series:
CSS3 Colors - Part 1
CSS3 Colors - Part 2: HSL & HSLA

CMX JumpStart: Beijing
Reader Level:

Welcome to the Beijing JumpStart!

The Beijing JumpStart provides the easiest of solutions for changing the amount of columns on a page. You simply add a class to the body tag and the CSS takes care of everything else for you! Beijing also has a slight variation on the popular sliding doors CSS navigation system. While the concept is exactly the same as we have used in the past, on this occasion it hangs from the top of the page rather than sitting at the bottom of it's containing element.

The main construction of Beijing 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 maintaining a good line reading length. The content as always is created with valid code and accessibility in mind.

Introducing CMX JumpStart Beijing Free!
Reader Level:

The Vancouver Olympics are over, and we are left with only nostalgia. Let's add the 2008 Beijing Olympics to our memories as we contemplate the latest CMX JumpStart, CMX JumpStart Beijing.

The :first-letter Pseudo Element Free!
Reader Level:

The :first-letter pseudo element provides us with a way to style our content in much the same way as you might see in any number of printed articles or books. By making good use of this pseudo element we can isolate the first letter of any section of our content and style it separately from the default styling of the remainder of that content. Whether that content is a simple paragraph copy or a header element we now have the means to isolate the first letter and style it as we see fit.

CSS3 Colors - Part 1
Reader Level:

In CSS2 we were limited to RGB, Hexidecimal and named colors. With greater CSS3 support in modern browsers, we have new value types, and new values, including native support for alpha transparency. This article provides a brief overview of all the color choices.

The CSS3 Colors Series:
CSS3 Colors - Part 1
CSS3 Colors - Part 2: HSL & HSLA

The :nth-child Pseudo Class
Reader Level:

CSS 3 provides us with CSS expressions, CSS Expressions allow you to be very specific with the elements that you target without the need to add styles or classes etc to your HTML document.

In this article we will be looking at the :nth-child pseudo class, currently the :nth-child pseudo class is supported by all the main browsers, Firefox, Opera, Safari and Chrome, which makes them very usable. The only down-side is a lack of support from Internet Explorer. We could, of course, provide CSS for this browser in an IE specific style sheet or we could simply let it degrade without taking away from the content of our web page.

Rotate That Image with CSS! Free!
Reader Level:

A little unknown and not often used style of CSS is the ability to rotate images through a central axis.

Rotation is a very easy thing to achieve and it is not limited to just images, you can apply the same styling to text. The rotate value does require some proprietary code but the affect can be achieved across all the main stream browsers with the exception of Opera; as we shall see.

HTML 5 - Part2: An Introduction to the New Division Tags
Reader Level:

In Part 1 of this series we investigated the new layout tags that have become available with HTML 5. Today we will look at some of the authoring content tags, specifically the <article> and <section> tags and how they should be used within our web page content. We'll begin by laying out a page structure using today's standards based techniques and then we will recreate the same structure for HTML 5 and build in our newly discovered

and

tags.

The HTML 5 Series:
HTML 5 - Part 1: An Introduction to the New Layout Tags
HTML 5 - Part 2: An Introduction to the New Division Tags

Creating a Bar Graph with HTML and CSS using ColdFusion - Part 2
Reader Level:

Graphs in web pages and reporting applications can be put together with built-in ColdFusion functionality using the tag, or with JavaScript libraries that are widely available. However, sometimes you have a need for a simple bar graph that does not depend on this more advanced technology; working with ColdFusion servers that do not have functioning on the server, or targeting browsers that are not JavaScript enabled.

Bar graphs can be created quite easily using ancient HTML technology without the aid of more advanced techniques for simple bar graphs that display quickly and across all browsers. For this tutorial, I'll assume you know basic ColdFusion and SQL -- writing queries, views, and getting the results you want.

A bar graph can be built vertically or horizontally. The first part showed the horizontal graph. This part will show the vertical graphing process. The basic process is to create the SQL query that you want to view the result as a graph, use a slim image that can be stretched as a basis of the bar graph, and set the height of the image based on the value of your data. For example, a value of $50 might translate to 50 pixels high, and $500 might translate to 500 pixels high. Using simple formulas, we'll create the graphs.

The Creating a Bar Graph with HTML and CSS Series:
Creating a Bar Graph with HTML and CSS using PHP - Part 1
Creating a Bar Graph with HTML and CSS using ColdFusion - Part 1
Creating a Bar Graph with HTML and CSS using PHP - Part 2
Creating a Bar Graph with HTML and CSS using ColdFusion - Part 2

Introducing CMX JumpStart Agra Free!
Reader Level:

Maybe you haven't heard of Agra, India, but you most definitely have heard of its most famous building, the Taj Mahal. Agra is a popular tourist destination, and now it will be a particularly popular CMX JumpStart, CMX JumpStart Agra. Why? Because one page includes multiple layout possibilities.

CMX JumpStart Agra is a 900 pixel wide, fixed-width layout providing multiple column options that can be controlled from a single CSS file. While the top half of Agra remains constant, the lower three-column section can easily be modified from its default three columns to either a one or two column layout. The tabbed navigation uses the popular Sliding Door technique.

The JumpStart includes a main style sheet, a version six and below Internet Explorer style sheet, a version seven and above 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 Agra meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements, too.

CMX JumpStart: Agra
Reader Level:

Welcome to The Agra JumpStart!

The Agra JumpStart is based around an Indian theme and follows the diversity of that country by providing multiple layout structures that can be controlled from a single CSS file. While the top half of Agra remains constant the lower three column section can be easily modified from its default three column layout to either a one or two column layout. Like India, Agra provides a solution for just about every requirement you may have!

Approximate download size: 4MB

Creating a Bar Graph with HTML and CSS using PHP - Part 2
Reader Level:

Graphs in web pages and reporting applications can be put together with various PHP libraries, such as using the JpGraph library shown in JpGraph: PHP Graphs & Charts On-The-Fly by Steven Seiller, or with JavaScript libraries that are widely available. However, sometimes you have a need for a simple bar graph that does not depend on this more advanced technology; working with PHP servers that do not have libraries installed, or targeting browsers that are not JavaScript enabled.

Bar graphs can be created quite easily using ancient HTML technology without the aid of more advanced techniques for simple bar graphs that display quickly and across all browsers. For this tutorial, I'll assume you know basic PHP and SQL -- writing queries, views, and getting the results you want.

A bar graph can be built vertically or horizontally. The first part showed the horizontal graph. This part will show the vertical graphing process. The basic process is to create the SQL query that you want to view the result as a graph, use a slim image that can be stretched as a basis of the bar graph, and set the height of the image based on the value of your data. For example, a value of $50 might translate to 50 pixels high, and $500 might translate to 500 pixels high. Using simple formulas, we'll create the graphs.

The Creating a Bar Graph with HTML and CSS Series:
Creating a Bar Graph with HTML and CSS using PHP - Part 1
Creating a Bar Graph with HTML and CSS using ColdFusion - Part 1
Creating a Bar Graph with HTML and CSS using PHP - Part 2
Creating a Bar Graph with HTML and CSS using ColdFusion - Part 2

Creating a Bar Graph with HTML and CSS using ColdFusion Part 1
Reader Level:

Graphs in web pages and reporting applications can be put together with built-in ColdFusion functionality using the tag, or with JavaScript libraries that are widely available. However, sometimes you have a need for a simple bar graph that does not depend on this more advanced technology; working with ColdFusion servers that do not have functioning on the server, or targeting browsers that are not JavaScript enabled. Bar graphs can be created quite easily using ancient HTML technology without the aid of more advanced techniques for simple bar graphs that display quickly and across all browsers. For this tutorial, I'll assume you know basic ColdFusion -- writing queries and getting the results you want.

A bar graph can be built vertically or horizontally. I'll show a simple horizontal graph. The basic process is to create the SQL query that you want to view the result as a graph, use a slim image that can be stretched as a basis of the bar graph, and set the width of the image based on the value of your data. For example, a value of $50 might translate to 50 pixels wide, and $500 might translate to 500 pixels wide. Using simple formulas, we'll create the graphs.

The Creating a Bar Graph with HTML and CSS Series:
Creating a Bar Graph with HTML and CSS using PHP - Part 1
Creating a Bar Graph with HTML and CSS using ColdFusion - Part 1
Creating a Bar Graph with HTML and CSS using PHP - Part 2
Creating a Bar Graph with HTML and CSS using ColdFusion - Part 2

Creating a Bar Graph with HTML and CSS using PHP Part 1
Reader Level:

Graphs in web pages and reporting applications can be put together with various PHP libraries, such as using the JpGraph library shown in JpGraph: PHP Graphs & Charts On-The-Fly by Steven Seiller, or with JavaScript libraries that are widely available. However, sometimes you have a need for a simple bar graph that does not depend on this more advanced technology; working with PHP servers that do not have libraries installed, or targeting browsers that are not JavaScript enabled. Bar graphs can be created quite easily using ancient HTML technology without the aid of more advanced techniques for simple bar graphs that display quickly and across all browsers. For this tutorial, I'll assume you know basic PHP and SQL -- writing queries, views, and getting the results you want.

A bar graph can be built vertically or horizontally. I'll show a simple horizontal graph in this part. The basic process is to create the SQL query that you want to view the result as a graph, use a slim image that can be stretched as a basis of the bar graph, and set the width of the image based on the value of your data. For example, a value of $50 might translate to 50 pixels wide, and $500 might translate to 500 pixels wide. Using simple formulas, we'll create the graphs.

The Creating a Bar Graph with HTML and CSS Series:
Creating a Bar Graph with HTML and CSS using PHP - Part 1
Creating a Bar Graph with HTML and CSS using ColdFusion - Part 1
Creating a Bar Graph with HTML and CSS using PHP - Part 2
Creating a Bar Graph with HTML and CSS using ColdFusion - Part 2

CMX JumpStart: Lapland Free!
Reader Level:

Welcome to the Lapland JumpStart!

The Lapland JumpStart is a free offering to you from Community MX. We hope you enjoy and are able to make good use of the layout!

The main construction of Lapland 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.

Decorating Lapland for the Holidays Free!
Reader Level:

Can it be mid December already? The holiday season is in full force, and many of us are decorating, putting up trees, shopping online and in stores, and planning the holiday meal. We're decorating here at Community MX as well. In fact, this busy little CMX elf is decorating the latest JumpStart, CMX JumpStart Lapland. We are extremely pleased to offer this JumpStart as a free holiday gift to the entire online community. Put on the holiday music, and join me in this tutorial that guides you through modifying Lapland and decorating it for the holidays with a custom font from Font Squirrel.

Design Your Own Custom CMX CSS Course - Part 3 Free!
Reader Level:

On Jan. 4, 2007 and January 9, 2008, we offered directories of our CSS articles and tutorials in Design Your Own Custom CMX CSS Course and Design Your Own Custom CMX Course Part Two.

It's been almost two years since the last CSS course publication, and CMX authors have written scores of new CSS and accessibility related articles, tutorials, and technique updates. Clearly it is time for part three of the CSS course.

We hope this inventory of the latest additions to our CSS offerings makes it easier to find what you're looking for.

The Design Your Own Custom CMX CSS Course Series:
Design Your Own Custom CMX CSS Course - Part 1
Design Your Own Custom CMX CSS Course - Part 2
Design Your Own Custom CMX CSS Course - Part 3

The CMX JumpStart Catalog Update 2009 Free!
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!
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
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
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.

Clearing Floats Without Touching Your HTML
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!
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
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!
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
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!
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
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!
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

IE8 - The Good, the Bad, the Ugly (and Pretty) Free!
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
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
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!
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
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
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!
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!
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
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
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!
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
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 7b: Debuggger, Breakpoint & Expression Watching
Firebug - Part 7c: Debugging JavaScript with the Firebug Console

Firebug - Part 4B: Inspecting and Troubleshooting CSS
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 in 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)
Firebug - Part 7b: Debuggger, Breakpoint & Expression Watching
Firebug - Part 7c: Debugging JavaScript with the Firebug Console

Firebug - Part 4A: Inspecting and Troubleshooting CSS
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)
Firebug - Part 7b: Debuggger, Breakpoint & Expression Watching
Firebug - Part 7c: Debugging JavaScript with the Firebug Console

Introducing CMX JumpStart Landeck Free!
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
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!
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
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
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
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!
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!
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
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
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!
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
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!
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!
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
The CSS Starter Page Series - Part 12: Adding a jQuery Slideshow
The CSS Starter Page Series - Part 13: Designing with a Grid
The CSS Starter Page Series - Part 14: Designing with a CSS Table Grid
The CSS Starter Page Series - Part 15: Adding a Drop Cap with :first-letter

Introducing CMX JumpStart Tokyo Free!
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
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
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!
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!
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
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
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
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
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!
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
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!
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!
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
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!
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
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é
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!
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
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
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
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
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!
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
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
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
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
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
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
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!
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!
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.

The Design Your Own Custom CMX CSS Course Series:
Design Your Own Custom CMX CSS Course - Part 1
Design Your Own Custom CMX CSS Course - Part 2
Design Your Own Custom CMX CSS Course - Part 3

Simple Server-Side Form Validation
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
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
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!
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
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!
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
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
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!
Reader Level:

Quick shot for the CSS on fixed background images.

Styling Skip Nav Links, Revisited
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
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!
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
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!
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
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
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!
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
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!
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
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!
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
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
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
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
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
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
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!
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.
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
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
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!
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!
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
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
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!
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**
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**
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
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**
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
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!
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
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
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!
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!
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
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
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!
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!
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.

Create a Horizontal Band CSS Layout - Part 4
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
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
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
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!
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!
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
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
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
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!
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
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
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!
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
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 questio

Today's New Content

Search CMX

Latest Free Content

View All
Free Content

Accessibility

CSS

Today's New Content

Search CMX

Latest Free Content

View All Free Content

Accessibility

CSS

View All
Free Content