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.

December 2006 Meeting Report: Fixed-width Layouts

At the December meeting of the PACS CSS Workshop, we continued on the topic of using CSS to lay out a page, emphasizing that the basic concept is moving boxes -- repositioning the boxes that are created by HTML tags.

We reviewed our work at the November meeting where we used CSS for a two-column liquid layout, that is, one that expands as the browser expands. We then showed that making the columns fixed widths is more complicated.

We took a slight detour and showed how a page can be set up to look like two fixed-width columns without actually creating columns, but by employing float and clear. The file we worked one is uploaded to the Samples Pages section (see index in sidebar) in case anyone wants to download it and experiment with the styles.

We then showed an example of settng up two fixed-width columns, with one floated and one having a wide left margin. This technique has its limits, but it works across browsers and is easy to set up. This sample file has also been uploaded.

Next month, we will continue on laying out fixed width pages using CSS.

December 16 Meeting Announcement

The next meeting of the PACS CSS Workshop will be this Saturday, December 16, at the 9-10 hour.

Last month we worked on two-column liquid layouts using CSS. This month, we will continue by looking at fixed-width layouts. They are trickier to do, and we will look at a few ways to accomplish the task. Depending on time, we might also throw in a couple of other tips on using CSS.

We will be back to the full complement of sessions this month, with JavaScript, Flash, ASP.net, and Web Design. Be sure to stay for Web Design because we will have Saul Rosenbaum returning for another outstanding presentation, and we will be raffling off another new CSS book, CSS Mastery: Advanced Web Standards Solutions.

November 2006 Meeting Report: Two-column Layouts

At our November meeting, we took the float and clear properties, combined them with the DIV tag and the box model, and began formatting text on a page.

We started with a single column and centered it by making left and right margins auto. We pointed out that these properties do not work in Internet Explorer unless a DOCTYPE is declared.

We then worked on a two-column, fluid layout. In the process, we discussed another Internet Explorer box model problem, that being the way IE calculated width in earlier versions of the browser. Again, declaring a DOCTYPE solves the problem.

We had an extra thirty minutes this month, and we spent the time reviewing CSS editors and validation sites. Links to these utilities have been added to the CSS Resources Page of this site (see sidebar).