June 16 Meeting Report: Styling Tables

At the June meeting, we worked on styling tables, first reviewing the basics of HTML tables, and then using CSS to style horizontal segments using the THEAD, TFOOT, and TBODY tags. We started on vertical styling using the COL and COLGROUP tags, but there is more to do. I uploaded the two demo pages to a new Tables section in Sample Pages.

We will pick up on columns and then move on to borders when we meet again on September 15. We will also spend a little time with the examples that I showed at the Web Design SIG. They were taken from a new book called The Art & Science of CSS. If you were at the Web Design meeting, you know that one of the samples, using a transparent PNG to alternate background colors on rows, did not work correctly in IE6. I wrote to the author who responded by pointing out an error in the sample code. If you get the book, drop me a line, and I will show you the fix, if it is not posted on the publisher's website by then.

Between meetings, I will blog items of interest about CSS that I find. You can check back here at the website to see if there is anything new, or subscribe to either email notifications or RSS feeds. Just look in the sidebar of the site for instructions.

New Browsers from Apple and Netscape

It is only a beta, but this is good news for those of us who always wonder what our pages look like on the Apple Safari browser: Apple Introduces Safari for Windows. It is a free download, and it does seem to render pages very quickly, even though it is still beta software. Safari has tabbed browsing, but I do not see any indication that it supports extensions.

Also just released in beta is version 9 of the Netscape browser, available at the Netscape download page. I think it is slicker and faster than version 8. It no longer allows users to toggle between the Firefox and the Internet Explorer engines, but that function is available with the IE Tab plug-in which works in Navigator as well as Firefox.

June 16 Meeting Announcement

The next meeting of the PACS CSS Workshop will be next Saturday, June 16, at the usual 9-10 am time slot.

Last month, we finished talking about background images just as the clock struck 10. With this month's meeting being the last until September, I picked a topic that I think we can cover at one session--styling tables.

You heard right. We have been dissing tables as a means to lay out a webpage. But tables are not gone. They have a purpose, and CSS gives us a great tools for making tables do what they are supposed to do--convey information. Along the way, we will attack the concept of "div-itis", or more generally, the over-use of CSS and the corresponding non-use of HTML tags in designing pages.

There is no cafeteria service this month, so pack a lunch, and we'll see you Saturday.

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.

April 21 Meeting Report: More on Backgrounds

This month, we continued working on background images and spent some time on setting different backgrounds for different elements on a page. The default background color of a webpage is transparent, per HTML specs, so even though background images are not inherited, they will show through your child elements unless you declare either a background color or image for that child. And in case the image does not load, you should always do both.

We put a background on headings and inline elements, and used the background-attachment property to let a background image stay in a fixed position while the page scrolls.

In the process of all this, we talked about alpha transparency of images as well as some philosophical questions on webpage design.

For a quick review of the background properties we have been working with, see this recent post with a link to an article on this subject.

Builder.com article: Precisely control page and element backgrounds with CSS

The timing could not be better for this article from Builder.com on CSS background properties. It is a good review of the styles that we have been covering recently.

April 21 Meeting Announcement

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

This month, we will continue working with background images. We will cover a couple of topics that came up last month but that we left with some open questions. I figured out the answers, and I will clear up all confusion in a matter of minutes. We will also take a quick look at the standard baseline style sheet that Eric Meyer recently published on his blog. I have a link to that article in a previous entry.

Our main subjects will be techniques for using multiple images for backgrounds and styling a sidebar to have a background color that goes the full length of a page. One of the techniques will be the famed Faux Columns, and we should be able to cover that topic in our allotted time.

Eric Meyer: Standard Baseline Style Sheet

Eric Meyer recently blogged about a baseline style sheet that he has developed: Eric's Archived Thoughts: Reworked Reset. I found this article interesting because we have had Web Design SIG presentations recently where we have discussed basic default styles as starting points for webpages. Meyer takes this idea to the next level. Check the previous blog for comments by some of his readers to see how he revised the first version.