September 2006 Meeting Notes: Beginning CSS Layout

At our September meeting, we started on using CSS to define the layout of a webpage. We began by reviewing the use of tables to format a page, a technique that is still useful and can be used to structure a page which is then styled with CSS. This kind of hybrid approach has its advantages, as is pointed out in this article at Builder.com.

To move on to pure CSS layout techniques, we started by looking at the HTML align attribute. Align is used with images and tables to move the element to the margin and let subsequent text wrap around it. We then looked at the clear attribute that is used with <BR> to begin text after an aligned item.

CSS introduces the float property that allows any element to be positioned along a margin with text wrapping around the element. And the clear property can be used with any element, not just line break. We did some work with these properties to show how they are used with images instead of using HTML align.

At our next meeting, we will start with a brief review of the box model, the basis for page layout. To see some visual representations of the box model, do a Google image search for "css box model." For a review of the box model, see this Builder.com article. For practice with the different properties of boxes, go to the Index of Sample Pages on this site (link in sidebar), and go down to Basic Boxes and the subsequent samples. Download them and check the comments to try out different properties that affect boxes.

September 16 Meeting Announcement

The first PACS meeting of the season will be next Saturday, September 16. The CSS Workshop will be meeting at the same time and place as last year, Room 713, 9 - 10 am.

We will be start the new season with a whole new topic: Page Layout. The old HTML way of structuring pages was to use (or mis-use) tables to organize elements on the browser page. CSS introduced new ways of structuring pages by separating presentation from structure. The properties that make layouts happen are float and position, and we will work through these topics in the first few meetings of the year.

We will start this month by reviewing the use of tables to structure pages and then see how to do the same thing with CSS. The basis of CSS layout is the box model, and we will review that subject briefly before getting into the float property. If you want to prepare a little bit, I suggest reviewing material on the CSS box model. A good article is Make better Web pages by understanding the CSS box model. You might also want to take a look at the sample pages of our website for the examples of boxes, borders, and margin and padding: Sample Pages for Testing CSS.

This month, PACS has the usual full schedule of web-related sessions on tap, including JavaScript, Flash, and a new workshop on ASP.net. The main Web Design SIG is at 1 pm, and we will be raffling off a copy of the first version of the book Designing with Web Standards, by Jeffrey Zeldman to all members who attend.

Complete details of this month's activities are at the new and improved PACS website. And in fact, the Web Design SIG will be a review of the process of updating that site.

See you Saturday.

New E-mail notification system

Subscribers to this site's e-mail notifications will notice a different type of notification coming into their mail boxes. I had been using a system called Bloglet, but the system has not been maintained, and in fact, notice of the the August 28 update might not have been mailed to you. For details on Bloglet, see the statement on the Bloglet site.

I followed Bloglet's recommendation and converted to Feedblitz. If anyone has trouble withe Feedblitz, let me know. It seems to run well, and it has an easy unsubscribe feature.