May 20, 2007

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.

No comments: