Adobe CS tutorials - Dreamweaver, FIreworks, Photoshop, Flash and Coldfusion

CSS

The Dreamweaver CS6 Fluid Grid Layout
Reader Level:

This tutorial teaches you to use the new Dreamweaver CS6 Fluid Grid Layout feature. The feature uses CSS3 Media Queries, fluid media and images, and fluid grids to create responsive designs. The download includes a complete example of a page that adapts to phone, tablet, and desktop viewports. There are also starter files so that you can follow along with the tutorial.

The TwentyEleven Wordpress Series: Part 3
Reader Level:

Welcome back to the Twenty Eleven Wordpress series! In this tutorial you will continue developing the graphics for the Safari African Adventures Wordpress site. Using the new CSS Properties panel you will also extract rules to put together a style guide that you will later use as the basis of the Wordpress CSS document. Finally, you will export a PDF for the client, as well as the graphics you will need for the production site.

The TwentyEleven Wordpress Series:
The TwentyEleven Wordpress Series: Part 1 - Introduction
The TwentyEleven Wordpress Series: Part 2
The TwentyEleven Wordpress Series: Part 3
The TwentyEleven Wordpress Series: Part 4
The TwentyEleven Wordpress Series: Part 5

The CS5 CSS Starter Page Series Part 15: Creating a Spry Widget Slideshow Free!

Reader Level:

There are many wonderful gallery/slideshow options at the Widget section of the Adobe Exchange. You'll want to explore them all, but in this tutorial we're going to install and configure the Spry Image Slideshow with Filmstrip widget.

The HTML5 CSS Starter Page Series - Part 14: Optimizing for Phone and Tablet Free!

Reader Level:

The HTML5 CSS Starter Page Series - Part 13: CSS3 Media Queries and the Mobile Web Free!

Reader Level:

The HTML5 CSS Starter Page Series - Part 12: Styling Data Tables Free!

Reader Level:

Web Fonts: Introducing @font-face - Part 2
Reader Level:

@font-face enables web developers to provide fonts they legally have the right to redistribute to their users for inclusion in web pages, reducing reliance on the fonts that are preinstalled on popular operating systems. In this series, we take a deep dive into web fonts with @font-face. In this section we learn tips to implementing @font-face

The Web Fonts Series:
Web Fonts: Introducing @font-face - Part 1
Web Fonts: Introducing @font-face - Part 2

The HTML5 CSS Starter Page Series - Part 11: The Contact Page Continued Free!

Reader Level:

Web Fonts: Introducing @font-face - Part 1
Reader Level:

@font-face enables web developers to provide fonts they legally have the right to redistribute to their users for inclusion in web pages, reducing reliance on the fonts that are pre-installed on popular operating systems.

In this series, we take a deep dive into web fonts with @font-face. In this section we learn which browsers support what font files, and the syntax for declaring those font files for each browser

The Web Fonts Series:
Web Fonts: Introducing @font-face - Part 1
Web Fonts: Introducing @font-face - Part 2

Resolving Issues with @font-face Web Fonts
Reader Level:

Last year I posted an article on tips and tricks for @font-face. A lot has changed in the past 12 months. We have many new browsers for both the desktop and for mobile. This article addresses issues, advancements and new standards in embedding fonts with @font-face.

The HTML5 CSS Starter Page Series - Part 10: The Contact Page Free!

Reader Level:

CSS3: Border-Radius
Reader Level:

Yes, it's time. You've been avoiding using CSS3 border radius because of the lack of support in IE. Well, IE9 supports border-radius. Plus, your web sites need to look 'good' but not 'identical' in all browsers. So, let's put native rounded corners to the test.

Learn the syntax for rounded and elliptical corners, and learn what bugs you'll still find in current browsers.

The HTML5 CSS Starter Page Series - Part 9: The Video Page Free!

Reader Level:

CSS3: Introducing HSL Colors
Reader Level:

CSS3 adds name colors from SVG as well as colors defined by Hue, Saturation and Lighness. In this article we explain the new HSL values, and list the HSL values of all the named colors.

The HTML5 CSS Starter Page Series - Part 8: Site Tasks Free!

Reader Level:

The HTML5 CSS Starter Page Series - Part 7: Styling the Navigation for the Layout Free!

Reader Level:

The HTML5 CSS Starter Page Series - Part 6: More Layout Styling Free!

Reader Level:

The HTML5 CSS Starter Page Series - Part 5: Styling the Layout Free!

Reader Level:

The HTML5 CSS Starter Page Series - Part 4: Markup Continued Free!

Reader Level:

The HTML5 CSS Starter Page Series - Part 2: Content Models Free!

Reader Level:

Design Your Own Custom CMX CSS Course - Part 4 Free!

Reader Level:

It's been a while since I published Design Your Own Custom CMX CSS Course - Part 3, which is part of a series that keeps a running catalog of all CSS and HTML related content on Community MX. We've released quite a few pieces since that December 2009 article, so it's time to continue the catalog where we left off. There have been articles about emerging technologies such as CSS3 and HTML5, some new JumpStarts, a new CSS Starter Page series, and even a Fireworks prototyping series. Let's get started looking at all the goodies.

The HTML5 CSS Starter Page Series - Part 1 Free!

Reader Level:

CSS3 Transforms: Rotate, Skew, Scale & Translate Free!

Reader Level:

Supported in Firefox 3.5+. Opera 10.5 and Webkit since 3.1, the transform CSS property lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated, scaled, and skewed. In this tutorial, you'll learn to manipulate an element's appearance using transform functions.

Note: This article will not work in Internet Explorer, as we're talking about a feature that is not supported in Internet Explorer

Introducing CMX JumpStart Merry Christmas Free!

Reader Level:

It's that most wonderful time of the year - not only is it the holiday season, but we're also gearing up for Community MX's annual open house. The entire web community is invited to browse our offerings for free, as well as accept our gift of a free CMX Dreamweaver template, CMX JumpStart Merry Christmas.

In this article I will discuss the features of the new JumpStart, and show you a modification that should get you started in thinking about ways you can use it in your own projects.

CMX JumpStart: Merry Christmas Free!

Reader Level:

Merry Christmas from Community MX!

To celebrate Christmas we are releasing our annual Christmas JumpStart. We would also like take the opportunity to wish you a great holiday and hope that everything you wish for is granted in the New Year. The Christmas JumpStart consists of four columns, one being occupied by the Spry Accordion widget, and the other three are floated columns. The layout presents the opportunity to display a great deal of information and lends itself nicely to a home page for a portal web site.

The CS5 CSS Starter Page Series Part 15: Lesson Plan for Teachers Free!

Reader Level:

Now that we've completed the CS5 CSS Starter Page series, I would like to share my own lesson plans for incorporating the tutorials into a fifteen semester course. Join me as I give a class by class description of what I teach to my students at Montgomery College.

The CS5 CSS Starter Page Series Part 14: Adding a Contact Form Free!

Reader Level:

Introducing CMX JumpStart Lucknow Free!

Reader Level:

With President Obama in India this week, it is a good time to offer a JumpStart based on an Indian city. Lucknow is the capital city of Uttar Pradesh in India, and is also now the latest CMX JumpStart, CMX JumpStart Lucknow.

The main construction of CMX JumpStart Lucknow consists of liquid outer DIVs, but fixed inner content widths. This ensures that the design fills out the user's browser width while still maintaining a good line reading length. 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. The optional third column includes a styled Spry Accordion widget. A version of the Lucknow logo is included as a multi-layered PNG that is fully editable.

