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.

March 24 Meeting Report: Background Images

At our March meeting, we worked on using CSS to add graphics to a webpage without affecting the underlying HTML of the page.

We began by reviewing the HTML attributes BGCOLOR and BACKGROUND and the IMG tag to show how graphics were added before CSS. We then discussed the CSS properties background-image, background-repeat, and background-position, and then the shorthand property background. Using that property, we can use one declaration to define up to four background properties.

We then used background-image to add a graphic heading to a page, using display:none to hide the H1 heading without actually deleting it.

Next month we will continue on this topic by tying up some loose ends, and then getting into faux columns.

March 24 Meeting Announcement

The March meeting of PACS is on the fourth Saturday again this month -- our session will be on March 24, at the usual time of 9 am. There will be no Javascript Workshop meeting in March, so consistent with past practice, CSS and Flash will each expand to 90 minutes and make use of the open time between 10 and 11.

This month we will work on background images. In the process, we will get philosophical about when and how to use images on a webpage. And with the extra 30 minutes this month, we should be able to cover a related technique, faux columns. If you don't know what they are, don't miss our meeting.

On top of all that, we will have another fine book raffle where someone's PACS membership will pay for itself.

Finally, be sure to check out the PACS online store for all your fashion needs.

PACS Web Design Book ReviewsBeginning CSS Web Development

As those who have attended the CSS Workshop recently know, I have been using a book from Apress entitled Beginning CSS Web Development: From Novice to Professional. It is by Simon Collison.

My review of this book is now posted at PACS Web Design Book Reviews.

February 24 Meeting Report:Page Template

At the February session of the CSS Workshop, we worked on some more issues involving page layouts. Some of the items were odds and ends about topics from previous meetings. We pointed out that while the HTML tags that create page elements, like headings and paragraphs, also create boxes, and that it is possible to position those boxes to lay out pages, the better approach is to use DIV tags to make the basic structure of the page.

We then went through some exercises in collapsing wrappers and showed that the problem does not arise often. Most likely, you will have a footer at the bottom of the page that will keeep the wrapper open in spite of the floating paragraphs that make up the page columns. Just be sure the footer has the clear:both declaration.

We then worked on a basic format of a page with a header, two columns, and a footer. That template is posted in our samples section. It was based on an example from a new book by Simon Collison called Beginning CSS Web Development.

A List Apart: Articles: In Search of the Holy Grail

We mentioned the so-called Holy Grail at the end of the February session. The name refers to a challenging task in CSS layout -- a three-column page with two fixed-width side columns and a liquid-width center column. For more on this layout, see A List Apart: In Search of the Holy Grail.

February 24 Meeting Announcement

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

We will continue working on using CSS for page layouts. I want to cover a couple of templates that can be reused easily, then touch on some other layout issues if we have time before going on to background images. Putting all these skills together will let you create attractive pages that are within the current HTML and CSS specifications. We will also have some great new books to raffle off at CSS and at Web Design in the afternoon.

There is a full lineup of excellent workshops on tap for Saturday, as usual. Check the PACS website for full details. And while there, take a look at the new "PACS Online Store" where you can buy all kinds of PACS-related items. The link is right on the front page of the site.

If you are interested in Internet Explorer 7's CSS support, there is a new PDF book from O'Reilly called Releasing CSS that covers the topic. Reed just posted my review -- see the Web Design reviews section.