Article on CSS Media Types

At the May CSS Workshop, we talked briefly about creating styles for print versions of a webpage. Then at Web Design, we talked about creating styles for handheld devices. So it was great timing that Builder.com just published a nice article on the media types that allow web developers to adapt their sites to different devices. Check out Adapt to your audience with CSS media types.

Note particularly the section toward the end entitled Support. It gives a good idea of what is practical now and what is just academic. There will be more support coming, I'm sure, so it is a good idea to get familiar with this technique.

May 19 Meeting Report: Columns, Faux and Otherwise

At our May meeting, we covered some left-over topics from April. We discussed how background images on a page might not be printed, depending on how the user's browser preferences are set. But you can always set up a print style sheet and use the media="print" attribute to control how your page looks when it is printed.

We then looked again at background-attachment: fixed and noted that the background image can scroll off to the left as the browser window widens if you do not set up the attachment properly.

The primary topic for the month was the practical use of background-attachment to style a page. We looked at an approach to getting around the fact that an element cannot have more than one background attachment, at least as CSS and browsers stand at this point. The solution was to use two div's that occupy the same area of the page, each with its own background image. We then used that sample file to show how a background image can be made clickable, or at least look and act as if it were the image that was being clicked.

We finished with the question of how to use CSS to style a column so that the background will extend the full length of a page. We showed one technique that just uses background-color, and then we looked at the famed Faux Column technique that uses background-image.

I have posted demo files in the Sample Pages section of this site. There are comments in the source. Download the files (and images if needed), and edit away. Let me know if you have any questions.

Next meeting is June 16. See you then.

May 19 Meeting Announcement

The next meeting of the PACS CSS Workshop will be this Saturday, May 19, at 9 - 10 am.

In recent meetings, we have been working on using background images. We have had a lot of give and take during our sessions along with some on-the-fly experimentation, so it has taken longer than I had expected to cover this topic. But I think it has been worth the extra time.

In any case, this month, we will definitely get to styling columns. Getting the background right is a little trickier with a CSS formatted page than with a table layout, but we will look at a couple of ways to accomplish the task, including the famous Faux Column technique.