(And if this is all still not enough for you, later in this article I will give you a bonus CSS3 style sheet. You'll be able to add gradients, rounded corners, box shadows, and RGBA color to enhance the design without the weight of extra images.)

CMX Jumpstart: Lucknow
Reader Level:

Lucknow is, of course, renowned for its blue lights, and the colour theme is based around this.

Lucknow 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, Lucknow has it all.

The CS5 CSS Starter Page Series Part 13: Adding a Gallery Free!

Reader Level:

The CS5 CSS Starter Page Series Part 12: Adding a Data Table Free!

Reader Level:

IE6 & IE7 Implicit Label Bug Free!

Reader Level:

Even though IE6 has been around for nearly a decade, there are still some undiscovered bugs. As we push the limits of what new browsers can do, we go beyond the limits of what old browsers are capable of. As we push the limits, new bugs may be discovered. Here is a background image bug that I came across that I found no documentation on. When you find a new bug, document it. You may have pulled your hair out because of it.

The CS5 CSS Starter Page Series - Part 11: Creating the Template Free!

Reader Level:

The CS5 CSS Starter Page Series - Part 10: Making it Your Own Free!

Reader Level:

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 10: Making it Your Own
The CS5 CSS Starter Page Series - Part 11: Creating the Template
The CS5 CSS Starter Page Series - Part 12: Adding a Data Table
The CS5 CSS Starter Page Series - Part 13: Adding a Gallery
The CS5 CSS Starter Page Series - Part 14: Adding a Contact Form

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 10: Making it Your Own
The CS5 CSS Starter Page Series - Part 11: Creating the Template
The CS5 CSS Starter Page Series - Part 12: Adding a Data Table
The CS5 CSS Starter Page Series - Part 13: Adding a Gallery
The CS5 CSS Starter Page Series - Part 14: Adding a Contact Form

The CS5 CSS Starter Page Series - Part 6: Converting to Horizontal Navigation Free!

Reader Level:

The CS5 CSS Starter Page Series Part 5: Adding Navigation Systems Free!

Reader Level:

The CS5 CSS Starter Page Series Part 4: Refining Details with CSS Free!

Reader Level:

@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.

The CS5 CSS Starter Page Series Part 3: Structuring with CSS Free!

Reader Level:

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.

The CS5 CSS Starter Page Series - Part 2: Marking up the Page Free!

Reader Level:

The CS5 CSS Starter Page Series Part 1: The Yukon Free!

Reader Level:

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.

The CSS Starter Page Series Part 15: Adding a Drop Cap with :first-letter
Reader Level:

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

The CSS Starter Page Series Part 14: Designing With A CSS Table Grid
Reader Level:

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

The CSS Starter Page Series Part 13: Designing with a Grid
Reader Level:

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.

The CSS Starter Page Series Part 12: Adding a JQuery Slideshow
Reader Level:

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.

The CSS Starter Page Series Part 11: Adding a Handheld Style Sheet
Reader Level:

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.

CSS for Absolute Beginners - Part 33b: attr(),counter, increment & reset
Reader Level:

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

The CSS Starter Page Series Part 10: Adding a Print Style Sheet
Reader Level:

The CSS Starter Page Series - Part 9: Working with the Conditional Comment
Reader Level:

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

CSS for Absolute Beginners - Part 33a: The CSS content Property
Reader Level:

The CSS Starter Page Series Part 8: Managing Content with Spry
Reader Level:

CSS for Absolute Beginners - Part 32: Generating Content with CSS
Reader Level:

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

The CSS Starter Page Series Part 6c: Adding Navigation Schemes Part Three
Reader Level:

CSS For Absolute Beginners - Part 31: The background Shorthand Property
Reader Level:

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

CSS For Absolute Beginners - Part 30: The background-attachment Property
Reader Level:

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

The CSS Starter Page Series Part 6b: Adding Navigation Schemes Part Two
Reader Level:

CSS for Absolute Beginners - Part 29c: background-position Property
Reader Level:

CSS for Absolute Beginners - Part 29b: background-position Property
Reader Level:

The CSS Starter Page Series Part 6A: Adding Navigation Schemes
Reader Level:

CSS for Absolute Beginners - Part 29a: background-position Property
Reader Level:

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.

CSS For Absolute Beginners - Part 28: background-repeat Property
Reader Level:

CSS For Absolute Beginners - Part 27: background-image Property
Reader Level:

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.

CSS For Absolute Beginners - Part 26: background-color Property
Reader Level:

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

CSS for Absolute Beginners - Part 25: Understanding Color Names
Reader Level:

CSS for Absolute Beginners - Part 24: Understanding RGB Colors
Reader Level:

The CSS Starter Page Series Part 5: Shadows and Rounded Corner Background Images
Reader Level:

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.

The CSS Starter Page Series Part 4: Rounded Corner Background Images
Reader Level:

CSS For Absolute Beginners - Part 23: Understanding Hex Value Colours
Reader Level:

CSS For Absolute Beginners - Part 22: Styling with Multi-Classes
Reader Level:

The CSS Starter Page Series Part 3: Three Column Fluid Background Images
Reader Level:

CSS For Absolute Beginners - Part 21: Floated Navigation Lists
Reader Level:

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.

The CSS Starter Page Series - Part 2: More Background Images
Reader Level:

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.

CSS For Absolute Beginners - Part 20: Floating and Clearing Elements
Reader Level:

CSS For Absolute Beginners - Part 19: Floats & The Overflow Property
Reader Level:

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

CSS For Absolute Beginners - Part 18: Position Static
Reader Level:

CSS For Absolute Beginners - Part 17: Position Fixed
Reader Level:

CSS For Absolute Beginners - Part 16: Position Relative
Reader Level:

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.

CSS For Absolute Beginners - Part 15: Absolute Positioning
Reader Level:

CSS For Absolute Beginners - Part 14: Moving Elements In & Out of the Document Flow
Reader Level:

CSS For Absolute Beginners - Part 13: Inheritance
Reader Level:

CSS For Absolute Beginners - Part 12: Properties and Values - The font Property
Reader Level:

CSS For Absolute Beginners - Part 11: Properties and Values - The Display Property
Reader Level:

CSS For Absolute Beginners - Part 10: Properties and Values - Working with Margins & Padding
Reader Level:

CSS For Absolute Beginners - Part 9: Properties and Values - Working with Borders
Reader Level:

CSS For Absolute Beginners - Part 8: Specificity
Reader Level:

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.

CSS For Absolute Beginners - Part 7: Contextual Selectors
Reader Level:

CSS For Absolute Beginners - Part 6: Grouping Selectors
Reader Level:

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.

CSS For Absolute Beginners - Part 5: Pseudo-Classes and Elements
Reader Level:

CSS For Absolute Beginners - Part 4: Type, Class & ID Selectors
Reader Level:

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

CSS For Absolute Beginners - Part 3: Making CC & DT Style Sheets Work for You
Reader Level:

CSS For Absolute Beginners - Part 2: Linking Style Sheets
Reader Level:

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 For Absolute Beginners - Part 1: Syntax and Type Selectors Free!

Reader Level:

CSS: All Browsers Can Be Created Equally Free!

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

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.

The Dreamweaver Web Standards Lesson Plan Series Part Fourteen
Reader Level:

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.

Fixed Position in IE7 - Part Eight - Making Allowances for IE6
Reader Level:

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

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

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

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

Fixed Position in IE7 - Part Five: Fixed Popups from Flowed Elements
Reader Level:

Last time in our fixed positioning series we created a fixed popup that is triggered from one of a fixed element's child elements. Now we extend the method, and have our fixed popup triggered from within the main flow of the page.

We'll also show how such popups can be employed in ways that produce effects not possible with other forms of CSS popuppery :-).

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 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 questions with checkboxes and radio buttons where you want the labels placed to the right and for textareas where you want the labels placed above.

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

Fixed Position in IE7 - Part Four - Fixed Popups!
Reader Level:

So far we've had a lot of fun experimenting with fixed positioning in this series, but now it's time to get serious and start trying some fancier tricks. First we'll attempt a CSS-based fixed popup to compliment our fixed position layout, and then see if we can get it to work well in all modern browsers that handle fixed positioning.

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

Design Your Own Custom CMX CSS Course - Part 1 Free!

Reader Level:

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

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

From Concept to Cross-Media Compatibility: Part Eight - Building the Handheld Media Type
Reader Level:

Fixed Position in IE7 - Part Three - Fixed Position and Older IE Versions
Reader Level:

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

This is information you need, so join us!

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

Using a CF Custom Tag for Multiple Tabs
Reader Level:

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

CSS Cheat Sheet: Basic Link Styling
Reader Level:

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

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

The Complete JumpStart Catalog Update Free!

Reader Level:

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

From Concept to Cross-Media Compatibility: Part Seven - Building the Print Media Type Layout
Reader Level:

Fixed Position in IE7 - Part Two
Reader Level:

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

What are you waiting for? Let's go!

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

CMX PHP Breadcrumbs
Reader Level:

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

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

Methods for Testing in Multiple Versions of IE Free!

Reader Level:

Introducing CMX JumpStart Metropolis Free!

Reader Level:

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

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

CMX JumpStart: Metropolis
Reader Level:

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

Approximate download size: 7.1MB

Fixed Position in IE7 - Part One
Reader Level:

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

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

Here we go...

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

Modify Dreamweaver to Create a Default Style Sheet
Reader Level:

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

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

Newly Supported CSS Selectors in IE7 Free!

Reader Level:

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

From Concept to Cross-Media Compatibility: Part Six - Completing the Screen Media Type Layout
Reader Level:

Easy Nav for ColdFusion
Reader Level:

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

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

Put a Calendar on your Web Page
Reader Level:

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

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

Full Height CSS Layouts with Footers
Reader Level:

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

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

Switching CSS Based on Time of Day with PHP
Reader Level:

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

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

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

Approximate download size: 658k

Multiple Column CSS Layouts that Fill the Browser Window
Reader Level:

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

Converting the Santorini JumpStart to Use Two Columns Instead of Three Free!

Reader Level:

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

Faux Image Maps - Part Two
Reader Level:

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

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

From Concept to Cross-Media Compatibility: Part Five - Building the Screen Media Type Layout
Reader Level:

Layout Building Blocks
Reader Level:

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

CMX JumpStarts: Santorini Free!

Reader Level:

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

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

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

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

As always, the Santorini CMX JumpStart can be used in any way you wish. commercial or personal, and includes several tutorials and an extension.
CMX JumpStart:Santorini.

Santorini is structured to be as hack-free and straightforward as possible. So, if you've been looking for a relatively painfree way of getting started with CSS layouts this may be just the JumpStart for you.

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

Approximate download size: 2.9MB

CMX Announces a JumpStart Contest and FREE JumpStart Free!

Reader Level:

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

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

From Concept to Cross-Media Compatibility: Part Four - Site Structure and Image Preparation
Reader Level:

Faux Image Maps - Part One
Reader Level:

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

Create Pages that Fill the Browser with CSS Free!

Reader Level:

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

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

All About CSS Drop Shadows - Part Seven
Reader Level:

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

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

Create a Style Sheet in Dreamweaver 8
Reader Level:

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

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

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

All About CSS Drop Shadows - Part Six
Reader Level:

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

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

Create Columns with Floats Free!

Reader Level:

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

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

All About CSS Drop Shadows - Part Five
Reader Level:

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

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

From Concept to Cross-Media Compatibility: Part Three - Building the Footer and Slicing the Drawing
Reader Level:

Introduction to Design-Time Style Sheets
Reader Level:

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

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

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

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

Introducing CMX Jumpstart Greenville Free!

Reader Level:

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

CMX JumpStarts: Greenville
Reader Level:

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

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

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

All About CSS Drop Shadows - Part Four
Reader Level:

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

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

Clever CSS Menus with PHP
Reader Level:

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

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

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

Let's get started.

Float Images Within Text
Reader Level:

Before the days of CSS-based layouts, we used the align attribute of an image to make text wrap around it on the left or right. Now, with the separation of content and presentation, we should use the CSS float property to achieve this same effect. In this tutorial, you'll apply the theory from Float: The Theory to a real-world content layout technique in order to see how floats work. You'll learn how to float images left and right and have text wrap around them, as well as give them captions that match them in width.

All About CSS Drop Shadows - Part Three
Reader Level:

So far in this series we have covered easy CSS methods of faking a drop shadow, using only an extra DIV and a bit of CSS code. Now it's time to get fancier and employ actual images in the drop shadow quest. The shadows will look better, and the code won't be as scary as you think, so check it out!

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

Transparent Backgrounds in Win IE
Reader Level:

Transparent PNGs in Win IE? Sure, just use the AlphaImageLoader filter. This article explains how to use the filter, offers some examples, and shows how the results are the same or different as compared to transparent PNGs in FireFox.

Control Block Formatting Context Free!

Reader Level:

In order to become a skilled CSS developer, you need to understand the underlying concepts of CSS that make it work and not just how to produce certain visual effects. The "block formatting context" is one of those concepts that drives how CSS affects your page without you even knowing it.

Most of the time, you don't need to worry about it; it's just something that's going on behind the scenes that you don't need to get involved with. Sometimes, however, the lack of a new context can make elements interact in undesirable ways. The primary reason for setting a new context is to keep cleared elements inside a main content div from clearing floated sidebars. We'll use this problem as a case study for how to establish new block formatting contexts and to see what their effect is on the other elements around them.

All About CSS Drop Shadows - Part Two
Reader Level:

Continuing our Drop Shadow series, we expand on the simple CSS method described in Part One, showing how to make easy modifications to achieve different effects. Then we'll discuss certain vital considerations when implementing such techniques, in preparation for the more advanced methods to come.

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

Introducing CMX Jumpstart Orlando Free!

Reader Level:

Orlando, Florida. It's every kid's dream vacation spot. It's warm and sunny, and makes the world of school seem galaxies away. It's got theme parks galore that take them to galaxies far away. When most people think of Orlando, they probably think of Disney, Epcot, MGM Studios, and Sea World. Now there is also CommunityMX JumpStart Orlando to add to the list of Orlando attractions.

Orlando was designed by Chris Flick and coded by Zoe Gillenwater. Orlando 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 for which you may wish to use it. Orlando is a two-column elastic layout that also features a subhead area, a styled list as a navigation menu, and floated images.

CMX JumpStarts: Orlando
Reader Level:

Mention Orlando, and most people immediately think of theme parks, laughing kids, warm sunshine and palm trees. Our Orlando JumpStart captures this spirit of Orlando perfectly, from its imagery to fun masthead font to bright colors.

As do all our JumpStarts, Orlando 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. Orlando 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 no matter what window or font size the page's visitors are using, as well as making the design very accessible. The design also features a subhead area, a styled list as a navigation menus, and floated images.

The graphic and code techniques used to create Orlando are explained fully in the 11 tutorials that we've included in your download, as well as this article. We also include the four style sheets needed for this design (including an extensively commented one you can use for reference), the XHTML files for the layout, the two source Fireworks PNGs, and a Dreamweaver extension that allows you to create new pages based on Orlando easily.

If you'd like a more detailed look at the Orlando Jumpstart, as well as seeing a modified Orlando design, check out Sheri German's CMX JumpStart Orlando: An Introduction. Otherwise, click the link below to dive right into this JumpStart!

From Concept to Cross-Media Compatibility: Part Two - Building the Content Area
Reader Level:

All About CSS Drop Shadows - Part One Free!

Reader Level:

Do you like drop shadows on your page elements, but haven't a clue how to get them on your pages? Maybe you do know a bit about creating drop shadows, but a refresher on the modern methods would be welcome? Do you want to learn the very latest cutting edge tricks?

If you are any of these, don't go away because we now begin a series on drop shadows for HTML elements. At the start we'll keep it simple, and as we progress in the series the methods will become more advanced and effective. At the end you will be treated to a brand new method so advanced that it must wait for IE7 to arrive before you can use it properly.

Join us, won't you?

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

IE, Minimum Width, and Ems: Overcoming a CSS Disaster
Reader Level:

Internet Explorer has a lot of CSS bugs and problems. Fortunately, with a bit of help from some friendly JavaScript coders there are ways to get around most of those limitations, sometimes without even having to invalidate your CSS! In this article we'll explore one of these scenarios: using a minimum-width on elements that are based on em's.

Create a Teaser Thumbnail List Using CSS: Part 4
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 in 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.

Note: This tutorial has been updated as of 5/10/2007. You can view the updated tutorial here.

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

Introducing CMX Jumpstart San Francisco Free!

Reader Level:

We are pleased to introduce CMX JumpStart San Francisco, a great first CSS layout for students and experienced developers alike. Structured to be as hack free and straightforward as possible, this may be just the JumpStart for you if you have been holding back on CSS layouts so far. Like all JumpStarts, it uses valid XHTML and CSS as its foundation and is 508 and WAI compliant. This two-column, fixed-width layout, described rule by rule in the documentation article, makes a great learning tool.

CMX JumpStart San Francisco for Students (and Anyone)
Reader Level:

Introducing CMX Design Element Mercury Free!

Reader Level:

Our CMX design sorcerer, Gordon Mackay, is back with another CMX Design Element in our series of fully developed Fireworks design comps that you can slice and code in any way that fits your page specs. We leave elements Carbon, Krypton, and Gold, and this time offer you element Mercury in our CMX Design Element Mercury.

Persistent Page Indicator Free!

Reader Level:

When developing Web sites using good principles of usability, it is good practice to use an indicator showing what page the person is on as they surf through your site. Some people use bread crumbs as well as a persistent page indicator (many times like the down state of the button) indicating that "you are here." This page indication can be acheived by simply placing a class on the proper navigation item (and changing the item it's placed on from page to page). However, when using server-side includes, templates or library items in Dreamweaver, since the same menu is used on each instance of the page, it can be a more challenging process. Don't worry though -- CSS and the descendant selector handle the challenge quite nicely. Come along as we walk through the steps needed to create this effect.

Introducing CMX Design Element Gold Free!

Reader Level:

I am sure you remember that the symbol for Gold, Au, comes from the Latin word "Aurum". No? You don't remember that? Well, then maybe you remember this: gold is one of the most valuable commodities in the world of commerce. And a good design is also one of the most valuable commodities on the Web. It catches your visitors' eyes and encourages them to stay and explore - and perhaps even to buy. There is almost no price tag for a great design, and fortunately you don't have to come up with one all by yourself. Gordon has done the creative work for you in our latest CMX Design Element Gold. Read all about it in this article.

Another CSS Picker in ASP.NET
Reader Level:

This article will show you an easy way to dynamically link to different CSS stylesheets based on practically any criteria you wish, for example, you can specify one stylesheet for IE users, another for FireFox users, and still another for all other browsers. This technique is particularly useful if your page renders differently in the various browsers and you need to make them consistent.

From Concept to Cross-Media Compatibility: Part One - Building the Header Free!

Reader Level:

This series is for the designer that is new to CSS layouts, it will require no pre-requisite knowledge.

Once completed you will have gained the necessary knowledge of how to build a website with CSS and how to carry that design through from an initial concept in Fireworks and present the completed work to a variety of media types.

The series will discuss the techniques involved from the image creation in Fireworks through optimisation and exporting your slices.

Once the design is complete I will talk you through the reasons why the CSS structure is as it will be and discuss how the elements of the design work in relationship with each other.

The Concept to Cross-Media Compatibility Series:
From Concept to Cross-Media Compatibility: Part One - Building the Header
From Concept to Cross-Media Compatibility: Part Two - Building the Content Area
From Concept to Cross-Media Compatibility: Part Three - Buidling the Footer and Exporting the Slices
From Concept to Cross-Media Compatibility: Part Four - Site Structure and Image Preparation
From Concept to Cross-Media Compatibility: Part Five - Building the Screen Media Type Layout
From Concept to Cross-Media Compatibility: Part Six - Completing the Screen Media Type Layout
From Concept to Cross-Media Compatibility: Part Seven - Building the Print Media Type Layout
From Concept to Cross-Media Compatibility: Part Eight - Building the Handheld Media Type

Close Gaps Next to Floated Images in Internet Explorer Free!

Reader Level:

One of the most common tasks when laying out the content of a web page is floating images to the right or left so that text flows around them — something very easy to do in CSS. But when an image has the clear property set on it in addition to the float property, large gaps in the content can appear in Internet Explorer. Unlike many of IE's bugs, this one doesn't fall to its typical hacks. But, it can be fixed. In this tutorial, you'll learn two fixes for this IE bug.

Introducing CMX Design Element Krypton Free!

Reader Level:

It's a bird! It's a plane! No, it's super design CMX Design Element Krypton!

Join me as I unveil the latest Gordon MacKay Fireworks design element. We'll look at what the package includes, what articles come bundled with it, and at some possible ways you might implement it as a Dreamweaver CSS-based layout.

Create a Teaser Thumbnail List Using CSS: Part 3
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.

Note: This tutorial has been updated as of 5/3/2007. You can view the updated tutorial here.

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

Precisely Positioning div Tags in Your Page From Design View Free!

Reader Level:

Not everybody likes working in code view, indeed I would guess that many folks purchase Dreamweaver just so they don't have to work in code view.

In this article we will look at how you can insert div tags into your code, precisely. We will do this from Dreamweaver's design view by making good use of the insert div tag function that can be found on the insert bar.

Create a Teaser Thumbnail List Using CSS: Part 2
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.

Note: This article has been updated as of 4/23/07. You may read the updated version here.

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

Build a Dashboard Widget
Reader Level:

Widgets and the new Dashboard feature introduced some serious eye candy with the debut of Mac OS X 10.4 "Tiger" last year. But widgets can be seriously useful, too — not to mention great fun. This tutorial walks you through a fully functional CMX RSS feed reader widget created for Tiger. You'll see how it works...and how you can modify it to create your own Dashboard widget.

Approximate download size: 552k

Introducing CMX JumpStart Modifications Free!

Reader Level:

With our growing repertoire of JumpStarts, there are now layouts to fit a wide range of design requirements. Still, sometimes a particular JumpStart is just what you are looking for - if only you could fix one or two little details. If only the navigation had been on the right instead of left. Or what if that left DIV had been floated rather than set to position absolute? And what if instead of a fixed-width, centered layout, the JumpStart had been fluid?

We often see such sentiments on the forums, and thought it might be helpful to respond with articles that show how to modify some of our existing JumpStarts to give you a wider variety of options without having to go in and code the tweaks yourself. Towards that end, we give you CMX JumpStart Playacar, Mexico.

Changing Continents and Layouts - Modifying the Paris Jumpstart to Make Playacar, Mexico
Reader Level:

Community MX is pleased to announce the release of a modified Paris CMX JumpStarts. Based on Web standards, these versatile layouts employ valid CSS2 and XHTML 1.0 Transitional markup and pass WAI and 508 accessibility checkpoints. This makes it easy for you to quickly create new sites that work on a variety of browsers and platforms. You are only a few simple edits away from your own look and feel.

This article covers the following:

A list of what is included in the CMX JumpStarts: Playacar download
A list of the bundled tutorials that teach the theory behind the layout
Directions for creating the effects in the Fireworks PNGs
Demos of live pages

Approximate download size: 9.3MB

Create a Teaser Thumbnail List Using CSS: Part 1 Free!

Reader Level:

Modifying the Machu Picchu JumpStart to Work with Short Pages
Reader Level:

The Machu Picchu JumpStart is a great two-column, fixed-width design that can work for many types of sites. But like any web site design, it is not one-size-fits-all. If you have pages that are rather short on content, you'll notice that the side menu can overlap the footer. For most sites, this problem will never be revealed due to the length of the pages, making Machu Picchu an effortless choice. If you fall into the minority with short pages, however, there are a few easy modifications you can make to Machu Picchu to stop the footer overlap and allow you to keep using this beautiful JumpStart.

This tutorial will walk you through the basic changes to the XHTML and CSS that are needed to keep the sidebar from overlapping the footer on short pages. Included in the download for this tutorial is a revised version of both the HTML file and screen style sheet that can be used in place of the original Machu Picchu files on projects where very long sidebars or very short pages may be a reality.

Using JumpStarts with Cartweaver, Featuring Minneapolis Free!

Reader Level:

JumpStarts are great starting points for dynamic sites, and the Minneapolis JumpStart is a great starting point for a dynamic e-commerce site. Shopping carts like Cartweaver integrate well with Dreamweaver, but how do you integrate a third-party cart with a JumpStart? This tutorial, written by a member of the Cartweaver team and Community MX, shows one way of integrating the two.

Introducing CMX Jumpstart Minneapolis Free!

Reader Level:

What city has the biggest shopping mall in America? What city has a full-sized theme park inside its mall? What city is one of the most popular destinations for shopping-based vacations in the United States? Why, Minneapolis, Minnesota, of course! Home to the Mall of America, tourists flock there to shop till they drop. But there is one bigger mall in America, and indeed the world, and that is the Mall of the World Wide Web. More and more people do their shopping there, and eCommerce is hotter than ever. When we were planning our next JumpStart, we decided to do something a little different, a little out of the ordinary. We decided to do an eCommerce template and call it CommunityMX JumpStart Minneapolis.

Designed and coded by Gordon Mackay, Minneapolis is a fluid, three-column design with hidden layers. The pages are constructed using valid XHTML 1.0 markup and formatted using valid CSS 2.1 styling. Minneapolis also follows the WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design.

CMX JumpStarts: Minneapolis
Reader Level:

When it comes to shopping, Minneapolis is tough to beat. Travel + Leisure magazine called Minneapolis the 4th best shopping destination in the country, behind only New York, San Francisco and Chicago. And when it comes to jumpstarting your web designs, Community MX is the best. Our newest JumpStart boasts a pretty neat eCommerce design. So naturally we named it Minneapolis, after the city with the largest shopping mall in the United States.

The future of shopping is online, right? The Minneapolis JumpStart, with its valid XHTML 1.0 and CSS 2.1 markup, adherence to WAI and Section 508 accessibility guidelines, provides you with a solid foundation for any kind of eCommerce site.

Note: The download for this JumpStart is very large, 73MB, due in large part to the Drawing on Nature tutorial listed above. This tutorial contains four video lessons, hence the large file size. If you would like to download this JumpStart with all the bundled tutorials except this one, there is a link at the end of the article that will allow you to do so.

If you are not a member of CMX and are buying this JumpStart and can not download a 73MB zipfile, please send an email to info@communitymx.com after your purchase and we will make arrangements for you to download it in 2 parts.

JumpStart Comparison Chart Free!

Reader Level:

CMX JumpStarts are a quick and sure way to get your new site up and running fast. But how do you decide when there are so many great choices?

The JumpStart Comparison Chart lists all the JumpStarts available at Community MX. The QuickPick Feature table provides a thumbnail of the main JumpStart page, a short list of features and techniques demonstrated in JumpStart, the cost (always free to members), the layout, including the number of columns, and a link to full JumpStart description.

The full descriptions include everything from the QuickPick Feature table plus thumbnails of all pages, links to download the JumpStart and to related articles, the publish date and author(s), and the list of tutorials included with each JumpStart.

Since each of us absorb information different ways, please also check out The Complete JumpStart Catalog. It also describes each of the JumpStarts but in a much more conversational manner. It's especially valuable if you need more information about the features listed in the Comparison Chart.

CSS Cheat Sheet: Create CSS Rules
Reader Level:

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

This Cheat Sheet describes how to create CSS rules to be placed in your style sheets. It reviews the anatomy of a CSS rule and focuses on the different types of selectors available to you in styling your documents.

Dynamic & Accessible Navigation with ColdFusion
Reader Level:

In this tutorial we are going to be looking at creating a dynamic and accessible navigation system. To do this we will be using cfoutput queries and the group attribute to gather in the information for both our top level and our sub level navigation options.

Preparing For IE7 - Part Five
Reader Level:

Well, Microsoft has done it. In case you haven't heard, MS has actually released a public beta version of their new IE7 bowser! Will wonders never cease? Join us as we explain how to not only get the IE7 beta release, but also how to easily install an IE6 standalone version to work alongside IE7. That's right, you may see the future right now, and still have IE6 to kick around too! Don't worry, it's is easy revert back to the primary IE6 install if you are not happy with the beta results. As a bonus we will talk about changes you can make when supplying filtered CSS values to the different versions of IE. So buckle those seatbelts, here we go!

The Preparing for IE7 Series:
Preparing for IE7 - Part One
Preparing for IE7 - Part Two
Preparing for IE7 - Part Three: Multiple IE Browsers on One Computer
Preparing for IE7 - Part Four: Updating a Real World Style Sheet
Preparing for IE7 - Part Five

CSS Cheat Sheet: Apply CSS to Your Page
Reader Level:

Even seasoned CSS developers need a quick refresher course in CSS concepts and techniques from time to time. This CSS Cheat Sheet is designed for just that. Use it as a reference on topics that you've already learned about in-depth but need a few reminders on. This Cheat Sheet describes how to apply styles to your (X)HTML pages. Styles can occur on your page in three forms: inline, embedded, or external. Get a reminder on how each method works and which scenarios each is suited toward.

Managing HTML and CSS to Keep Clients Happy and Avoid 'Disaster' - Part Three
Reader Level:

Last time we studied the generalities of the viewport and layouts that may appear in it. This time we'll look more closely at those layout types, what they can do, and what they can't.

This is not a tutorial on constructing those layouts, but is instead an overview of how they function in browsers. We hope to demystify the topic just a little for those who may be a bit hazy on the subject.

Let's go!

The Managing HTML and CSS to Keep Clients Happy Series:
Managing HTML and CSS to Keep Clients Happy and Avoid 'Disaster' - Part One
Managing HTML and CSS to Keep Clients Happy and Avoid 'Disaster' - Part Two
Managing HTML and CSS to Keep Clients Happy and Avoid Disaster - Part Three

An XHTML, CSS and Accessible Form Template
Reader Level:

In this tutorial we will look at how we can create a generic form template that can be used as a starting point in your web designs. We'll pre-set selectors so that you can choose to display your from elements inline or at block level.

Practical/Cool Uses of Attribute Selectors
Reader Level:

In a recent article we introduced you to the concept of attribute selectors, in this article we will take that underpinning knowledge and explore two ways in which they can be used to enhance the way in which certain elements within typical (X)HTML documents are presented to a site's visitors.

In the course of studying these two examples you should be able to come up with some neat ideas for styling other page elements based on their attributes.

Emulate a Table-Based Layout with the CSS Display Property
Reader Level:

If you've already read Introduction to CSS Table-Related Display Values, you know that you can use the table-related values of the display property of CSS 2.1 to make any non-table HTML element act like any table element.

In this article, you'll use this knowledge to tell divs to act like table cells in order to create a pure CSS layout that emulates the behavior of a table layout: each column will automatically expand to hold its content (even horizontally) and adjacent columns will match each other in height.

Unfortunately, Internet Explorer (IE) doesn't support the CSS values that make this possible. But it doesn't need to: as you've already seen in CSS Negative Margins - Part Four: Three Column Liquid Layouts, negative margins can be used to emulate table behavior pretty closely in IE. Thus, after covering how to build a table-like layout for standards-compliant browsers, I'll show how to combine this new CSS with the CSS from the negative margins series to keep IE's successful layout intact without disturbing more modern browsers.

Managing HTML and CSS to Keep Clients Happy and Avoid 'Disaster' - Part Two
Reader Level:

Last time, we talked about little things coders can do to avoid friction with clients and co-workers when code is being prepared. This time we will examine the 'stage' on which we all present our content to the world.

That stage is the viewer's screen, and it's a rather changable place, so understanding what can happen to your content in different devices is crucial when handling the 'front end' of a web site. We'll go over some of the basics, including screen resolution, the viewport, how layouts behave, and more.

If you are a little hazy about these issues, join us as we clarify things for you. Let's go!

The Managing HTML and CSS to Keep Clients Happy Series:
Managing HTML and CSS to Keep Clients Happy and Avoid 'Disaster' - Part One
Managing HTML and CSS to Keep Clients Happy and Avoid 'Disaster' - Part Two
Managing HTML and CSS to Keep Clients Happy and Avoid Disaster - Part Three

Introduction to CSS Table-Related Display Values Free!

Reader Level:

One of the hardest things for web designers new to CSS layout to get their heads around is that divs don't act like table cells, the traditional building blocks of page layouts. Table cells automatically expand to hold their content, match each other in height, and stack horizontally, but divs don't do these things, making CSS layouts that emulate table layouts tricky. However, there's an easy way to get your divs to act like table-cells: tell them to using the display property. This article will introduce the table-related values of the display property of CSS 2.1 that allow you to make any non-table HTML element act like any table element. In the article following this one, you'll then learn how to use these display values to create a pure CSS layout that emulates the behavior of a table layout

Working with TopStyle: Part 6
Reader Level:

In this article we will explore the options we have at our disposal when creating a custom style sweeper. Style sweepers allow you to manage and manipulate the rules within your style sheet at a single stroke.

Managing HTML and CSS to Keep Clients Happy and Avoid 'Disaster' - Part One Free!

Reader Level:

Web design is a complex craft, made even more complex by the need to deal with clients, co-workers from other fields, and the ongoing changes in software, hardware, and the business landscape. While a lot of these things can be understood only through experience, there are still plenty of simple problems that could easily be avoided if they were known about in advance.

In this series we intend to discuss some of the 'dumb mistakes' (caused by simple ignorance) that happen when advancing coders start to use their newly won skills in the real world, to earn actual money. These common errors can't all be covered, there's just too many ways to go wrong, but we'll make a serious attempt to address the major issues. So sit back and learn about the things we and others have goofed up, over and over and over...

The Managing HTML and CSS to Keep Clients Happy Series:
Managing HTML and CSS to Keep Clients Happy and Avoid 'Disaster' - Part One
Managing HTML and CSS to Keep Clients Happy and Avoid 'Disaster' - Part Two
Managing HTML and CSS to Keep Clients Happy and Avoid Disaster - Part Three

Creating Hyperlinks in Flash
Reader Level:

In this article, you'll learn how to create hyperlinks (in Flash Player 7 or higher) using HTML-formatted text fields and the TextArea component. You'll also learn how to format hyperlinks using styles loaded from an external CSS file. Finally, you'll learn how to use the built-in asfunction protocol to invoke a Flash function when the user clicks a hyperlink.

Unobtrusive JavaScript: Dynamically Adding a Flash Music Player to MP3 Links
Reader Level:

This tutorial discusses using JavaScript to dynamically add a small Flash music player control to a page that contains links to MP3 files. With this technique, you'll merely need to link in the appropriate JavaScript to your page, and all MP3 links on a page, such as your latest Podcast, will automatically have player controls added next to them, with no further digging into the code on your part.

The Style Rendering Toolbar: Displaying Additional Elements
Reader Level:

The style rendering toolbar is a new feature in Dreamweaver 8 that I covered briefly in the Dreamweaver 8 Style Rendering Toolbar - A Sneak Peek. This is just about my favourite new CSS feature in Dreamweaver and it is a feature I use a lot.

While it is a fantastic tool straight out of the box it can also be very easily enhanced to provide greater visual indication on which elements are doing exactly what within any given design.

Redesigning the Inverness JumpStart
Reader Level:

All JumpStarts boast flexibility and the Inverness Blog JumpStart is no exception. In this article you'll see how I reskinned the site with only minor modifications to the CSS and source PNG and NO changes to the original html file at all! A true reskinning operation. Check out how I changed the feel of the site: from cool Scottish Highlands to warm tropics at sunrise.

All my CSS changes are commented (the majority of which are simply color changes). The source PNG continues to use the original slice names (okay, I did add a couple of new slices). And the article takes you step by step through my changes.

Redesigning the Inverness JumpStart
Reader Level:

Our JumpStarts are designed to be easy to rebrand with your own unique look. To show you what it takes to create a unique design from a JumpStart, I've redesigned the Inverness JumpStart by modifying the PNG and changing a few lines of CSS.

Introducing CMX Jumpstart Inverness Free!

Reader Level:

We are pleased to announce Community MX JumpStart Inverness, a design you can use to create your own Web blog. CMX JumpStart Inverness was designed and coded by new CMX partner Gordon Mackay. It is a centered, two-column, fixed-width design that makes use of background images to achieve its faux column appearance. The page is constructed using valid XHTML 1.0 Strict markup and formatted using valid CSS 2.1 styling. Inverness also follows the WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design. Read on to find out what the Inverness package includes and how you can make it your own.

CMX JumpStarts: Inverness
Reader Level:

Welcome to the latest CMX JumpStart— Inverness.

Inverness is the latest city in Scotland to attain city status. It is also the capital of the Highlands, and now it's a blog design too :)

The Inverness JumpStart is a centered, two column, fixed-width layout that emulates the styling's of a typical weblog. We chose to demonstrate this style of layout due to its current popularity as a way of representing frequently updated content on web pages.

There is nothing terribly complicated about the majority of blog designs. They all share a few common components as part of their index pages:

A summary of latest posts.
A selection of latest posts with snippets of the post content.
A link that takes the user to the detail page for the post.
A link that takes the user directly to a form that allows them to comment on the post.
A list of links to other blogs that the site's owner thinks his users will find interesting.

In addition to those features they also contain things common to all web pages… intuitive navigation and a unique form of branding that gives the owner's weblog a look all of its own.

This CMX JumpStart includes reference to all of these.

The Complete JumpStart Catalog Free!

Reader Level:

We now have a healthy portfolio of JumpStarts, and sometimes so much choice can be overwhelming. This article outlines the features of all the JumpStarts, offers guidance in choosing the right JumpStart for your project, and provides a complete catalog of our first thirteen JumpStarts.

Preparing For IE7 - Part Four - Updating a Real World Style Sheet Free!

Reader Level:

In Part 4 of our IE7 series, we loosen our collars and have some fun. We'll be digging through a real world, complex, and quite lengthy stylesheet, hunting for CSS hacks! Our goal is to find the ones that will make IE7 choke, and do whatever it takes to remedy the situation.

Each CSS hack will be taken as it comes, with tips on how to deal with each type, and the final result will be a CSS file that will pass muster when the masses start switching to IE7.

Oh, by the way, the file we will be exploring is, ahem... CMX's own stylesheet! Please don your protective gear and join us, won't you?

The Preparing for IE7 Series:
Preparing for IE7 - Part One
Preparing for IE7 - Part Two
Preparing for IE7 - Part Three: Multiple IE Browsers on One Computer
Preparing for IE7 - Part Four: Updating a Real World Style Sheet
Preparing for IE7 - Part Five

Creating Elastic Layouts with the em Unit Free!

Reader Level:

Traditionally, there have been two types of web page layouts: fixed/static or liquid/fluid. Now that CSS-based layout is possible, there are several more options. One of these is called elastic layout. In an elastic layout, the width of columns is set in ems so that the design can scale as the user's text size is changed. This can create layouts that are more flexible and attuned to the user's preferences than fixed-width, pixel-based designs but afford the designer more control over the placement of elements on the page than liquid, percentage-based designs. This article will show how to use ems as a measurement of width and introduce the technique behind a fully elastic design.

Preparing For IE7 - Part Three - Multiple IE Browsers on One Computer Free!

Reader Level:

As the introduction of IE7 looms on the horizon, bringing yet another IE/Win version to the current list of browsers that web pages must be checked in, it would be great to have the ability to easily test on all these browsers. We've discovered that we can target different IE/Win browsers using Conditional Comments (CC), but up until recently testing in multiple versions of IE required several computers, or some special software instead.

This is no longer the case. It's now possible to have IE3, IE4, IE5, IE5.5, and IE6 all working at the same time on one Windows computer! In this tutorial we'll describe how to install and label several versions IE/Win on a single computer. We'll also make a registry adjustment that will allow CCs to work properly on these newly installed browsers. Onward!

The Preparing for IE7 Series:
Preparing for IE7 - Part One
Preparing for IE7 - Part Two
Preparing for IE7 - Part Three: Multiple IE Browsers on One Computer
Preparing for IE7 - Part Four: Updating a Real World Style Sheet
Preparing for IE7 - Part Five

Working with TopStyle - Part 5
Reader Level:

In Part 5 of this series we will look at the File List Panel in TopStyle. The File List Panel has the ability to load files of varying types into the panel view allowing us easy access and drag-and-drop functionality within our style sheet.

The Working with TopStyle Series
Working with TopStyle - Part 1
Working with TopStyle - Part 2
Working with TopStyle - Part 3
Working with TopStyle - Part 4
Working with TopStyle - Part 5

The Many Uses of the Malleable em Free!

Reader Level:

Most people first encounter the em unit as a way to size text using CSS. This article will show you how to do just that. But, there's more to the em unit than just font sizing. It can be used as a length unit on any property that takes a length. You'll learn how to use the em unit as length for margin and padding to create pages that scale more gracefully.

Preparing For IE7 - Part Two
Reader Level:

We continue discussing the ways IE7 will make our lives difficult, and ways we might ease those difficulties. We'll examine enhancements to the basic conditional comment hiding method, the concerns regarding the old box model hacks, and a new alternate hiding method as well. Folks, you really will need to know this stuff!

The Preparing for IE7 Series:
Preparing for IE7 - Part One
Preparing for IE7 - Part Two
Preparing for IE7 - Part Three: Multiple IE Browsers on One Computer
Preparing for IE7 - Part Four: Updating a Real World Style Sheet
Preparing for IE7 - Part Five

A CSS Web Design Case Study: Constructing a Personal Site - XHTML/CSS Construction Part 2
Reader Level:

In this final article in the series documenting the creation of my personal web site, you'll see how I used CSS to style the content of my XHTML page to match my design comp. This included styling a list to look like a navigation menu, formatting links and other text, and using sIFR to replace the text in my headings with beautiful Flash-generated text. You'll also see how I created a print style sheet, plus learn how I tested and debugged my page.

The CSS Web Design Case Study Series:
A CSS Web Design Case Study: Constructing a Personal Site - Planning
A CSS Web Design Case Study: Constructing a Personal Site - Visualizing the Design
CSS Web Design Case Study: Constructing a Personal Site - Design Comp Construction
A CSS Web Design Case Study: Constructing a Personal Site - Slicing the Comp
A CSS Web Design Case Study: Constructing a Personal Site - XHTML/CSS Construction Part 1
A CSS Web Design Case Study: Constructing a Personal Site - XHTML/CSS Construction Part 2

Attribute Selectors
Reader Level:

A demonstration of an addition to the CSS specification that will provide front-end developers with great power over the presentation of their documents.

Introducing CMX JumpStart Cairo Free!

Reader Level:

We are excited to announce CMX JumpStart Cairo, Egypt. It was designed and coded by Adrian Senior, and makes extensive use of lush gradients and glows. It is a centered, two-column, fixed-width design, and, like all CMX Jumpstarts, is constructed using valid XHTML 1.0 markup and CSS 2.1 styling. Cairo also follows the WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design. This article will introduce you to what Cairo includes in its bundle, as well as show you an example site created from its source PNG and CSS/XHTML files.

CMX JumpStarts: Cairo
Reader Level:

Welcome to the CMX JumpStart — Cairo. Cairo is a fixed-width two-column layout that has been developed as a learning tool to show how you can use background images and work with gradients and glows to produce designs that are a little different from the run of the mill designs we see so many of on the Internet.

Working with TopStyle - Part 4
Reader Level:

Welcome to Part 4 of the working with TopStyle series; In this tutorial we will be looking at the Color Palette Editor and the Color Palette Toolbar.

We'll investigate and learn how we can manipulate the color values in our selectors, both from a global stand point and by property type.

The Working with TopStyle Series
Working with TopStyle - Part 1
Working with TopStyle - Part 2
Working with TopStyle - Part 3
Working with TopStyle - Part 4

Preparing For IE7 - Part One Free!

Reader Level:

Internet Explorer 7 is coming, and there are going to be some interesting changes and improvements when it arrives. That's good news, but not if you have been using certain CSS hacks to make IE/Win correctly display your tableless designs! If that is the case, you may expect some or all of your pages to start breaking in IE7 when it begins to penetrate the market.

We want to help you avoid pain and anguish later. So please join us now as we begin a series that will discuss the problem, offer solutions, and get you up to speed on the latest IE version testing methods. We'll also 'clean up' a real live CMX Jumpstart, all in easy stages. It's a bit like Y2K all over again, but we got through that and we can get through this too, with just a little effort. Trust us!

The Preparing for IE7 Series:
Preparing for IE7 - Part One
Preparing for IE7 - Part Two
Preparing for IE7 - Part Three: Multiple IE Browsers on One Computer
Preparing for IE7 - Part Four: Updating a Real World Style Sheet
Preparing for IE7 - Part Five

PHP Contact Forms - Part 2
Reader Level:

In the first part of this tutorial we made a contact form using PHP's mail() function. In the process of creating our script to send the mail to your inbox we checked each of the form's fields to ensure they contained the data required. In this second part of the tutorial we will look closely at CSS and some more PHP which will improve the way our form functions and looks.

The PHP Contact Forms Series:
PHP Contact Forms - Part 1
PHP Contact Forms - Part 2

A CSS Web Design Case Study: Constructing a Personal Site - XHTML/CSS Construction Part 1
Reader Level:

In the last article of this series documenting the construction of my personal site, you saw how I sliced my Fireworks design comp into individual graphics. These slices were tailored for a page built using semantic XHTML and clean CSS. In this article, you'll see how I built the structure for my site's home page using divs and semantic XHTML markup. Also, I'll show how I used CSS to lay out these divs into the visual structure I designed in my Fireworks comp.

The CSS Web Design Case Study Series:
A CSS Web Design Case Study: Constructing a Personal Site - Planning
A CSS Web Design Case Study: Constructing a Personal Site - Visualizing the Design
CSS Web Design Case Study: Constructing a Personal Site - Design Comp Construction
A CSS Web Design Case Study: Constructing a Personal Site - Slicing the Comp
A CSS Web Design Case Study: Constructing a Personal Site - XHTML/CSS Construction Part 1
A CSS Web Design Case Study: Constructing a Personal Site - XHTML/CSS Construction Part 2

Working with TopStyle - Part 3
Reader Level:

In this tutorial we will explore the CSS Selector, Editing and the Clip Library Panels. We will see how we can create different types of library items and how we can use them effectively in our work flow. We will look at orgainising our selectors in the CSS Selector panel and look at rapid coding techniques in the Editing Panel.

The Working with TopStyle Series
Working with TopStyle - Part 1
Working with TopStyle - Part 2
Working with TopStyle - Part 3
Working with TopStyle - Part 4 Coming Soon

How Inline Elements Work - Part Seven
Reader Level:

In Part Seven of this series we'll take a look at a basic facet of inline elements, specifically the 'direction' in which the text and other inline content is displayed. You may think this is an easy property to understand, but in fact, it is possible to order text characters in more than one way, and exactly such interesting things do happen in our world.

Join us as we explore the complications of 'writing direction' and ways to control those directions when needed. Your boss won't fire you if you don't know this information (we hope!), but some day such knowledge may give you what you need to perform a difficult job. Besides, it's rather interesting stuff!

The Inline Elements Series:
How Inline Elements Work - Part One
How Inline Elements Work - Part Two
How Inline Elements Work - Part Three
How Inline Elements Work - Part Four
How Inline Elements Work - Part Five
How Inline Elements Work - Part Six
How Inline Elements Work - Part Seven

PHP Contact Forms - Part 1
Reader Level:

The ability to receive feedback or enquiries from the people who visit your web site is always beneficial. If your site is hosted on a server running PHP, the creation of mail forms is a relatively simple task, made easier by one of PHP's built-in functions, the mail() function.

The PHP Contact Forms Series:
PHP Contact Forms - Part 1
PHP Contact Forms - Part 2

CMX JumpStarts: Traverse City
Reader Level:

You can rest easy using this JumpStart inspired by the tranquil and beautiful Traverse City, Michigan. As do all our JumpStarts, Traverse City 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. Traverse City includes both a three-column home page layout and a two-column inner page layout, both fixed-width, which we've set up in a way that allows you to switch between the two in your own site with ease. Both layouts feature styled lists as navigation menus, and the inner page layout includes a styled data table.

The graphic and code techniques used to create Traverse City are explained fully in the nine tutorials that we've included in your download. We also include the four style sheets needed for this design (including an extensively commented one you can use for reference), the XHTML files for both the layouts, the source Fireworks PNG, and a Dreamweaver extension that allows you to create new pages based on Traverse City easily.

If you'd like a more detailed look at the Traverse City Jumpstart, as well as seeing a modified Traverse City design, check out Sheri German's CMX JumpStart Traverse City: An Introduction. Otherwise, click the link below to dive right into this JumpStart!

Introducing CMX Jumpstart Traverse City Free!

Reader Level:

Traverse City, Michigan is one of those hidden gems that tourists sometimes stumble across by lucky chance. With over 180 miles of Lake Michigan shoreline as well as a host of lakes and bays, beach lovers can enjoy lots of sailing and sunbathing.

Traverse City was designed by Linda Rathgeber-Stewart and coded by Zoe Gillenwater. It is a centered, fixed-width design with both a two-column and three-column page from which to choose. The two-column layout also includes a styled data table. The pages are constructed using valid XHTML 1.0 markup and formatted using valid CSS 2.1 styling. Traverse City also follows the WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design.

Working with TopStyle - Part 2
Reader Level:

In this tutorial we will be looking at utilising TopStyle's report facilities to further enhance the information we can get on our style sheets and make maintenance much easier.

The Working with TopStyle Series
Working with TopStyle - Part 1
Working with TopStyle - Part 2
Working with TopStyle - Part 3
Working with TopStyle - Part 4 Coming Soon

Working with TopStyle - Part 1 Free!

Reader Level:

In this series of tutorials we will be looking at integrating TopStyle with Dreamweaver and investigating the features that TopStyle provides us with for working with CSS files.

The Working with TopStyle Series
Working with TopStyle - Part 1
Working with TopStyle - Part 2
Working with TopStyle - Part 3
Working with TopStyle - Part 4 Coming Soon

How Inline Elements Work - Part Six
Reader Level:

It's time for more enlightening details about CSS properties that affect text and other inline elements. In the sixth part of our series, we look at text-indent, which adds a special space to a text block, and white-space, a tool for controlling both source whitespace and browser wrapping behaviors. Yes, it's stuff that all well-rounded web authors need to know!

The Inline Elements Series:
How Inline Elements Work - Part One
How Inline Elements Work - Part Two
How Inline Elements Work - Part Three
How Inline Elements Work - Part Four
How Inline Elements Work - Part Five
How Inline Elements Work - Part Six
How Inline Elements Work - Part Seven

CSS Picker in ASP.NET
Reader Level:

The first time I came across a site that allowed you to select your own stylesheet, I was amazed at the stunning simplicity of the technique, and the powerful effect it could have on the user experience. Seeing as how ASP.NET is my server language of choice, I wanted to show how easy it was to implement this functionality in your very own site.

This article will show you how to create a CSS picker with ASP.NET using a Session variable and an HttpHandler. Code is presented in C# and you do not need a compiler to run the sample provided with the article.

Making it Legal: Validating Your (X)HTML and CSS Free!

Reader Level:

As a web designer, your goal is to create a page that works well and looks good across browsers and platforms. Validating your (X)HTML and CSS is one way to achieve this goal. Validation catches the silly mistakes and typos that everyone makes in their pages, so it's an important first step in creating a great web page — but remember, it's only a step. Validation is not the end goal itself. Learn why validation is important but not the holy grail of web design, then learn how to use and understand the W3C validators.

How Inline Elements Work - Part Five
Reader Level:

In Part Five of our series we'll cover the often misunderstood text-align property, as well as the letter-spacing and word-spacing properties. We'll look at what each property is supposed to do, the values available, browser support, and some of the things to watch out for if you choose to use one or more of these properties. Come along and learn about some very interesting properties!

The Inline Elements Series:
How Inline Elements Work - Part One
How Inline Elements Work - Part Two
How Inline Elements Work - Part Three
How Inline Elements Work - Part Four
How Inline Elements Work - Part Five
How Inline Elements Work - Part Six
How Inline Elements Work - Part Seven

Teaching Dreamweaver the Web Standards Way Free!

Reader Level:

I have been teaching Dreamweaver in various training venues since version 2. Each new upgrade adds more features and makes my job more complex. How does a teacher help beginners make sense of an increasingly overwhelming interface that includes seemingly endless choices? My syllabus has changed a lot over the years, and this is what I have learned: pare the syllabus to the absolute essentials. Subtract, do not add. Aim for elegant simplicity. Focus on Web Standards. This article gives teachers a syllabus they can use to help their beginning students learn Dreamweaver within the framework of Web Standards.

An Introduction to MOSe Free!

Reader Level:

The term MOSe means Mozilla, Opera and Safari enhancement. In this article we will explore some practical ways in which you can spice up your CSS designs for users equipped with up to date browsing software.

Due to the lack of modern CSS support in some browsers, many developers and designers find themselves in the rut of only using code that they know works for the masses. However, if we take advantage of modern CSS syntax and proprieatary code we can enhance aethetics beyond the norm for users with standards compliant browser software without sacrificing the experience for users equipped with older browsers.

Let's have a look at some commonly used design elements and see how we can add some more flavour to them.

How Inline Elements Work - Part Four
Reader Level:

In this, the fourth tutorial in our series, we continue with inline elements by looking at some CSS properties that directly modify the appearance of the text glyphs themselves. The font-style, font-variant, and text-transform properties are ones that most coders may not be very familiar with, but they can be useful when the need arises. We'll cover what they're supposed to do, and then look at practical applications and any potential problems with browser implementation. Onward!

The Inline Elements Series:
How Inline Elements Work - Part One
How Inline Elements Work - Part Two
How Inline Elements Work - Part Three
How Inline Elements Work - Part Four
How Inline Elements Work - Part Five
How Inline Elements Work - Part Six
How Inline Elements Work - Part Seven

Introducing CMX Jumpstart Machu Picchu Free!

Reader Level:

Machu Picchu, Peru: a rediscovered ruin, a sacred ceremonial city of the Incas, a place of ethereal beauty, and now also a Community MX JumpStart. CMX JumpStart Machu Picchu, designed and coded by Adrian Senior, was built specifically to take advantage of the new Style Rendering Toolbar in Dreamweaver 8. It includes style sheets for the screen, print and handheld media types.

Read on to learn more about this centered, two-columnm, fixed-width, Web Standards compliant CSS layout.

CMX Jumpstart: Machu Picchu
Reader Level:

Welcome to our latest CMX JumpStart offering; Machu Picchu.

Machu Picchu has been developed to be accessible to screen, print and handheld devices. Handheld devices are still very much a gray area in our content delivery for web pages. PDAs and more modern phones can do a very good job of rendering web pages and with a little tweaking can provide us with access to very usable and good looking web sites.

Similarly a print style sheet, when correctly set, can give our users access to printed content that can be digested at their leisure. Web pages that don't print correctly can be very annoying and detract from the site's value. It is these two media types that we will be focusing on along with screen media in Machu Picchu. The aim is to provide content of a high quality to screen, handheld and print medias.

How Inline Elements Work - Part Three
Reader Level:

A large variety of CSS rules are available to modify text elements, some easy and straightforward, and some less so. Familiarity with the ways text styling is actually handled in real browsers can save a lot of time when designing pages. In this tutorial installment we'll cover the color, font-weight, and font-family properties from the easy category, and text-decoration from the not-so-easy category. Join us!

The Inline Elements Series:
How Inline Elements Work - Part One
How Inline Elements Work - Part Two
How Inline Elements Work - Part Three
How Inline Elements Work - Part Four
How Inline Elements Work - Part Five
How Inline Elements Work - Part Six
How Inline Elements Work - Part Seven

The CMX CSS Hack Cheatsheet PDF
Reader Level:

Hacks and other CSS rule fragments can include a dizzying combination of slashes, asterisks, and sequences of code. How does anyone remember all that? And how does anyone remember which hack works for what problem? Today we have just the solution: a one-page PDF you can print out that includes the most popular hacks, conditionals, and cheats. Tape it to your desktop and give it a glance when you need that code in a hurry. You'll have six IE Conditionals, the Tan Hack and the Tan Hack with Anti-Mac hack, a hide from IE Mac hack, a feed only to IE Mac hack, the Caio Hack and the Anti-Caio Hack, the Holly Hack, the Box Model problem hack, fully clickable IE buttons, two classes for clearing floats, and the "bones" for a fixed-width centered layout all at your finger tips.

Accessibility and the Label Tag Free!

Reader Level:

In this tutorial we will look at how we can build and lay out accessible forms. In particular we will focus on the label element and we will see how the label can be used to not only increase the focus area of any form element but at the same time be utilised to give our form layouts a little more structure than a simple stacking of form elements in a single column.

How Inline Elements Work - Part Two
Reader Level:

In part one we introduced the base concepts behind inline elements, and now we start getting into some details behind text display, which is the primary inline content on the web.

We'll circle around the EM Square a bit, find out about fine tuning of font sizes, and lift the lid on line-height just a little. As always in this series, we attempt to make the arcane world of text and inline elements less confusing to the new and not-so-new coder alike.

The Inline Elements Series:
How Inline Elements Work - Part One
How Inline Elements Work - Part Two
How Inline Elements Work - Part Three
How Inline Elements Work - Part Four
How Inline Elements Work - Part Five
How Inline Elements Work - Part Six
How Inline Elements Work - Part Seven

Creating the Print Style Sheet for Vienna: Part Two
Reader Level:

In Part One of this series we explored reasons why we might want to include a print style sheet in our web pages. We especially focused on the problems many browsers have with printing out CSS layouts unless we make changes to floats and any positioning other than static. We looked at the various ways to attach a print style sheet, and we reconstructed Vienna's print style sheet. Now we'll look at some of the paged media properties in the CSS2 specifications that, if better supported, could provide almost as much sophisticated control as there is in print production. Next we'll look at creating page breaks and solving margin problems. And finally, we'll look at generated content in general, and especially focus on the attr() function that enables us to automatically print full URLs after link text by using the content property in conjunction with the :after pseudo class.

The CSS Styles Panel in Dreamweaver 8: A Sneak Peek Free!

Reader Level:

One of the great new CSS tools in Dreamweaver 8 is the new, unified CSS Styles panel. All style information for all the elements on your pages is stored in this one central location. As with previous versions of Dreamweaver, you can use the panel to create, view, edit and remove style rules, as well as attach style sheets. Now, however, properties are laid out in a grid for easy editing, and the cascade for all your rules is displayed for you, to help you understand how each rule is affecting your page. You can select any element on your page and instantly see what rules are affecting it and what properties have been set for it. The CSS Styles panel provides the ease of use for those new to CSS, with a depth of information that advanced CSS users will appreciate.

How Inline Elements Work - Part One
Reader Level:

Have you ever tried to use CSS to modify text? Nearly everyone has, but that doesn't mean that everyone really knows what's going on or how to properly control text so it looks the way they prefer. This is understandable considering the complexities of text display rules, but it doesn't have to stay that way.

Join us as we begin a series on text, inline elements in general, and all things relating to them, all delivered in easy bite sized pieces that anyone can understand.

The Inline Elements Series:
How Inline Elements Work - Part One
How Inline Elements Work - Part Two
How Inline Elements Work - Part Three
How Inline Elements Work - Part Four
How Inline Elements Work - Part Five
How Inline Elements Work - Part Six
How Inline Elements Work - Part Seven

Creating the Print Style Sheet for Vienna: Part One
Reader Level:

You may have noticed that we included a print style sheet with CMX JumpStart Vienna. There are many good reasons to make print style sheets for CSS layouts, but one in particular persuaded me to always include one. In part one of this series we'll look at print style sheets in general, as well as reconstruct the Vienna print style sheet.

CSS Flyouts - Part Five (With Arrows)
Reader Level:

In this installment of our CSS Flyouts series we will add helpful arrows pointers as indicators that a vertical navigation menu has flyout submenus that can be accessed. Using code from a previous tutorial as our starting point, we will add 'lead out' and even 'lead in' arrows to visually demonstrate what the user can expect.

This tutorial covers the additional code and logic behind the method presented to add the arrows, but presumes that the reader has an understanding of the menu and flyout-coding portions of this series.

The CSS Flyouts Series:
CSS Flyouts - Part One
CSS Flyouts - Part Two
CSS Flyouts - Part Three
CSS Flyouts - Part Four
CSS Flyouts - Part Five (With Arrows)

Getting Rid of the Page Shift Free!

Reader Level:

If you've built a centered, fixed-width site, or just browsed through any sites with such layouts, you may have noticed a strange left to right shift in the content between pages that doesn't occur in Internet Explorer, but does in other browsers, such as Firefox, Opera, and Safari. Find out why it happens and what to include in your style sheet to prevent it on your own site, as well as how to customize your browser so that you never see the shift again on any site across the web!

Reconstructing Vienna: The Cascading Style Sheet
Reader Level:

If you've already followed along with my CMX JumpStart Vienna: Reconstructing the Markup article, then you're ready to take the structure and give it some cosmetic beauty. We have all our components, but now we need to create a style sheet that will lay them out in an organized design that enhances comprehension and usability. Let's get started on reconstructing the CSS of CMX JumpStart Vienna.

Redesigning the Vienna JumpStart
Reader Level:

Vienna isn't famous just for composers. It's well known throughout Europe for its coffee houses. This variation on the Vienna Jumpstart attempts to capture the ambiance of Viennese coffee houses. Bonus: an authentic Austrian Strusel recipe. :-)

Reconstructing Vienna: The Markup
Reader Level:

Upon releasing a JumpStart, we occasionally hear requests for a step-by-step reconstruction of how it was done. Sure, it's nice to have a great template that allows you to quickly whip up an accessible and valid site for clients. It's also nice to have all those great bundled articles that — face it — most of us never have time to read. The extensively commented CSS is also wonderful, but some of that detail can seem daunting. Wouldn't it be nice to have someone hold your hand as you get initiated into the magic of CSS layouts so you can really understand how it's done?

If this sounds like something you'd like to participate in, get ready for a two-part series that lets you recreate Vienna from start to finish. Today's article will teach you to plan your structure and write your markup. Part two, which will appear tomorrow, will help you penetrate the mysteries of its CSS documents, both print and screen.

Note: You will need to download CMX Jumpstart Vienna in order to follow along with this tutorial.

If you're ready, let's first ascend to "Wrapper Heaven."

Introducing JumpStart Vienna Free!

Reader Level:

It wouldn't be much of a stretch to call Vienna the cultural capital of Europe. With its long history as the home to such cultural icons as Franz Schubert and Johann Strauss, as well as the numerous museums and its world-famous opera house, Vienna has long been known as a city where culture and sophistication are the norm. It's no wonder then that for our latest JumpStart design we turned to our own cultural maven—Sheri German—for the creation of a design that is as stylish as the city it is named after.

In addition to the use of valid XHTML 1.0 and CSS 2.1, and validating for 508 and WAI, we have a number of special features in Vienna. The three-column layout has two outer columns with fixed widths, a fluid center column for content, and a very cool fluid header and footer. The two-column layout has a fixed-width left column and fluid right column. There are also unordered lists for navigation: one for the main navigation, one for the sub navigation, and one for the footer navigation. We have also added a search field, and if your server provides PHP and MySQL, you can follow Sheri's bundled article Creating a Search Engine with iSearch to make a working search engine for your site. So far, reasonably cool, right? But hold on. We have something far more exciting to reveal with this JumpStart. We will introduce a new and revolutionary technique called Jello Mold. As with all our JumpStarts, Vienna was tested extensively in all major browsers. You can view the screenshots here

CMX JumpStart: Vienna
Reader Level:

Last summer we took a trip to Germany and Austria with our son's orchestra director. My favorite city was Vienna, Austria. So it is only natural that I should choose Vienna for my city as I "change hats" from JumpStarts marketer to JumpStarts creator. I am particularly pleased and excited to offer our latest CMX JumpStart: Vienna.

In addition to the use of valid XHTML 1.0 and CSS 2.1, and in addition to validating for 508 and WAI, we have a number of special features in Vienna. This three column layout has two outer columns with fixed widths, a fluid center column for content, and fluid header and footer. There are also unordered lists for navigation: one for the main navigation, one for the sub navigation, and one for the footer navigation. We have also added a search field into an area that is at the top of the page outside the main centered layout. So far, reasonably cool, right?

But hold on. We have something far more exciting to reveal with this JumpStart. We will introduce a new and revolutionary technique called Jello Mold that has an implied minimum and maximum width that works in Internet Explorer without the use of Javascript! Furthermore, this technique allows for fluid margins on the fluid centered layout that depend on the size of the user's window.

The download folder for this article includes a bundle of 11 articles (including two about Jello Mold technique), a starter page, an images folder, four style sheets (including design-time and print), a source png, the Vienna extension, an installation and usage guide, and this article as a PDF.

The Jello Mold: A New Look at Min- and Max-width For Web Pages - Part Two
Reader Level:

In Part One of the Jello Mold series we showed how proper styling could create a page 'wrapper' that would fill the window, but also have a minimum width that works for all modern browsers, even Internet Explorer for Windows and Mac.

This installment examines a modification that allows much finer control over the displayed width of the page content, from fixed to fully fluid. We will also add a maximum width to that same content in a way that IE/Win can support.

Using CSS with Flash MX 2004 UI Components
Reader Level:

Most Flash designers and developers use CSS in Flash movies to control the styling of text within Flash dynamic textfields. You can also use CSS to style just about anything else in Flash movies, including UI components. In this tutorial, you learn how to create a simple stylesheet that controls the look of a ComboBox component.

The Jello Mold: A New Look at Min- and Max-width For Web Pages - Part One Free!

Reader Level:

When designing a web page, a very important factor is width. If you do not assign an overall width to your page it will fill the user's browser window, whereas a rigid pixel-width wrapper will keep the page width constant, but has its own potential negative points.

As you can see, this is not a trivial issue. Ideally, we would be able to use the CSS min-width and max-width properties to solve the problem. However, Internet Explorer browsers (both Win and Mac) do not currently support them. Scripts are available to accomplish the task, but can introduce browser bugs of their own.

The first part of this tutorial series will introduce a new method of allowing min-width to be simulated in IE browsers without using scripts. It is cross-browser-friendly, as well. We think you're going to like the Jello Mold.

Exporting an Embedded Stylesheet to an External Stylesheet Using Dreamweaver MX 2004
Reader Level:

CSS is all the rage these days, and for many good reasons. However, if you are new to the whole CSS method of controlling web pages, it can be intimidating when you begin. The goal of this video tutorial is to show you how to create a very basic embedded (internal) stylesheet using the Property inspector, and then export that embedded set of rules to an external file.

Styling Skip Nav Links
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 followup tutorial, you'll learn how to style your skip nav links using CSS to hide them from visual users.

Before reading this article, 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 worst methods and move to the best, finishing with a method that can return the usefulness of your hidden skip nav links to keyboard users.

List Display Problems In Explorer For Windows - Part Two
Reader Level:

The major cause of list problems in Internet Explorer involves whether a list or its children are granted the mysterious Microsoft property called 'layout'. In this tutorial we will demonstrate what happens in three versions of the Internet Explorer browser when 'layout' is applied to various elements in a typical vertical navigation list. We will also make recommendations on what to do to create a workable, cross-browser display of the list that solves the IE display problems. You know you want to follow along!

Introducing Jumpstart Vegas Free!

Reader Level:

We proudly introduce CMX JumpStart Vegas, designed by Fireworks expert Linda Rathgeber, and coded by CSS guru Stephanie Sullivan. Vegas includes a Flash slideshow, FlashObjects JavaScript for accessibility, sIFR for using custom fonts on your pages, a form with an often requested complex layout, and a golden design that does justice to the town that never sleeps. It's all there, ready for you to adapt it for your own sites.

CMX JumpStart: Vegas
Reader Level:

Las Vegas, entertainment capital of the world, inspired this exciting JumpStart design. As with all the JumpStarts, you can use and modify the design in any way you see fit, for commercial work or otherwise.

Two pages, a home page and contact page, are included in this JumpStart. Both pages feature a fixed width, centered design using a faux column technique. The home page includes a customizable Flash Slideshow component that includes a demonstration of images loaded using an XML file. This JumpStart features the cutting edge and accessible sIFR technique. sIFR allows you to use any font currently on your computer to create your headings. The contact page features a styled form using fieldset and legend. The pages are constructed using valid XHTML 1.0 markup and formatted using valid CSS 2 styling. We provide an extensively commented style sheet so you know what each piece does and how to change it to suit your design. Vegas also follows the WAI and Section 508 accessibility guidelines to provide you with a solid foundation for your work and give your users the best experience possible.

We've included the PNG file used to create the layout so you can adapt it with your own look and colors. It features masks that allow you to easily replace our graphics with your own, enabling you to adapt this design for any number of uses or clients. It includes the CMX Flash Slideshow component and the graphic and code techniques used to create Vegas are explained fully in the 13 tutorials that we've included in your download. Those techniques that are not covered in the bundle are explained here, providing you with not only a robust template, but a learning tool giving you insite into the web design process as well.

If you'd like a more detailed look at the Vegas Jumpstart, as well as seeing a modified Vegas design, check out Sheri German's CMX JumpStart Vegas: An Introduction.

List Display Problems In Explorer For Windows - Part One Free!

Reader Level:

This tutorial begins a series about display problems encountered in Internet Explorer for Windows when using list elements. First up, we will discover some differences between browsers and how to compensate for them, and then we will solve the mystery of the missing bullets in IE. Join us!

Dynamic CSS - CSS and the DOM
Reader Level:

The ability to control, update, and change CSS in realtime opens a whole world of new possibilities to web developers and the experiences that they can offer users. In the last part of this series we took a look at how we could use the Document Object Model and JavaScript to access and change CSS properties in realtime. Although we utilized the DOM to access those style properties though we really didn't get into the importance of the relationship between it and CSS. This time around we'll explore that important connection and see how a combination of the two technologies can be used to create stunning new possibilities.

The Dynamic CSS Series:
Dynamic CSS - Challenging Traditions
Dynamic CSS - Basic Real-Time Style Manipulation
Dynamic CSS - Real-Time Rule Changes
Dynamic CSS - CSS and the DOM

CSS Negative Margins - Part Four: Three Column Liquid Layouts
Reader Level:

The CSS Negative Margins series has shown you how to create a two column layout that resizes with the browser window, has equal height columns, has proper source order and is resistant to Internet Explorer's tendency to drop large content next to floated columns. This tutorial shows how to use the same techniques, plus a couple new tricks, to create a three column version of the layout with the same features.

Note: This layout doesn't work as intended in Internet Explorer for the Mac. When you resize your window to the point where the photo fills the whole div, the sidebar will drop down below the main column. If you still need to fully support Mac IE at multiple screen resolutions, this technique is probably not for you!

The CSS Negative Margins Series
CSS Negative Margins - Part One
CSS Negative Margins - Part Two: Two-Column Liquid Layouts
CSS Negative Margins - Part Three: Improving the Two-Column Layout
CSS Negative Margins - Part Four: Three-Column Liquid Layouts

CSS Flyouts - Part Four (Dropdowns with Flyouts)
Reader Level:

Previously in our CSS Flyouts series we developed a horizontal or 'flat' menu that when hovered, generated dropdowns below each top-level link. In this installment we will add flyouts to the dropdowns, add 'sticky hovering' zones to the flyouts to improve usability, and take a look at how to adjust the flyout's code to prevent them from displaying off the screen.

The CSS Flyouts Series:
CSS Flyouts - Part One
CSS Flyouts - Part Two
CSS Flyouts - Part Three
CSS Flyouts - Part Four

Dynamic CSS: Real-time Rule Changes
Reader Level:

The ability to give users the power to manipulate and control the styling of your site in real-time can change the way users experience and use your site forever. In this article we'll take a look at how to work with and change style sheet rules in real-time.

The Dynamic CSS Series:
Dynamic CSS - Challenging Traditions
Dynamic CSS - Basic Real-Time Style Manipulation
Dynamic CSS - Real-Time Rule Changes
Dynamic CSS - CSS and the DOM

Modifying the Aspen JumpStart to Work with Short Pages
Reader Level:

There's no such thing as one-size-fits-all in web design — some layouts are suited to particular types of content, and others are not. The Aspen JumpStart is no exception. One thing it does not handle well are pages with very little content. As a three column, liquid design, it's better suited toward pages that are bursting at the seams. But luckily, it can be revised to improve its performance on short pages. This article will explain how and includes all the modified files.

If you previously purchased the Aspen JumpStart, please send an email to info@communitymx.com and we will send you this article and the support files at no charge. Please include the email address for the PayPal account used to make the purchase in your email.

Dynamic CSS - Basic Real-time Style Manipulation
Reader Level:

The ability to give users the power to manipulate and control the layouts and styling of your site in real-time can change the way users experience and use your site forever. In this article we'll take a look at the concepts behind real-time style manipulation and work through a basic example.

The Dynamic CSS Series:
Dynamic CSS - Challenging Traditions
Dynamic CSS - Basic Real-Time Style Manipulation
Dynamic CSS - Real-Time Rule Changes
Dynamic CSS - CSS and the DOM

CSS Flyouts - Part Three: Dropdowns
Reader Level:

In Part Two of the series we showed how CSS Flyouts can be made 'user-friendly' by adding 'sticky hovering' zones. At this point we'll pause briefly from embellishing the flyouts and cover CSS Dropdowns as a logical companion. The needs of a dropdown navigation menu are somewhat different from a side-moving flyout menu, primarily because the top level links in a dropdown run horizontally rather than vertically as in the flyout. In this installment we'll look at these differences and construct a dropdown navigation menu.

The CSS Flyouts Series:
CSS Flyouts - Part One
CSS Flyouts - Part Two
CSS Flyouts - Part Three
CSS Flyouts - Part Four

Dynamic CSS - Challenging Traditions
Reader Level:

CSS has revolutionized the way that we design and build web sites. By combining CSS with other web technologies though we now have the right set of tools to begin to make user experiences on our sites truely personalized and unique. In this article we'll start to explore those possibilities and see how dynamic CSS can be used to add a whole new dimension to site designs and experiences.

The Dynamic CSS Series:
Dynamic CSS - Challenging Traditions
Dynamic CSS - Basic Real-Time Style Manipulation
Dynamic CSS - Real-Time Rule Changes
Dynamic CSS - CSS and the DOM

CMX JumpStarts: New Orleans
Reader Level:

The New Orleans JumpStart has been designed with the Umoja String Quartet and their jazzy feel at the center. Two pages, a home page and contact page, are included in this JumpStart. Both pages feature a fixed width, centered design with a scrollable content area. The home page includes a customizable MP3 player built in Flash that includes music from from two Umoja String Quartet CDs: "Songs of Our Fathers" and "Things Ain't What They Used To Be."

The pages are constructed using valid XHTML 1.0 markup and formatted using valid CSS 2.1 styling. We provide an extensively commented style sheet so you know what each piece does and how to change it to suit your design, as well as another version of the style sheet with the comments stripped out so you don't have to cut out all those extra kilobytes by hand when you're ready to go live! New Orleans also follows the WAI and Section 508 accessibility guidelines to provide you with a solid foundation for your work.

Beyond just the pages, we've also included all the source files used to create both of the layouts, both PNG and Flash. All layers in the PNG file are organized and labeled so that it's easy to make any modifications you need.

The graphic and code techniques used to create New Orleans are explained fully in the 14 tutorials that we've included in your download. Those techniques that are not covered in the bundled tutorials are explained in this article.

If you'd like a more detailed look at the New Orleans Jumpstart, as well as seeing a modified New Orleans design, check out Sheri German's CMX JumpStart New Orleans: An Introduction.

Introducing CMX Jumpstart New Orleans Free!

Reader Level:

The suspense has been building around the release of our next JumpStart, and now it's here: Jazzy JumpStart New Orleans, a hybrid CSS/Flash layout that should appeal to anyone needing to build a music site. Its inspiration is derived from two sources: the sites of Sony artists such as Vladimir Horowitz, Joshua Bell, Louis Armstrong, and The Isley Brothers where Flash and frames combine, and content scrolls in a fixed-area; and the recent acquisition of our own "CMX artist" the jazzy, bluesy Umoja String Quartet, whose site will be hosted on Community MX in the upcoming weeks.

Read on to find out more about this feature-rich JumpStart that includes an MP3 Player that uses wmode, FlashObject for accessibility, scrolling content, functional forms, and a fully editable source PNG.

CSS Negative Margins - Part Three: Improving the Two-Column Layout
Reader Level:

In the last CSS Negative Margins article, you learned how to use negative margins to create a basic two column layout that resizes with the browser window, has proper source order and is resistant to Internet Explorer's tendency to drop large content next to floated columns. This tutorial returns to that layout to improve its visual look, making it a great starting point for your own two column designs. We'll add padding to the columns, fix the gaps in Internet Explorer, and make both columns appear to be equal height.

Note: This layout doesn't work as intended in Internet Explorer for the Mac. When you resize your window to the point where the photo fills the whole div, the sidebar will drop down below the main column. If you still need to fully support Mac IE at multiple screen resolutions, this technique is probably not for you!

The CSS Negative Margins Series
CSS Negative Margins - Part One
CSS Negative Margins - Part Two: Two-Column Liquid Layouts
CSS Negative Margins - Part Three: Improving the Two-Column Layout
CSS Negative Margins - Part Four: Three-Column Liquid Layouts

Dynamic CSS Files with PHP
Reader Level:

Dynamically generated CSS adds a whole new level of managability and optimization to CSS. In this article we'll take a look at how to put PHP scripting within your CSS files, and some of the advantages of doing so.

CSS: Getting Into Good Coding Habits Free!

Reader Level:

In this article we will look at what I would consider to be good coding practices when laying out a CSS design and building your style sheet.

We will look at how we can make our style sheets more manageable through the use of comments and see how we can use our style sheets to their greatest effect.

CSS Flyouts - Part Two
Reader Level:

In the first installment of our CSS Flyouts series we looked at how to create a basic flyout navigation menu with CSS that will work in most modern browsers using the :hover pseudo-class. For our second part we promised to explain the 'sticky hovering' concept that allows a flyout menu to be 'forgiving' so that if a user mouses off a flyout a little it won't instantly vanish. CSS has no timing based rules (like JavaScript does), but CSS can be made to do some pretty amazing things, as should be clear by now. Come explore with us!

The CSS Flyouts Series:
CSS Flyouts - Part One
CSS Flyouts - Part Two
CSS Flyouts - Part Three
CSS Flyouts - Part Four

Introducing the CMX CSS Snippet Collection - Part One
Reader Level:

CSS Positioning layouts are hot, and many people are trying to make the transition from the mostly reliable, but non-semantic, table-based layouts we've all used for years. CSS 2.1 provides great features for laying out pages, and the specs for CSS 3 indicate that some day the future of design on the web will be ever brighter indeed.

We here at CMX try to make the learning curve as painless as possible with our many CSS tutorials and articles. Now we'd like to offer you a diagnostic tool that spares you some typing and memorizing. We are proud to introduce the CMX CSS Snippets Collection. Snippets, as you may well be aware, are bits of reusable code that paste as blocks or around selections with the click of an insert button.

This article includes an extension for installing part one of the collection into the Dreamweaver Snippets panel, and a tutorial that explains the problems and solutions that the hacks correct.

Part One of the CMX CSS Collection includes the following:

Caio Hack
Anti-Caio Hack
IE Mac only
IE Mac only 2
Hide from Mac
Holly Hack
Box Model Hack
Tan Hack
Tan Hack and Anti-Mac combined
6 IE Conditionals for all IE, 5.0, 5, 5.5, gte 5.5, and 6

Read on and bust those bugs!

Introducing the CMX CSS Snippet Collection - Part Two
Reader Level:

CSS Positioning layouts are hot, and many people are trying to make the transition from the mostly reliable, but non-semantic, table-based layouts we've all used for years. CSS 2.1 provides great features for laying out pages, and the specs for CSS 3 indicate that some day the future of design on the web will be ever brighter indeed.

We here at CMX try to make the learning curve as painless as possible with our many CSS tutorials and articles. Now we'd like to offer you a diagnostic tool that spares you some typing and memorizing. We are proud to introduce the CMX CSS Snippets Collection. Snippets, as you may well be aware, are bits of reusable code that paste as blocks or around selections with the click of an insert button.

This article includes an extension for installing part two of the collection into the Dreamweaver Snippets panel, and a list that explains the problem and then the solution that each snippet corrects.

Our Snippets in Part Two include the following:

Win IE fully clickable CSS buttons
Win IE text inheritance in tables
Win IE double float margin
Win IE three pixel gap bug
Win IE three pixel gap bug part 2
Win IE missing image bug
IE word wrap
IE expanding boxes and too wide images
Set text size on the body
Set font-size and family on multiple selectors for NS4
Zero margins on multiple elements
Clearing element for floats
Easy clearfix for floats
Floating an image to the left
Floating an image to the right
Clearing a float after an image
Centered layouts that work

Read on and bust those bugs!

CSS Negative Margins - Part Two: Two Column Liquid Layouts
Reader Level:

A liquid or fluid layout is one in which at least one of the columns changes in width depending on the viewport size of the user. Because the end user controls the width of the columns, not you, you risk inserting content that is too large to accommodate the user's column width. If a piece of content is too large for its column, it either overflows or, in the case of Internet Explorer and float-based layouts, drops the entire column down the page. Luckily, negative margins provide a way for us to fix this problem and, in the process, make our page more accessible as well! Read on for a two column liquid layout that is resistant to Internet Explorer's float drops and has good source order. It's a great starting point for your own web page layouts.

The CSS Negative Margins Series
CSS Negative Margins - Part One
CSS Negative Margins - Part Two: Two-Column Liquid Layouts
CSS Negative Margins - Part Three: Improving the Two-Column Layout
CSS Negative Margins - Part Four: Three-Column Liquid Layouts

CSS Flyouts - Part One Free!

Reader Level:

Using the techniques learned in the CSS Tooltips series, we begin creating a CSS flyout menu system. This first installment covers building a navigation menu with single levels of nested lists. Issues relating to z-index and browser bugs are covered along with what to do if a browser doesn't support hovering (IE5/Mac), or if scripting is disabled (in IE/Win).

The CSS Flyouts Series:
CSS Flyouts - Part One
CSS Flyouts - Part Two
CSS Flyouts - Part Three
CSS Flyouts - Part Four

CSS Negative Margins - Part One Free!

Reader Level:

Of all the pieces of the CSS box model, margins are probably the easiest to grasp. But did you know that margin is one of the few CSS properties that can have negative values? This article explains how negative margins work, as well as why you would even want to use negative margins in the first place! You'll see some of the cool visual effects that negative margining can help you add to your web pages. This article will also prepare you for an upcoming piece describing how to use negative margins to create cross-browser, CSS columnar layouts.

The CSS Negative Margins Series
CSS Negative Margins - Part One
CSS Negative Margins - Part Two: Two-Column Liquid Layouts
CSS Negative Margins - Part Three: Improving the Two-Column Layout
CSS Negative Margins - Part Four: Three-Column Liquid Layouts

CSS Tooltips - Part Six
Reader Level:

In this part of our CSS Tooltip series we will explore what can and cannot be done inside the CSS popups we've been creating. We'll look at adding captions to our popup images and locating the captions in various places within the popups. We'll also discuss potential problems and their solutions. Here we go!

This tutorial is meant for those familiar with basic CSS syntax and usage. If this is not you, the following discussion will make more sense after you have studied these articles:

The Tooltips Series:

Part 1
Part 2
Part 3
Part 4
Part 5
Part 6

CSS Tooltips - Part Five
Reader Level:

In this part of our CSS Tooltip series we will see how the technique we've been exploring (CSS popups) might be applied to a page to create some interesting visual effects. Well look at constructing, placing, sizing, and aligning the popups where you want them on the page, as well as show how more than one popup can occur from a single hovered 'hotspot.' Get ready for some fun!

The Tooltips Series:

Part 1
Part 2
Part 3
Part 4
Part 5
Part 6

CMX JumpStarts: Venice
Reader Level:

Venice, the city of canals, inspired this romantic JumpStart design. As with all the JumpStarts, you can use and modify the design in any way you see fit, for commercial work or otherwise.

Venice includes a three-column home page design as well as a two-column form page. Both layouts feature fixed-width, equal-height columns with rounded corners. Techniques used in the layout include floats, absolute positioning, list styling, and backgroung image tiling. The pages are constructed using valid XHTML 1.0 markup and formatted using valid CSS 2.1 styling. Venice also follows the WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design you may wish to use it for. Both designs have been extensively tested on a wide range of platforms and browsers to ensure maximum cross-browser compatibility.

In addition to the extensively commented XHTML and CSS files, Venice comes with the PNG file used to create both of the layouts. It features masks that allow you to easily replace our graphics with your own, enabling you to adapt this design for any number of uses or clients. You'll learn how to organize a single Fireworks file into a comp for multiple pages.

To help you master the techniques used to design and construct the files, Venice comes bundled with the following tutorials:

Using Masks in Fireworks MX by Jim Babbage
Do You Want To Do That With CSS? — Centering a Wrapper by John Gallant and Holly Bergevin
Flowing and Positioning: Two Page Models by John Gallant and Holly Bergevin
Float The Theory by John Gallant and Holly Bergevin
CSS An Introduction Part Two: Background Images by Adrian Senior
Recreating Macromedia's Layout by Zoe Gillenwater
Styling CSS Buttons (Part 2) by Stephanie Sullivan
Styling Forms: Fieldset and Legend by Stephanie Sullivan
Using Classes and IDs Effectively by Zoe Gillenwater
Do You Want To Do That With CSS? — Align Elements Left and Right by John Gallant and Holly Bergevin

Each bundled tutorial explains how to complete the tasks that were undertaken to create the layout. Those techniques that are not covered in the bundle are explained here, providing you with not only a robust template, but a learning tool into the web design process as well.

If you'd like a more detailed look at the Venice Jumpstart, as well as seeing a modified Venice design, check out Sheri German's CMX JumpStart Venice: An Introduction.

JumpStart Venice: An Introduction Free!

Reader Level:

Valentine's Day is one of my favorite holidays of the year. It's fanciful and lighthearted, and I don't feel the pressure of the big holidays like Christmas or Easter. I can daydream about a romantic rendezvous, such as a gondola journey through the canals of Venice on a moonlit night. Though I can't make that a reality, I can pretend while exploring the latest CMX JumpStart.

CMX is proud to announce its sixth JumpStart, Venice, which includes both two and three column, fixed-width, rounded corner layouts in its home and form pages. Like all CMX JumpStarts, it is based on Web standards with valid CSS2 and XHTML 1.0 Transitional markup, and it passes WAI and 508 accessibility checkpoints. We've created a video to give you an overview of the design and functionality of Venice.

CSS Tooltips - Part Four
Reader Level:

Up until recently, CSS popup methods were limited to the hovering of links because that was the only type of element Internet Explorer for Windows was able to "hover." Things are a little different now, because we can hover elements other than links, and that includes real block elements! Where these new tooltips really shine is in providing a little visual flair to a page. Imagine seeing a photo of an electric motor, and as each part is hovered, a popup appears nearby with an exploded diagram of that part. A little thought will provide many more useful ideas, and yet so far we have only scratched the surface. Come explore this new method and get a feel for what is possible.

The Tooltips Series:

Part 1
Part 2
Part 3
Part 4
Part 5
Part 6

Recreating Macromedia's Layout
Reader Level:

Macromedia's current web site layout contains two effects that are very popular today: equal-height columns and rounded corners on columns and boxes. When these two effects are combined, it creates a slick and impressive looking web site. Although there are numerous articles out there describing how to achieve both of these effects in CSS, there is not much written about how to achieve both of them in conjunction. Surprisingly, the effect can be quite simple to achieve, as our deconstruction of Macromedia's site will reveal. We'll show you how they achieve this layout feat, then describe an alternative way to produce the rounded corner effect that is more streamlined.

Liverpool JumpStart with .NET
Reader Level:

Ah yes, Liverpool, not only a great JumpStart, but now you can have it with ASP.NET support. In addition to a valid CSS2 and XHTML 1.0 Transitional, WAI and 508 Accessible CSS layout, you also get a dynamic ASP.NET login application. The original release of the Liverpool JumpStart comes bundled with ColdFusion, PHP, and ASP and uses Dreamweaver's built-in User Authentication Server Behaviors. Unfortunately, Dreamweaver doesn't boast similar server behaviors for ASP.NET. To help make up for that lack, here's a special tutorial just for you ASP.NET coders. I've taken the original Liverpool JumpStart pages and added the necessary ASP.NET code. The result: an out-of-the-box ASP.NET login solution combined with a versatile layout. What could be better? :-)

