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).

November 18 Meeting Announcement

Tne next meeting of the PACS CSS Workshop will be this Saturday, November 18. The topic will be two-column layouts.

We have a special schedule this month. Because the Javascript Workshop will not be meeting, CSS and Flash will each expand by thirty minutes. So we will spend the usual 9-10 period for our regular workshop where we will be putting together the CSS properties we have been working on and use them to create two-column layouts in a few different ways. By the end, we will have templates to quickly create pages, letting you just paste content right into the templates.

For our extra half hour, we will change gears and look at tools for editing CSS. Up to now, we have been composing our style sheets by hand with just a text editor. A dedicated CSS editor can make the job easier. We will look at a couple of those editors.

And we can talk about other tools as time permits.

Flash will then start at 10:30. Mike has some special topics of interest for his extra 30 minutes.

Finally, at Web Design, Reed will continue on page layouts, and we will raffle off a copy of a new book on CSS, Beginning CSS Web Development: From Novice to Professional.

October 2006 Meeting Notes: Layout Properties

At the October session, we continued with the the CSS attributes of float and clear. I have uploaded to the Sample Pages section (see sidebar)a couple of the files we used at the meeting, for those who want to review them and work with these styles.

We used a sample file to compare the HTML use of align and clear with the CSS use of float and clear. That file might be of interest if you want to play with the basics of each. We also used a file to show how to use float and clear to create a drop-cap effect.

We then began putting these properties together to create two column layouts. We will expand on this topic at the November meeting when we work on different types of layouts using CSS.

October 21 Meeting Announcement

The next meeting of the CSS Workshop will be this Saturday, October 21, from 9 to 10 am.

We will continue this month on the topic of using CSS to lay out webpages. If you missed last month's session, we will do a quick review before moving on, so you should be able to catch up quickly.

We will work with the float and clear properties, and then possibly get into position. It will be an interesting hour, and we will be laying the foundation for some advanced uses of CSS.

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.

Details on Microsoft's CSS changes for IE7

Excuse the interruption to everyone's summer, but I thought folks would find this interesting:

Microsoft is close to finishing version 7 of Internet Explorer, and in fact a release candidate is now available. One of the developments many of us have been following is the CSS support in the new version. For the latest information on this topic, see the blog entry from Microsoft called IEBlog : Details on our CSS changes for IE7.

There is a pretty full list of changes and improvements shown there. And most encouraging is the working relationship between MSFT and the W3C.

Life just keep getting better!