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.

January 2007 Meeting Report: Two-column Layouts

At the January meeting, we worked on two-column fixed width layouts, which are more difficult than liquid layouts. We still use the float and clear properties, employ the DIV tag extensively, and manipulate the CSS box model.

A fixed-width layout needs an outside DIV to create an outer box within which we build our page, and we reviewed the container/wrapper concept.

We looked again at an example from last month of a page with one float and a large left margin. We then moved on to layouts that float both columns and saw that in browsers other than Internet Explorer, floated elements in a DIV collapse the DIV. Two solutions are (a) a spacer DIV which keeps the wrapper from collapsing, or (b) an inner wrapper that is floated and that can then be used to style the page because it does not collapse.

The samples we used are posted for download and experimenting in the Sample Pages section of this site. The files are listed under Layout Techniques. Look at the source of each page for annotations.

Next month we will look at page templates and then review the template that Saul Rosenbaum demonstrated at Web Design. After that, we will do background-image to make the templates look better, another topic that Saul discussed at Web Design.

January 20 Meeting Announcement

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

We have been talking about page layout for the last two meetings, and this month I want to tie things together to develop a basic CSS page template. To do so, we will talk about some gotchas that come up with the CSS box model, particularly with different browsers. As a lucky coincidence, one such issue came up at last month's Web Design meeting where Saul Rosenbaum demonstrated how he develops a webpage. I have his sample page, and we can review how Saul handles floats and positioning.

And a note about this site: I have reorganized the Index of Sample Pages (see sidebar) to make it easier to find the demo pages that we have used in past meetings.

Article from Builder.com on understanding floated elements in CSS

A recent article called Build a better Web site by understanding floated elements in CSS might be of interest to members of the workshop. This Builder.com tutorial is a simple one-page introduction to float and clear in CSS. The examples are easy to follow, and they reinforce what we have been covering at our recent meetings.

Note the last example which uses clear to position floated elements relative to each other.