Included in the support files are the CF, ASP and PHP versions of the Liverpool JumpStart. There is a link at the end of the article that will allow you to download just the .NET version if you prefer, as well as a link to download the bundled tutorials that were included with the original Liverpool JumpStart.

The .NET version of Liverpool is available as a no charge upgrade to purchasers of the original Liverpool JumpStart. If you would like to receive the .NET version, please send us an email and we will send you the .NET files. Please be sure to include your name and the email address that is associated with the PayPal account used to make the purchase.

CSS Tooltips - Part Three
Reader Level:

In the last CSS Tooltips tutorial we learned how to force Internet Explorer for Windows to obey the :hover selector for all elements, not just for links as it has in the past. Join us as we now begin having fun with our new-found pop-up power!

The Tooltips Series:

Part 1
Part 2
Part 3
Part 4
Part 5
Part 6

Semantic (X)HTML Markup: Phrase Elements
Reader Level:

Previous articles in the Semantic (X)HTML Markup series have focused on three of the ten phrase elements: em, strong, and cite. Here, we cover the remaining seven: abbr, acronym, code, var, samp, kbd, and dfn. These elements add structural information to text fragments in your documents and can act as handy hooks for styling or scripting. We pay particular attention to the acronym element, which can enhance your page's usability, accessibility, and search engine optimization.

The Semantic (X)HTML Markup Series:
Semantic (X)HTML Markup: An Introduction
Semantic (X)HTML Markup: Headings and Paragraphs
Semantic (X)HTML Markup: Creating Emphasis
Semantic (X)HTML Markup: Blockquote, Q, and Cite
Semantic (X)HTML Markup: Structuring Lists
Semantic (X)HTML Markup: Styling Lists
Semantic (X)HTML Markup: Using Tables Appropriately
Semantic (X)HTML Markup: Styling Tables
Semantic (X)HTML Markup: Phrase Elements
Semantic (X)HTML Markup: Other Elements

CMX JumpStart: Liverpool
Reader Level:

The Liverpool JumpStart is a little different than what has gone before. It includes a dynamic ColdFusion login application built with Dreamweaver's User Authentication server behaviours. This allows you to quickly and easily edit the login if you need to do so. The login also supports dual access levels and provides default pages for each level to view, along with a logout page to kill the sessions when your users have completed whatever it was they logged in to do.

Also included are login application pages for .NET, PHP and ASP server models.

This JumpsStart contains 12 tutorials, including video lessons on creating a relational database in Access, using Dreamweaver's User Authentication server behavoiurs and setting a datasource via the ColdFusion administrator.

If you prefer not to use server side code, within the download files you will find a static version of the Liverpool JumpStart.

If you'd like a more detailed description of Liverpool, including screenshots, check out the free article Announcing a New CMX JumpStart: Liverpool.

Announcing CMX JumpStart: Liverpool Free!

Reader Level:

It was the early sixties, and all the world was in a frenzy over a new group from Liverpool, England called The Beatles. They revolutionized rock 'n' roll music, and the world has never been the same. Maybe the Web Standards movement doesn't stir quite that much excitement, but it is changing the Web world all the same. And because we "love you, yeah, yeah, yeah" we're here to help you join the revolution.

Community MX is pleased to announce the release of its fifth CMX JumpStart: Liverpool. This time we're giving you more than a CSS layout, however. We're also giving you a dynamic ColdFusion login application built with Dreamweaver's User Authentication server behaviors that will allow you to quickly and easily edit the login.

This article will tell you all about what this fantastic package includes--bundled tutorials, an authentication system, a two-column, fixed width layout (with a little bit of a twist), original PNG files, and more.

North Pole: A Structural CSS Positioning Study Free!

Reader Level:

In this tutorial we will clear away all the elements that are used to style the North Pole JumpStart so that we are only left with the structure of the document. We will then investigate how the layout is structured and the techniques that are used to position the structural elements of the layout.

CSS Tooltips - Part Two Free!

Reader Level:

The heart of the CSS tooltip method depends on the :hover pseudo-class. Most modern browsers now support this CSS 2 feature. Internet Explorer for Windows lags behind in this area, supporting the :hover pseudo-class only on link elements.

However, IE5/Win and above can be made to support hovering on any element. In Part Two of our CSS Tooltips tutorial series we explain how to make this happen.

The Tooltips Series:

Part 1
Part 2
Part 3
Part 4
Part 5
Part 6>

CSS Tooltips - Part One Free!

Reader Level:

Have you ever wanted to replace those ugly webpage tooltips that you see with fancy, styled tooltips of your own? Join us as we explain how to do this without using any JavaScript whatsoever. That's right, these handy little gems are pure CSS!

The Tooltips Series:

Part 1
Part 2
Part 3
Part 4
Part 5
Part 6

CMX JumpStarts: Aspen
Reader Level:

Community MX is pleased to announce the release of the latest CMX JumpStarts designs, Aspen. As with all the JumpStarts, you can use and modify the design in any way you see fit, for commercial work or otherwise.

Aspen is a three column liquid-width design that includes floats, fixed and absolute positioning, background positioning, styled lists, a base page and a form page, plus all the PNG files used to create the graphics for the pages. Both pages meet the specifications of XHTML 1.0 Transitional and CSS 2. Aspen also follows the accessibility guidelines for WAI and 508 to provide you with a solid foundation for any design you may wish to use it for.

In addition to the extensively commented XHTML and CSS files, Aspen comes bundled with the following tutorials:

The Theory of CSS Column Design: Source Order by John Gallant and Holly Bergevin
Clearing Floats, the Easy Way by John Gallant and Holly Bergevin
Creating Liquid Faux Columns by Zoe Gillenwater
Styling CSS Buttons (Part 2) by Stephanie Sullivan
Styling Forms: Fieldset and Legend by Stephanie Sullivan
Custom Gradients in Fireworks MX by Kim Cavanaugh
Understanding the Pen Tool by Kim Cavanaugh (video)
Using Masks in Fireworks MX by Jim Babbage
CMX Design-time Extension by Paul Boon

If you'd like a more detailed description of Aspen, including screenshots, check out the free article Announcing a New CMX JumpStart: Aspen.

Announcing CMX JumpStart: Aspen Free!

Reader Level:

Aspen Mountain, packed powder, light snow falling and you've just ascended by lift to the top. If you're a beginner, forget it. You shouldn't have. How will you make it down alive to sit by that fire to sip a hot toddy?

But wait. CMX, your expert guide, has negotiated all the slick turns and steep curves. We know you have been waiting for a three column liquid layout, and for our CMX holiday celebration, here it is: JumpStart Aspen.

With a three column liquid-width layout, a base page, and a form page, Aspen employs valid CSS2 and XHTML 1.0 Transitional markup and passes WAI and 508 accessibility checkpoints. Aspen has been tested in numerous browsers. Read on to find out what the bundled package includes.

CMX JumpStarts: North Pole Free!

Reader Level:

The North Pole JumpStart is a two column, fixed width design that uses clever deployment of background images in both the navigational elements and the content areas of the design. The graphics used in North Pole are both simple and complex. They range from the beautifully created snowman made in Freehand and converted to Fireworks to some Christmas black line art that was coloured in to make simple yet effective images that enhanced the Christmas theme with only a few minutes work. Come and have a look!

Common Coding Problems: Part Seven
Reader Level:

In this, the seventh entry in our 'gotchas' series of Common (and not so common) Coding Problems, we will look at several things that could leave you scratching your head if you encounter them. First, we examine how to make space around floats by using the margin property on the correct element. Next, we will check out a bug that Gecko browsers have with lists next to floats that you'll want to know about. Finally, we'll look at several bugs in Internet Explorer that have to do with absolute positioning: Escaping AP elements, text selection bugs, and width bugs with absloutely positioned elements. And we're off!

Creating Liquid Faux Columns Free!

Reader Level:

Web designers converting from table-based to CSS-based design are often frustrated by the seeming inability to create equal height columns in CSS, an easy task with tables. Once they learn about the famous "faux columns" technique that simulates equal height columns using a tiling background image on a container, many remain frustrated that the technique only works for fixed width designs. Not so! This article will show you how to create liquid equal height columns using cleverly constructed background images and the background-position property.

Do You Want To Do That With CSS? - Multiple Column Lists Free!

Reader Level:

It is generally well known that list items in an <ol> or <ul> will display vertically in their default presentation. For short lists, or navigation menus, this generally isn't considered a problem. But in other cases, having an extensive list display vertically isn't quite as desirable. It might be a better use of screen space to have that list appear as a series of columns, side by side. In the past, this was done by placing separate lists in individual table cells, or by floating the lists. Semantically it is more desirable not to break up a list this way, but is there another choice? Yes, there is! Join us as we explain a new CSS method that uses a single list while displaying that list as multiple columns. Let's go!

Semantic (X)HTML Markup: Styling Tables
Reader Level:

In the last Semantic (X)HTML article, you learned about a number of underused table elements that can improve your table's structure and accessibility. Guess what – there's more! The second part of the semantic tables article covers additional table elements that act primarily as hooks for visual formatting. This article will introduce the thead, tfoot, tbody, col, and colgroup elements. You'll learn which CSS properties you can use to format your tables and how to apply them to the appropriate table elements.

The Semantic (X)HTML Markup Series:
Semantic (X)HTML Markup: An Introduction
Semantic (X)HTML Markup: Headings and Paragraphs
Semantic (X)HTML Markup: Creating Emphasis
Semantic (X)HTML Markup: Blockquote, Q, and Cite
Semantic (X)HTML Markup: Structuring Lists
Semantic (X)HTML Markup: Styling Lists
Semantic (X)HTML Markup: Using Tables Appropriately
Semantic (X)HTML Markup: Styling Tables
Semantic (X)HTML Markup: Phrase Elements
Semantic (X)HTML Markup: Other Elements

(Not So) Common Coding Problems with HTML and CSS — Part Six
Reader Level:

You may never run into the CSS bugs we're discussing here, but if you do, solving them can be anything but simple. So, to make sure you don't waste valuable time trying to determine just what has gone wrong, we detail some good habits you can develop in the way you write your selectors, clue you in to a specificity bug in IE/Win and Opera that is easy to overcome, as well as show you how to write selectors that target IE5/Mac only. Time for more (Not So) Common Coding Problems!

Semantic (X)HTML Markup: Using Tables Appropriately Free!

Reader Level:

In this article, you'll learn how to use perhaps the most misused semantic element: the table element. Like all the other (X)HTML elements you've learned about in the Semantic (X)HTML Markup series, there's a right and wrong way to use tables. This article explains when it is appropriate to use tables (yes, there are such times!) and how to structure tables when you do need to use them. Beyond just rows and cells, (X)HTML provides you with additional elements and attributes that can add structure and accessibility to your tables and make them easier to style down the road.

The Semantic (X)HTML Markup Series:
Semantic (X)HTML Markup: An Introduction
Semantic (X)HTML Markup: Headings and Paragraphs
Semantic (X)HTML Markup: Creating Emphasis
Semantic (X)HTML Markup: Blockquote, Q, and Cite
Semantic (X)HTML Markup: Structuring Lists
Semantic (X)HTML Markup: Styling Lists
Semantic (X)HTML Markup: Using Tables Appropriately
Semantic (X)HTML Markup: Styling Tables
Semantic (X)HTML Markup: Phrase Elements
Semantic (X)HTML Markup: Other Elements

CMX JumpStarts: Seattle
Reader Level:

Seattle is our second design in the CMX JumpStarts series. It is free to members of Community MX and available for purchase by non-members at the competitive price of $29.99. If you'd like a more detailed description of Seattle, including screenshots, check out "Announcing a New CMX JumpStart: Seattle"

Seattle provides a fixed-width two column layout with a right-hand navigation setup. Included are a home page, a pre-prepared form page and an inner page design. It has been designed to validate to XHTML 1.0 Transitional and CSS 2, and it also meets the requirements of 508 and WAI for accessibility.

All the source files that were used to create this design are available in the download. That is, the CSS files, the XHTML documents and even the PNG files. The CSS files and the XHTML pages are extensively commented to make editing Seattle a breeze. We are sure you will have a Whale of a good time adapting Seattle to meet your own requirements!

Seattle teaches you how to use nested lists to create a fully accessible navigation system. The download contains tutorials that will provide an in-depth analysis of all the techniques that have been used to create the design.

The following tutorials are bundled with the Seattle JumpStart:

Float: The Theory - by John Gallant & Holly Bergevin
CSS An Introduction - Part Six: The Basics of Positioning - by Adrian Senior
Do You Want To Do That With CSS? — Centering a Wrapper - by John Gallant & Holly Bergevin
Styling Forms: Fieldset and Legend - by Stephanie Sullivan
Semantic (X)HTML Markup: Styling Lists - by Zoe Gillenwater
CSS An Introduction - Part Three: The Descendant Selector - by Adrian Senior
How to Attack an Internet Explorer (Win) Display Bug - by John Gallant & Holly Bergevin
CMX Design-time Extension - by Paul Boon
Foto 1.0 for Fireworks MX Extension - by Steve Grosvenor

Seattle has been tested in various browsers. Click on the following link to view screenshots.

Announcing a New CMX JumpStart: Seattle Free!

Reader Level:

Put down that coffee, and get your Grunge thing going on. That's right, we're off to the "Emerald City", once called Duwamps, but now known as Seattle!

Community MX is pleased to announce the release of the latest CMX JumpStart: Seattle. Based on Web standards, this versatile layout employs valid CSS2 and XHTML 1.0 Transitional markup and passes WAI and 508 accessibility checkpoints. This makes it easy for you to quickly create new sites that work on a variety of browsers and platforms. You are only a few simple edits away from your own look and feel.

This article covers the following:

A list of what is included with the CMX Seattle JumpStart package and bundled tutorials and extensions
An explanation of the benefits of Web standards
A demonstration of the ease with which the layout is customized
The presentation of pages that were created from the Seattle JumpStart
Information about how this exciting design can belong to you for use in as many projects as you please.
Screenshots of the page in multiple browsers

Who's ready for a spin on the Space Needle?

Clearing Floats, the Easy Way
Reader Level:

While more people are beginning to understand and use floats in their layouts, "float clearing" is a mysterious and misunderstood subject. The need for extra elements just to ensure floats are contained has caused many complaints about "unnecessary markup." Well no more! This tutorial will show you a cutting edge method of float clearing that avoids extra source elements and makes clearing almost easy.

CMX JumpStarts: Paris
Reader Level:

Community MX is pleased to announce the release of an exciting new line of products called CMX JumpStarts. Based on Web standards, these versatile layouts employ valid CSS2 and XHTML 1.0 Transitional markup and pass WAI and 508 accessibility checkpoints. This makes it easy for you to quickly create new sites that work on a variety of browsers and platforms. You are only a few simple edits away from your own look and feel.

This article covers the following:

A list of what is included in the CMX JumpStarts: Paris download
A list of the bundled tutorials that teach the theory behind the layout
Directions for creating the effects in the Fireworks PNGs
Demos of live pages
A page of screen shots that show the Paris layout in a variety of browsers on multiple platforms

Announcing CMX JumpStarts Free!

Reader Level:

Inspired by famous world cities, each JumpStart will have an individual ambience and offer different table-less layouts and features. We travel first to Paris, a city of romance and style, with a design that features the Iris, the national flower of France. This two-column, fixed-width layout, complete with banner and footer, will serve as an elegant underpinning for almost any design.

This article covers the following:

A list of what is included with the CMX Paris JumpStart package and bundled tutorials
An explanation of the benefits of Web standards
A demonstration of the ease with which the layout is customized
The presentation of a page that was created from the Paris JumpStart
Information about how this exciting design can belong to you for use in as many projects as you please.
Screen shots of the page in multiple browsers

Semantic (X)HTML Markup: Styling Lists
Reader Level:

In the last Semantic (X)HTML Markup article, we learned how to take advantage of unordered, ordered, and definition lists to add greater semantics and accessibility to our pages. This article picks up where the last left off, covering how to take the well-structured lists you now know how to create and style them to fit the look and feel of your site. You'll learn how to:

Adjust list spacing both before and after lists and between list items
Create custom list markers
Make a single list display in multiple columns
Style lists to look like navigation elements
Create an FAQ or link page out of a definition list

The Semantic (X)HTML Markup Series:
Semantic (X)HTML Markup: An Introduction
Semantic (X)HTML Markup: Headings and Paragraphs
Semantic (X)HTML Markup: Creating Emphasis
Semantic (X)HTML Markup: Blockquote, Q, and Cite
Semantic (X)HTML Markup: Structuring Lists
Semantic (X)HTML Markup: Styling Lists
Semantic (X)HTML Markup: Using Tables Appropriately
Semantic (X)HTML Markup: Styling Tables
Semantic (X)HTML Markup: Phrase Elements
Semantic (X)HTML Markup: Other Elements

Living in a Dream House: Or How to Bring Web Standards to Your Web Sites Free!

Reader Level:

We hear the phrase "Web Standards" frequently these days, but what does it mean, and why should we care? There are many advantages to using XHTML, CSS, and 508 accessibility, and we'll look at some of them in this article. We'll look at how structuring and designing web pages has evolved to its current "best practice" of separating content and presentation. Finally, after looking at a few of the problems involved in using CSS for layout, we'll wander through the CSS Zen Garden to look at a few inspiring examples of what can nonetheless be achieved when designers code for standards compliant browsers.

Styling Forms: Fieldset and Legend
Reader Level:

In my last form tutorial, we looked at creative ways to use CSS to style label, input, select and textarea field elements. This time, we're going to move on to fieldset and legend. These elements will boost the accessibility of your form in most cases as well as really add a lot of style to your web site when handled correctly. Your forms don't have to be unattractive. In this tutorial, you'll learn about the styling options of these two form elements as well as some of the more stubborn gotchas and how to work around them. Source files to begin the tutorial, the gradient png and the final example, with commented CSS, are included.

CSS Selector Magic - Descendant Selectors
Reader Level:

This tutorial explains in simple language how to make a navigation link change to indicate the "current page" that the user is viewing, using only CSS.

Semantic (X)HTML Markup: Structuring Lists
Reader Level:

(X)HTML lists – unordered (ul), ordered (ol), and defintion (dl) – can add greater structure and accessibility to your pages. This article will define each of these lists, show you how to create them in Dreamweaver or by hand, and describe their various appropriate uses – some of which you may not have considered before. You'll also learn why lists are so important for your page's accessibility, and how they can help you work more efficiently.

The Semantic (X)HTML Markup Series:
Semantic (X)HTML Markup: An Introduction
Semantic (X)HTML Markup: Headings and Paragraphs
Semantic (X)HTML Markup: Creating Emphasis
Semantic (X)HTML Markup: Blockquote, Q, and Cite
Semantic (X)HTML Markup: Structuring Lists
Semantic (X)HTML Markup: Styling Lists
Semantic (X)HTML Markup: Using Tables Appropriately
Semantic (X)HTML Markup: Styling Tables
Semantic (X)HTML Markup: Phrase Elements
Semantic (X)HTML Markup: Other Elements

New and Improved CSS Rollovers - Part Three
Reader Level:

Continuing our New and Improved CSS Rollovers series we add padding and other styling to our tabs, learn a way to have the current page tab look differently from the other tabs, and even explore some variations on that current page tab look. We'll end up with a nice looking set of horizontal tabs, made from a semantic, unordered list, that have been built to minimize the "IE flicker" and clearly show us which page we are on currently. Let's go!

New and Improved CSS Rollovers - Part Two
Reader Level:

In the first New Rollovers tutorial we showed how to control the background-position of a composite background image being used for link rollovers, and learned to deal with the "IE flicker." In the next two parts we'll apply these methods to a semantic, accessible, horizontal list that contains links to create a set of tabs that can be made to seem "attached" to a box. With an eye on cross-browser compatibility, we'll also learn to use CSS selectors to make a tab for the "current page" appear differently from the rest of the tabs, all without the aid of JavaScript! Shall we begin?

WebQuests for Teachers - Part 2 - Reconstructing Free!

Reader Level:

In the first part of this series, we introduced the WebQuest and a bit of its history. We learned that this lesson in a Web page allows students to make safe use of Internet resources. We also discussed the six sections that make up a traditional WebQuest, and how the WebQuest should be more than mere fact-finding. Finally, we looked at the completed version of the "Time Machine MTV" WebQuest that we're going to reconstruct from scratch. The moment to do that is now upon us, so let's get started.

The WebQuest Series:

Part 1: WebQuests for Teachers
Part 2: WebQuests for Teachers - Reconstructing
Part 3: WebQuests for Teachers - Creating an Original WebQuest

Do You Want To Do That With CSS? — Centering a Wrapper Free!

Reader Level:

This article will deal with one of the most basic problems encountered when developing a tableless design, namely getting a fixed width "page wrapper" element to center at all window resolutions and in all modern browsers. We'll review what a wrapper is, explain how to center it, and then discuss how to get IE5.x/Win browsers to cooperate. Finally, we'll touch on a little Gecko-based problem with the method, and ways to overcome that, as well. Join us.

Simple Form Styling with CSS
Reader Level:

Boring, dry, plain forms. They don't have to be that way. You can jazz your forms up by using CSS on the form elements to give them style that coordinates with your web site. We'll look at simple methods of styling inputs, textareas, selects and options, and optgroups. We'll also discuss some of the browser differences, showing what can and can not be styled. Font and text properties, line height, borders, background colors, padding, margin and form field dimensions can all be affected by CSS. Follow along with this tutorial to learn about some simple styling techniques. This tutorial contains example files so you can follow along.

CSS Styles Dreamweaver Extension
Reader Level:

Dreamweaver MX 2004 made great advancements in CSS rendering. However, some of the tools could still use a little workflow adjustment: there is no context menu item for CSS Styles for form fields, tables, divs, or images. This extension adds that feature, saving a step for those people who use context menus to speed their workflow.

Using Descendant Selectors to Create a Site Map
Reader Level:

Creating a site map is simple if you harness the power of descendant selectors. Learn to use the flow of the document to write selectors that target the specific element you need and avoid classitis -- the overuse of classes for every element on your page.

WebQuests for Teachers - Part 1 Free!

Reader Level:

The World Wide Web has been an important part of our lives for a decade or more. Many things about the Internet have changed dramatically during this time, but one thing hasn't. Parents and teachers want children to participate in all the Web has to offer, but they don't want to expose them to danger in the process. Back in 1995, Bernie Dodge and Tom March of San Diego State University thought of a way to accomplish the seemingly contradictory goals of safety and access. They created the WebQuest.

The WebQuest Series:

Part 1: WebQuests for Teachers
Part 2: WebQuests for Teachers - Reconstructing
Part 3: WebQuests for Teachers - Creating an Original WebQuest

Semantic (X)HTML Markup: Headings and Paragraphs Free!

Reader Level:

Using headings on your (X)HTML pages is a great way to easily improve their accessibility and search engine rankings. However, the way headings appear in your browser often leaves much to be desired: large gaps above and below each heading, and huge font sizes. To avoid these problems, it may seem easier just to leave the heading tags out, instead using font and bold tags to simulate the look of headings. Many web developers do just this, thereby losing out on the great benefits of semantic markup.

Luckily, its easy to change the way your headings display using CSS, so you can use semantic markup and still achieve the look you want. The second article in the Semantic (X)HTML Markup series describes how to use headings and paragraphs appropriately to create a hierarchy of page content and how to style them visually.

The Semantic (X)HTML Markup Series:
Semantic (X)HTML Markup: An Introduction
Semantic (X)HTML Markup: Headings and Paragraphs
Semantic (X)HTML Markup: Creating Emphasis
Semantic (X)HTML Markup: Blockquote, Q, and Cite
Semantic (X)HTML Markup: Structuring Lists
Semantic (X)HTML Markup: Styling Lists
Semantic (X)HTML Markup: Using Tables Appropriately
Semantic (X)HTML Markup: Styling Tables
Semantic (X)HTML Markup: Phrase Elements
Semantic (X)HTML Markup: Other Elements

CMX Design-time Extension
Reader Level:

When Dreamweaver MX shipped, it included a new feature called Design Time Style Sheets. This command allowed the user to turn on and off different style sheets during the development of a document. However, it was limited to one document at a time. The CMX Design-time Extension changes all that, allowing you to apply your Design-time styles to a document, a selected folder, or an entire defined Dreamweaver site.

New and Improved CSS Rollovers - Part 1: REVISED
Reader Level:

CSS rollover buttons have been around for a while. They work great, but when background images are used to spice up the look, some odd problems can crop up. Join us as we describe these issues and ways to get around them, while still having great looking CSS rollovers. [This article has been significantly revised and updated from an earlier version.]

New and Improved CSS Rollovers - Part One
Reader Level:

Due to the discovery of a major IE/Win bug we thought had been eliminated, this article has been significantly revised and updated from the original, which was available for only a short time here on CMX. Please see New and Improved CSS Rollovers - Part 1: Revised for the new and improved article.

CSS rollover buttons have been around for a while. They work great, but when background images are used to spice up the look, some odd problems can crop up. Join us as we describe these issues and ways to get around them, while still having great looking CSS rollovers.

Using Classes and IDs Effectively
Reader Level:

You know what a class is, and you know what an id is. You may even have an idea of when to use one over another. But before you go making up classes and ids willy-nilly and scattering them at whim throughout your (X)HTML document, read this article to learn how to set up your selectors in the smartest way.

The Practice of CSS Column Design: Custom Corners and Sides
Reader Level:

Previously in this series, we learned how to create nice clean columns and boxes containing our content. Unfortunately, it's hard to create a visually flowing design with rectangles everywhere. Sometimes you just want a little variety! Using CSS and background images, we'll now show you how to create some "rounded corners" on your columns, and avoid such a boxy fate, all without the use of tables!

Flash, DHTML Menus and Accessibility Free!

Reader Level:

It's not uncommon to hear developers complaining that their DHTML menus, when triggered, have dropped behind the Flash movie below them. It's also not uncommon to hear, "that's just how they work." Before Flash Player 6, that was true in many browsers. But nowadays, it's become urban legend. With Flash Player 6, Macromedia introduced windowless mode for Netscape and Mac OS X (previously it was supported only for Windows). In the process, this also gave developers a way to completely hide Flash from older screen readers and the focus issues they can have with it. In fact, when Flash is purely used as eye candy, it's wise to remove it from the flow of the screen reader's page so that they don't have to listen to Flash without a purpose.

The Practice of CSS Column Design: Boxes in Columns Free!

Reader Level:

This tutorial expands our discussion about making accessible layouts using divs for basic page construction blocks. Using CSS, we'll show how to build a column of separate bordered boxes, each with a colored header, similar those currently in use on the CMX main page (as of July, 2004). We'll also discuss collapsing and escaping margins, and a few other things to look out for on our way to some nicely styled Bordered Boxes.

The Theory of CSS Column Design: Semantic Construction
Reader Level:

This second installment in The Theory of Column Design series looks at a highly effective way to structure the HTML, allowing "machine friendly" code while avoiding the Box Model Problem and related issues. This technique is becoming very common on the web, and for good reason. It's easy, powerful, accessible, and robust. You can't get much better than that!

CSS An Introduction - Part Thirteen: Working With a Wrapper Div
Reader Level:

In this tutorial, we will look at understanding some of the methods that are used in positional CSS, specifically the container or wrapper div we see and hear so much about. We'll look at what it is, how it is used, and the job it does for us. It is certainly at the heart of positional CSS, and something we really need to understand if we intend to move to positional CSS for our page layouts.

The Introduction to CSS Series:

Part 1: An Introduction to the Syntax of CSS
Part 2: Using CSS to Apply Background Images
Part 3: The Descendant Selector
Part 4: Type Selectors and Grouping
Part 5: Working with Paragraphs
Part 6: The Basics of Positioning
Part 7: Working with the Class Selector
Part 8: Working with the ID Selector
Part 9: The Child Selector and First-Child Pseudo Selector
Part 10: The Link and Dynamic Pseudo-classes
Part 11: Some fun with valid and some not so valid CSS
Part 12: Looking at text formatting
Part 13: Working with a Wrapper div

CSS An Introduction - Part Twelve: Formatting Text
Reader Level:

In this tutorial, we will take a look at the text properties that are available to us within the CSS specification. We'll look at the word and letter spacing, indentation, vertical alignment, line height and case properties that we can use to create the appearance we need for our HTML documents.

The Introduction to CSS Series:

Part 1: An Introduction to the Syntax of CSS
Part 2: Using CSS to Apply Background Images
Part 3: The Descendant Selector
Part 4: Type Selectors and Grouping
Part 5: Working with Paragraphs
Part 6: The Basics of Positioning
Part 7: Working with the Class Selector
Part 8: Working with the ID Selector
Part 9: The Child Selector and First-Child Pseudo Selector
Part 10: The Link and Dynamic Pseudo-classes
Part 11: Some fun with valid and some not so valid CSS
Part 12: Looking at text formatting
Part 13: Working with a Wrapper div

Do You Want To Do That With CSS? – Floating Clear
Reader Level:

In this article we'll take a look at some more basic behaviors of simple floats. We'll look at floats "in opposition," multiple floats that go the same or different directions, clearing floats, float wrapping, and briefly examine a few inconsistancies between browsers with regards to displaying floats. Join us...

Hey! Why Won't My Scrollbar Styles Show?
Reader Level:

In this tutorial, we will look at the reasons your scrollbar styling fails, and how to correct it by setting the CSS and doctype correctly.

CSS And Opacity
Reader Level:

In this tutorial, we will look at the proprietary opacity CSS properties for Internet Explorer and Gecko based browsers. We'll look at how we can apply the opacity settings to allow one image to show through another, and how we can get creative with a list menu by using a background image and varying the level of the opacity in the background colours that overlay it.

CSS An Introduction - Part Eleven: Some Fun With Valid and Some Not So Valid CSS Free!

Reader Level:

In this tutorial we will look at some valid, and some not so valid CSS that we can use to style our form elements, or anything else for that matter. We'll see if we can get a little inventive and look at one or two proprietary CSS techniques that are made available to us for use with Gecko browsers.

The Introduction to CSS Series:

Part 1: An Introduction to the Syntax of CSS
Part 2: Using CSS to Apply Background Images
Part 3: The Descendant Selector
Part 4: Type Selectors and Grouping
Part 5: Working with Paragraphs
Part 6: The Basics of Positioning
Part 7: Working with the Class Selector
Part 8: Working with the ID Selector
Part 9: The Child Selector and First-Child Pseudo Selector
Part 10: The Link and Dynamic Pseudo-classes
Part 11: Some fun with valid and some not so valid CSS
Part 12: Looking at text formatting
Part 13: Working with a Wrapper div

CSS An Introduction - Part Ten: The Link and Dynamic Pseudo-classes
Reader Level:

In this tutorial, we will look at the pseudo-classes, both link and dynamic, and investigate how they fit into our documents. We'll look at specificity and how we can combine the classes, where appropriate, and look at how we can use the focus pseudo-class.

The Introduction to CSS Series:

Part 1: An Introduction to the Syntax of CSS
Part 2: Using CSS to Apply Background Images
Part 3: The Descendant Selector
Part 4: Type Selectors and Grouping
Part 5: Working with Paragraphs
Part 6: The Basics of Positioning
Part 7: Working with the Class Selector
Part 8: Working with the ID Selector
Part 9: The Child Selector and First-Child Pseudo Selector
Part 10: The Link and Dynamic Pseudo-classes
Part 11: Some fun with valid and some not so valid CSS
Part 12: Looking at text formatting
Part 13: Working with a Wrapper div

CSS An Introduction - Part Nine: The Child Selector and First-Child Pseudo Selector
Reader Level:

In this tutorial, we will be looking at implementing the child selector and the first-child pseudo selector. We will look at pattern matching and come to understand how this concept makes it easy for us to write our selectors once we understand the way in which they are implemented.

The Introduction to CSS Series:

Part 1: An Introduction to the Syntax of CSS
Part 2: Using CSS to Apply Background Images
Part 3: The Descendant Selector
Part 4: Type Selectors and Grouping
Part 5: Working with Paragraphs
Part 6: The Basics of Positioning
Part 7: Working with the Class Selector
Part 8: Working with the ID Selector
Part 9: The Child Selector and First-Child Pseudo Selector
Part 10: The Link and Dynamic Pseudo-classes
Part 11: Some fun with valid and some not so valid CSS
Part 12: Looking at text formatting
Part 13: Working with a Wrapper div

Do You Want To Do That With CSS? — Float Tricks
Reader Level:

Floats can do things in a larger design that would be quite complicated to replicate using tables. In this article we'll look at a basic image float, floating an image located in the middle of a paragraph, and how to use the float property to create pull quotes. These techniques arent hard, it's just a matter of getting comfortable with the way floats work. Soon you will be floating all over the place, perhaps even inside good old table cells. It's fun!

CSS An Introduction - Part Eight: The ID Selector
Reader Level:

In this tutorial we will look at working with the ID selector. We'll look at some of the common pit falls and explain why it is so important to adhere to the rules that govern the use of IDs. We'll show some of the problems that can arise when these rules are not adhered to. We'll also look at how we can isolate the style of specific elements within our pages and how we can effect elements by using the ID selector.

The Introduction to CSS Series:

Part 1: An Introduction to the Syntax of CSS
Part 2: Using CSS to Apply Background Images
Part 3: The Descendant Selector
Part 4: Type Selectors and Grouping
Part 5: Working with Paragraphs
Part 6: The Basics of Positioning
Part 7: Working with the Class Selector
Part 8: Working with the ID Selector
Part 9: The Child Selector and First-Child Pseudo Selector
Part 10: The Link and Dynamic Pseudo-classes
Part 11: Some fun with valid and some not so valid CSS
Part 12: Looking at text formatting
Part 13: Working with a Wrapper div

CSS An Introduction - Part Seven: The Class Selector
Reader Level:

In this tutorial, we will be looking at the class selector. We will investigate the use of span tags and dot notation within our style sheet. We will also revisit Part Three of this tutorial, and see how we can use knowledge we have gained earlier in the series.

The Introduction to CSS Series:

Part 1: An Introduction to the Syntax of CSS
Part 2: Using CSS to Apply Background Images
Part 3: The Descendant Selector
Part 4: Type Selectors and Grouping
Part 5: Working with Paragraphs
Part 6: The Basics of Positioning
Part 7: Working with the Class Selector
Part 8: Working with the ID Selector
Part 9: The Child Selector and First-Child Pseudo Selector
Part 10: The Link and Dynamic Pseudo-classes
Part 11: Some fun with valid and some not so valid CSS
Part 12: Looking at text formatting
Part 13: Working with a Wrapper div

CSS An Introduction - Part Six: The Basics of Positioning Free!

Reader Level:

In this tutorial, we will take a look at how we can position elements with CSS. This technique is commonly referred to as CSS-P. We will look at how we can position elements using margins, absolute, relative, and static positioning.

The Introduction to CSS Series:

Part 1: An Introduction to the Syntax of CSS
Part 2: Using CSS to Apply Background Images
Part 3: The Descendant Selector
Part 4: Type Selectors and Grouping
Part 5: Working with Paragraphs
Part 6: The Basics of Positioning
Part 7: Working with the Class Selector
Part 8: Working with the ID Selector
Part 9: The Child Selector and First-Child Pseudo Selector
Part 10: The Link and Dynamic Pseudo-classes
Part 11: Some fun with valid and some not so valid CSS
Part 12: Looking at text formatting
Part 13: Working with a Wrapper div

CSS An Introduction - Part Five: Working With Paragraphs
Reader Level:

In this, the fifth tutorial in our beginning CSS series, we will be taking a look at the p element. We will look at how we can format our text by selecting the font face and family. We will also look at scaling our fonts, and investigate the use of padding and margins. We will take a look at line-height and letter spacing to see how we can present and format our text in a more legible manner to our end user.

The Introduction to CSS Series:

Part 1: An Introduction to the Syntax of CSS
Part 2: Using CSS to Apply Background Images
Part 3: The Descendant Selector
Part 4: Type Selectors and Grouping
Part 5: Working with Paragraphs
Part 6: The Basics of Positioning
Part 7: Working with the Class Selector
Part 8: Working with the ID Selector
Part 9: The Child Selector and First-Child Pseudo Selector
Part 10: The Link and Dynamic Pseudo-classes
Part 11: Some fun with valid and some not so valid CSS
Part 12: Looking at text formatting
Part 13: Working with a Wrapper div

The Theory of CSS Column Design: Source Order
Reader Level:

Have you ever heard the term "Source ordered" used in reference to web page code? It refers to how page elements are arranged, or ordered in the source. Most coders never give a thought to this, because in the past there was little that could be done. But that is no longer true. As a forward-thinking coder, it is smart to be aware of the issue because it affects you directly as a web author. Come along as we learn about this "source ordering" and how to take control of it.

CSS An Introduction - Part Four: Type Selectors and Grouping
Reader Level:

In this tutorial, we will look at the type selector and grouping selectors within our style sheet. We will also look at how we can use the cascade to override grouped settings and allow the properties of individual rules to display as we need them.

The Introduction to CSS Series:

Part 1: An Introduction to the Syntax of CSS
Part 2: Using CSS to Apply Background Images
Part 3: The Descendant Selector
Part 4: Type Selectors and Grouping
Part 5: Working with Paragraphs
Part 6: The Basics of Positioning
Part 7: Working with the Class Selector
Part 8: Working with the ID Selector
Part 9: The Child Selector and First-Child Pseudo Selector
Part 10: The Link and Dynamic Pseudo-classes
Part 11: Some fun with valid and some not so valid CSS
Part 12: Looking at text formatting
Part 13: Working with a Wrapper div

CSS An Introduction - Part Three: The Descendant Selector
Reader Level:

In this tutorial we look at the descendant selector and how we can use relationships between our elements to our advantage.

We will look at how we can isolate elements of a similar structure and how we can target specific elements from within our CSS.

The Introduction to CSS Series:

Part 1: An Introduction to the Syntax of CSS
Part 2: Using CSS to Apply Background Images
Part 3: The Descendant Selector
Part 4: Type Selectors and Grouping
Part 5: Working with Paragraphs
Part 6: The Basics of Positioning
Part 7: Working with the Class Selector
Part 8: Working with the ID Selector
Part 9: The Child Selector and First-Child Pseudo Selector
Part 10: The Link and Dynamic Pseudo-classes
Part 11: Some fun with valid and some not so valid CSS
Part 12: Looking at text formatting
Part 13: Working with a Wrapper div

CSS An Introduction Part Two: Background Images
Reader Level:

In this tutorial, we will investigate implementing background images with CSS. We will look at the various options we have at our disposal and some of the limitations we may come up against.

The Introduction to CSS Series:

Part 1: An Introduction to the Syntax of CSS
Part 2: Using CSS to Apply Background Images
Part 3: The Descendant Selector
Part 4: Type Selectors and Grouping
Part 5: Working with Paragraphs
Part 6: The Basics of Positioning
Part 7: Working with the Class Selector
Part 8: Working with the ID Selector
Part 9: The Child Selector and First-Child Pseudo Selector
Part 10: The Link and Dynamic Pseudo-classes
Part 11: Some fun with valid and some not so valid CSS
Part 12: Looking at text formatting
Part 13: Working with a Wrapper div

Do You Want To Do That With CSS? — Align Elements Left and Right Free!

Reader Level:

There are various "tasks" designers wish to have happen in the display of their pages, using CSS, that seem like they ought to be simple to do. The need for accomplishing the tasks is common to most web authors sooner or later, but the techniques used to do them are not widely known in the community yet. Our first "task" involves placing two items in a box, and having them display on opposite sides of that box. Let's look at ways we can align elements left and right using CSS.

Creating a Banner Graphic
Reader Level:

Requested by one of our subscribers, this tutorial demonstrates - with video - how to create a banner or header graphic using only vectors and native Fireworks effects. We'll also discuss how to slice this image for creating a "stretchy" graphic for flexible web pages.

CMX CF Row Style
Reader Level:

CMX CF Row Style is a Server Behavior for ColdFusion that takes your repeat region and changes the style of every other row to match a style from your Cascading Style Sheet, or the embedded styles on your page. This allows you to have not only a different color for every other row, but different colored text/font in every other row as well.

Note: This Server Behavior works with ColdFusion only.

Web Terminology: Part Three
Reader Level:

In Part Three of our Web Terminology series, we discuss terms you may read in a forum or on an email list. Words that are slung about loosely, often without further description or even a context within which to infer their meanings. Words that are part of the "jargon" of CSS, such as "Positioned," "Container," "CSS Hack," and "Workaround." Armed with this knowledge, you'll be able to ask intelligent questions, converse with the gurus, and actually understand what they're talking about! Let's go!

Web Terminology: Part Two
Reader Level:

Continuing with our terminology series, in Part Two we delve into the differences between "attributes" and "properties," what "external," "embedded," and "inline" mean, and expose the vulnerable underbelly of XHTML.

Web Terminology: Part One
Reader Level:

This article begins a new series concerning the definition of terms, specifically the terms most used (and mis-used) in HTML and CSS concepts. We hope to enlighten those who haven't had time to catch up on the lingo so common amongst web designers, begining with a discussion of tags vs. elements, divs vs. layers, and Class vs. ID.

Common Coding Problems With HTML And CSS — Part Five
Reader Level:

Continuing our saga of browser bugs, oddities, and their fixes, Part Five of our "gotchas" series looks at two IE/Win bugs: The Justified Italics bug and the Doubled Float Margin bug. Maybe you've seen them, maybe you haven't, but they're sure to annoy when they wiggle their way onto your web page. Come on along and see what you can do to exterminate them...

From Design to Completion: Case Study One
Reader Level:

I'll take you through a very real-world example of how a page composition can be transferred from a client-approved Fireworks concept to CSS-P reality. You'll see how the essential elements of the original design are sliced and exported from Fireworks, how the initial page structure is analyzed and built, how to position your divs properly, and how to build your styling from the ground up.

Common Coding Problems With HTML And CSS — Part Four
Reader Level:

Have you ever found some mysterious duplicated characters you just can't account for in your float layout? Or perhaps wanted an entire link button to be "clickable" in IE/Win without the links getting too wide and breaking the rest of your layout? Or maybe you've just been frustrated by lists that don't look quite the same in different browsers? Well, Part Four of our "gotchas" series looks at some more browser bugs as well as some good practices regarding lists. Come along as we continue to explore the wonderful world of browsers...

Common Coding Problems With HTML And CSS — Part Three
Reader Level:

Once again we delve into the weird world of CSS display bugs. Settle down, they're safely behind the glass! That's right folks, they jump, they flicker, they wriggle on their bellies like a... well, let's just take a look, shall we?

Media Types and Their Uses Free!

Reader Level:

Using Media types, can open up a whole host of opportunities for restyling your content to cater to a variety of different devices. These days, not all users will be viewing your web site on a computer screen.

Common Coding Problems with HTML and CSS - Part Two
Reader Level:

Last time, the 'gotchas' were general web coding problems but now we turn to some headaches directly related to CSS and positioning. Don't be scared! These beasties are pushovers if you know their weaknesses. Ready to kick some bug backside? Let's roll!

Common Coding Problems with HTML and CSS - Part One Free!

Reader Level:

Coders learning CSS, and others as well, often run into frustrating problems that chew up time and produce major headaches. What's worse, these problems are usually known to others who have gone through the same mill. In an attempt to ease the path of others, we have identified a number of common coding 'gotchas' so you won't have to re-invent the wheel. Please proceed...

Styling Headings for Fun and Profit with CSS
Reader Level:

CSS has given web developers the ability to create lightweight, accessible web pages using fewer graphics while still retaining an attractive graphical look. In this tutorial we'll look at six specific examples of headings, along with other styling suggestions you can adapt to dress up your pages. This will make them quick to render, attractive to search engines, and, ultimately, more profitable for your business...

Writing Efficient CSS Free!

Reader Level:

One of the touted benefits of CSS is that it reduces total page weight, both at first page load, and even more on subsequent loads due to style sheet caching. Often a sizable fraction of the savings is lost because of highly redundant CSS code. Come learn some secrets of efficient CSS coding, enabling you to pare that style sheet right down to the bare bones.

Absolute Positioning and the Top Property
Reader Level:

Many coders who use absolute positioning, AP, for divs (or layers in Dreamweaver) are aware that the positioning of such elements on the page is determined by a coordinate system, locking the div (layer) in place on the page. But what if the header isn't a fixed height? Is there a way to make that top positioning flexible? Come along and find out!

Styling CSS Buttons (Part 2)
Reader Level:

In Part One of the Styling CSS Buttons series, we looked at three different vertical button styling ideas using unordered lists. Since lists are vertical by nature, styling them as buttons is easy. But if you want horizontal navigation, you've got to use images, right? Wrong. With CSS, lists can be horizontal as well. It's just a simple little property value called inline that makes the switch. Follow along and learn how to use this bandwidth saving method on your own web sites...

Creating a Captioned Floating Thumbnail Gallery
Reader Level:

In this tutorial we will take a look at how to make floating thumbnail image galleries that include caption text. Additionally we will delve into constructing page layouts suitable to receive these thumbnail galleries, and explore a recent addition to the CSS hack arsenal.

Creating a Liquid Thumbnail Gallery with Floats
Reader Level:

Picture this: a thumbnail gallery that fills the available screen space, and reshuffles the thumbs whenever the screen size changes so as to keep the screen filled. No table can do that, but by using the float property, it is very easy!

Controlling a Gradient Page Background with CSS
Reader Level:

Page backgrounds make a big difference in the way your web page is perceived when someone first arrives. In this tutorial we'll look at a simple but elegant way to give your page a smooth, non-tiling gradient background using Fireworks. Then we'll apply the image with CSS using Dreamweaver.

Understanding the Cascade: Part two - Specificity
Reader Level:

Specificity is one of the basic foundations of CSS. It is a method for determining which selectors are more specific than others, and therefore which rules will apply to a given element. Come along as we explore just how specificity works and how it relates to the cascade.

Understanding the Cascade: Part one
Reader Level:

If you're confused about the term "Cascade" in Cascading Style Sheets, don't be. This article series is going to carefully describe just what the "cascade" really is, and why it's so important when using cascading style sheets.

New CSS features in DWMX 2004
Reader Level:

I'm going to go over all the basic CSS functionality changes here just to give you an overview of what's been changed. Some of our overview articles have already mentioned and shown some of the fabulous new CSS-P rendering capabilities. For me, this alone is worth the upgrade. No, nothing beats previewing pages in every browser imaginable, but it sure beats the jumbled mess I've seen in design view previously. Come in and see a more detailed view of the new tools.

CSS in Flash MX 2004
Reader Level:

One of the new features in Flash MX 2004 is the support for Cascading Style Sheets, CSS, in the Flash Player. In this article you will learn where and how to apply CSS formatting in a Flash movie.

Creating a Drop Cap with CSS
Reader Level:

The print world has used drop caps to their advantage for years. And previously, on the web, it was difficult to pull it off unless you used images (which for a large variety of reasons is undesirable). Enter CSS -- the wunderkid! CSS makes this effect simple.

Float: The Bugs (part two)
Reader Level:

Have you ever tried to float images with css, and found that your images refused to touch each other (leaving a gap), when viewed in certain browsers, no matter what? Read on for a full run down on this nasty little browser glitch...

Using the CSS Styles Panel Free!

Reader Level:

DreamweaverMX contains a great tool to assist you in creating CSS styles. It's called the CSS Styles panel. In this article, we'll look at some of the different types of selectors that can be created. We'll look at creating the rule declarations for each selector. And then we'll briefly discuss the limitations with DreamweaverMX.

Debugging CSS, the Easy Way Free!

Reader Level:

CSS bugs can be obscenely difficult to isolate, especially when they are located amidst a large, complex page with many external style sheets. Compounding this is the fact that few coders have enough experience to be sure that what they're seeing really IS a bug, and not just incorrect coding. What's needed is a way to isolate or understand the problem so the coder may find a workaround or avoid the bug altogether.

Float: The Bugs (part one)
Reader Level:

If tables are used for layout purposes, Internet Explorer (IE) is the equal of any browser out there. But when it comes to CSS positioning, IE does some rather odd things. One of these things has to do with the way floats are handled. In this part of our Float series we will explore what makes IE different from the rest.

Styling Data Tables with CSS
Reader Level:

Data tables. Dry. Rows and rows of boring data. Does it have to be that way? I think not. CSS can style your boring data tables to look snazzy and organized. Separate your style from your structure and you can change it anytime you like. Anytime you have that boring-data-styling urge.

Float: The Theory
Reader Level:

If you are like most people, the whole issue of Floats is rather intimidating. The theory is difficult to grasp, and on top of that, the bugs are rumored to be numerous and nasty. Well fear not, because we will walk through the concepts, some of the bugs, and the practical uses of floats, in nice easy stages. Be assured that you will suffer no ill effects. Rather, a vast new world of positioning will open up before you. Onward!

Hiding CSS from Nav 4: The Caio Hack Free!

Reader Level:

At the time the CSS 1 specifications were written by the W3C, there were naturally no browsers that supported them. Netscape Navigator was then the premiere browser, and Nav 4 was the first browser to attempt supporting those specs. It got many of them right, but many more wrong. Come discover a method of hiding stylesheets from Nav 4, that you may not be familiar with, called the Caio Hack.

CSS Selectors: Pattern Matching and Inheritance: Article 3
Reader Level:

Working with selectors, combinators andusing pattern matching from the document tree. Learn how to to use the relationships betweeen your page elements to target specific elements for styling with CSS.

Flowing and Positioning: Two Page Models
Reader Level:

In doing web design work, it is likely you have heard terms such as "Normal flow" and "CSS Positioning." However, if you are accustomed to using tables for controlling the placement of page elements, you may be slightly hazy concerning what these terms actually mean. If so, it's time we got down to some basics on the ways web pages are visually constructed on the screen by current browsers.

This article has been updated as of 5/25/2007. You can read the updated article here

CSS Selectors: Pattern Matching and Inheritance: Article 2
Reader Level:

In part two of this series will look deeper into the relationships that exist within the document tree and further exploit these relationships using descendant selectors.

CSS Selectors: Pattern Matching and Inheritance Free!

Reader Level:

Exploring the document tree and how it effects inheritancy in CSS, a look at the direct adjacent sibling selector and combinators.

Rendering Mode and Doctype Switching Free!

Reader Level:

Even though today's browsers have moved toward more standards-compliant behavior, it is still necessary to allow older pages to display as they have in the past. However, this can cause problems with modern pages written to (x)HTML and CSS standards if a browser cannot determine how to best render the page. The solution? Come learn about Rendering modes and the "Doctype Switch."

The Box Model Problem Free!

Reader Level:

When breaking out of using tables and moving toward using Cascading Style Sheets (CSS) positioning for laying out elements on a page, it is important to become familiar with the W3C Box Model. At first, the box model may be confusing, but it is a necessary concept to grasp. Unfortunately, simply understanding the W3C box model is not the only thing you need to make your web pages look similar in different browsers. Come along as we explore the Box Model, the browsers that get it wrong, and what to do about them.

Styling CSS Buttons (Part 1)
Reader Level:

So you think you're ready to hop on the CSS styling bandwagon? Many people are finding that decreased page load time and quick site wide changes are attractive draws to making the leap. And rightly so. In this tutorial I'll cover three different ways to style simple CSS buttons.

Preparing DMX to work with CSS
Reader Level:

Integrating TopStyle to work with Dreamweaver MX, get the full power of CSS at your finger tips quickly and easily.

Creating Fluid Pages (Part Two)
Reader Level:

You want your pages to look good at any resolution. You want to stay accessible to the largest crowd. But CSS positioning is scary isn't it? Is it? Take a look at this table-free tutorial. We'll explore both a static-width, centered approach and a more fluid, stretchy design. And the cool thing is -- both use the same html page. The difference is all in the stylin'. (Pssst... go ahead... click the "more" button.)

CSS starting points: multiple psuedo classes
Reader Level:

A CSS starting point, this article will show you how to use multiple style sheets in your pages and how to protect older browsers from choking on certain CSS styles. In this tutorial we will cover how to create CSS buttons as well as creating three different link styles. We will also look at the styling of form elements and text content.

Zeroing page margins Free!

Reader Level:

In this tutorial we will investigate how we can use dual style sheets to set our page margins to zero in the most common browsers we will come up against in today's online world. We will also take our CSS code and optimise it for performance and make it bandwidth friendly.......

CSS: An Introduction Free!

Reader Level:

In this tutorial we will take a look at the very basics of CSS, if you are new to cascading style sheets this is the place to start...........

The Introduction to CSS Series:

Part 1: An Introduction to the Syntax of CSS
Part 2: Using CSS to Apply Background Images
Part 3: The Descendant Selector
Part 4: Type Selectors and Grouping
Part 5: Working with Paragraphs
Part 6: The Basics of Positioning
Part 7: Working with the Class Selector
Part 8: Working with the ID Selector
Part 9: The Child Selector and First-Child Pseudo Selector
Part 10: The Link and Dynamic Pseudo-classes
Part 11: Some fun with valid and some not so valid CSS
Part 12: Looking at text formatting
Part 13: Working with a Wrapper div

Creating An External Style Sheet In Dreamweaver MX Free!

Reader Level:

How to create an external style sheet in dreamweaver and link it into your document.

Delivering Browser Specific Styles with PHP
Reader Level:

As an agreed and recognized standard Cascading Style Sheets are an everyday part of a web developer's life. However, many developers still rely on the use of either browser trickery or client-side JavaScript to send the right stylesheet information to the right browser. While this will quite often work, newer browsers, and the ability to disable client-side Javascript means that you run the very serious risk of sending the wrong stylesheet, or even worse, no stylesheet at all. In this article we explore the use of server-side PHP code in determining which stylesheet should be presented to which browser, and all before your visitor receives anything from your website.

Searching CMX

Get familiar with the CMX search facility & learn how to find the tutorials you need easily & quickly.

Latest Free Content

View All Free Content

Community MX

You're curious and eager to learn. You are also busy and struggle to keep up with today's rush of new technology. That's why you need Community MX. More...

Get Paid, Create a Tutorial!

Turn your knowledge into extra cash! We'll pay you for writing Tutorials, screencasts, tips and articles.

Find Out More

Searching CMX

Latest Free Content

View All Free Content

Advertise with CommunityMX

Community MX

Related Links

Community MX - Your technology lifeline!

Get Paid, Create a Tutorial!

Member's Sign In

Searching CMX

Latest Free Content

View All Free Content

Advertise with CommunityMX

Subscribe

Community MX

Related Links

Community MX - Your technology lifeline!

Get Paid, Create a Tutorial!