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!

June 2006 Meeting Report -- Navigation Menus

The June meeting of the PACS CSS Workshop was the last until September.

This month, we covered different techniques for using CSS to style navigation menus. We used a number of online resources to demonstrate different techniques for taking a set of links and styling them to display as interesting and functional navigation elements. The sites are below, and I encourage you to try their examples in order to develop your CSS abilities. (These links open into new browser windows.)

3D button effect

Go to number 9 on this list of favorite tricks to see the 3D effect that we demonstrated. The rest of the tricks are worth your time as well.

Menu tutorial

We followed this tutorial from one of our favorite CSS sites to create a vertical menu from a simple line of links and then a horizontal menu from the same CSS by just adding a couple of properties.

Tableless rollover navigation bars

This simple CSS creates a nice horizontal menu bar with a rollover effect.

List-u-Like CSS Generator

Instead of writing your CSS and guessing how it will look, try this generator to just make your property and value selections and then preview the results.

Tabbed menus

This site has a whole collection of different tabbed menus using CSS. The site says they are free. Just look at the source for the techniques used.

June 10 Meeting Announcement

The next meeting of the PACS CSS Workshop will be this coming Saturday, June 10, at the usual 9-10 hour. This month's PACS meeting is on the second Saturday of the month due to the school schedule.

This month we will work some more on styling navigation menus. We started last month, and we will continue in June with vertical menus, then move on to horizontal menus. Depending on time, we may be able to look at some more advanced ideas.

This meeting is the last of the season. We will take the summer off, and if there is interest in continuing this workshop, we will pick up again in September. Please give me some feedback.

This month's PACS meeting is particularly rich with web-related topics. In addition to the usual workshops, the guest speaker at the main meeting will be Eric Pascarello, who will talk about AJAX and the new developments that are changing the way we use the internet. Eric will also be the speaker at the Web Design SIG at 1-2. These are sessions you don't want to miss. More information is available at the PACS website.

Finally, I have blogged an interesting new website called Vitamin (see below).

Hope to see you all Saturday.

Vitamin - A resource for web developers, designers and entrepreneurs

A new online magazine called Vitamin - A resource for web developers, designers and entrepreneurs looks as though it will be an excellent source for information on all things web-related.

The site is the product of Carson Systems, a company I have seen mentioned as sponsoring some high-level web development seminars. The list of advisors to this new site is impressive and includes a lot of people whose names are easily recognizable.

I suggest checking out Vitamin and adding the RSS feed to your reader.

May 2006 Meeting Report--Navigation Menus

This month we finished up with the basics of the display: property. We then reviewed some of the styles that can be used with anchor (link) tags and reminded ourselves that context-sensitive styling will let you define different styles for links on the same page depending on how they are identified in your HTML.

We went on to navigation menus by taking a list of links and styling it to display as a vertical, sidebar-type menu. I used the menu that Reed Gustow drafted for the PACS Web Design SIG site as an example and stripped out the navigation HTML and CSS into a separate file. This file is now in our Samples section. The code is annotated so that you can play with the styles and try out some new ideas. Note that Bob Morgan has beaten everyone to the punch--he used the menu as the basis for a new sidebar for the HTML Workshop page. Sincere flattery.

Our June meeting is the second Saturday, June 10, due to the school calendar. This meeting is the last until September. We will continue with styling menus and get into more complex ideas. See you then.

May 20 Meeting Announcement

The next meeting of the PACS CSS Workshop will be this Saturday, May 20, at the usual 9-10 hour.

At this session, we will begin putting together some of the elements we have covered in the last few months and use those elements to style navigation menus. This topic might take us through the final two sessions this year, and there should be a lot of interesting ideas that you can play with over the summer, at least on cloudy days.

This month's PACS meeting will be end-to-end with presentations of interest to web designers. After CSS, we will have the regular workshops for Javascript and Flash in the morning. The Web Design SIG at 1:00 will be about installing a forum on a website--Reed Gustow will show how he did it for the Web Design SIG site. And in between, Reed will be the presenter at the main PACS meeting at noon discussing free tools for making websites.

There is so much going on, it will be tough to take a break for those cafeteria hot dogs, but that's OK--there will be a lot of good information to take away from the meeting. Check the PACS website for the schedule of events and for more details.

See you Saturday.

stu nicholls | CSS PLaY | experiments with cascading style sheets

This website called stu nicholls | CSS PLaY | experiments with cascading style sheets is getting a lot of attention lately. Rich Sias sent it to me, and Frank Stepanski has noted it.

The site is all about CSS and stretching its limits. Some of the examples are interactive items that one might usually associate with scripting. And it appears so far that the cross browser support is excellent.

I hope to be using some of these examples in upcoming CSS workshops.

April 2006 Meeting Report--Display: Inline and Block

At our April meeting, we discussed the opacity: property that can be used to alter the appearance of images. We showed how opacity: can be used, e.g., to alter the transparency of an image when the cursor hovers over it. Unfortunately, opacity: is not supported in IE through version 6.

We then continued from last month with the display: property. We reviewed display: none, and the demonstration document is on our Samples page.

The bulk of the meeting was on display:inline and :block. We discussed how these values can be put to use, and the demonstration page that we used is in our Samples section.

We also briefly touched on display:inline-block. The only browser I have found that uses that value correctly is Opera 9 beta, so we did not spend much time on that subject.

April 22 Meeting Announcement

The next meeting of the PACS CSS Workshop will be this Saturday, April 22, at the usual 9-10 hour. We are meeting on the fourth Saturday this month due to the school's schedule. I hope everyone used the extra weekend to get their taxes done.

This month we will start with a question that came up last month--can CSS be used to alter the transparency of an image? There is an answer, and we will have it.

Then we will continue discussing the display: property. We started last month by discussing display:none (which is what got us into images). This month, we will look at three other display: values, and this discussion will lead us into designing navigation styles.

We will also have a giveaway courtesy of member Frank Stepanski: A copy of the book Designing CSS Web Pages.

Also, if you are not yet aware, Reed has opened a forum on the Web Design site. A number of members have registered already, and it should be a good resource for sharing information and for getting advice. We have a discussion going on now about how to redesign the PACS website. Your participation would be welcome.

IEBlog : Layout Complete Announced at MIX06

If you are interested in news about Internet Explorer version 7, this entry from the IEBlog is interesting: IEBlog : Layout Complete Announced at MIX06. I noted the point about :hover on all elements. We recently talked about that at one of our meetings.

I also saw an article today that said that with Vista, Microsoft will end its practice of tying its internet browser together with Windows browser. You will be able to install version 7 as a standalone browser. (Isn't that what they said was not possible when Netscape dragged them into court?) The move should improve security.

March 2006 Meeting Report--Generated Content and Display: None

At our March meeting, we finished the topic of styling lists. We covered some loose ends from the February session and then went on to show how familiar properties like margin, padding, and border can be applied to lists or to individual list items. Using descendant selectors, we applied styles to list items depending on whether they were children of ordered lists or undordered lists.

We then played with generated content and showed how that property can be used to add text or images to the beginning or the end of an element using CSS. It is an interesting concept, but we saw that Internet Explorer does not support generated content, so its usefulness is limited right now. If you are interested in playing with this property, download the generated content test page from our samples and open the page in Firefox or Opera. To experiment, add or delete comment tags around the style declarations.

We then started with the display property. The first value we considered was "none," and we showed how it can be used to substitute a graphic for a top level heading so that we could add a logo without affecting the underlying HTML. The sample page is also on the website. Comment out the style declarations to see the underlying HTML. Or, if you have Firefox, you can just open the file and at the top Firefox menu, go to View/Page Style/No Style to toggle the style sheet on and off.

In April, we will continue with the display property. Please make a note: The April meeting will be on April 22, the fourth Saturday of the month, due to the school's schedule. Mark your calendar and join us.

March 18 Meeting Announcement

The PACS CSS Workshop will be meeting this Saturday at the usual 9-10 hour.

This month we will finish up styling lists. We will tie up some loose ends and a cover a couple of leftover issues from last month.

After that, I want to get into the DISPLAY property. There are several values that can be used with that property, but we will just work on three of them, inline, block, and that confused fellow called inline-block. We will see how practical that last one really is, but the first two will set us up to do some interesting navigation styles.

If you are using a book to study along with our sessions, read about these topics, and we will do some experimenting to see how the DISPLAY property works.

PACS Web Design Archives

Reed Gustow has just done us all a great service by updating the Web Design SIG's archives page. Over the years, Reed has posted notes and links relating to presentations at the SIG's meetings. This new page indexes those postings, making it easy to retrieve meeting notes from as far back as 2003.

Check it out because the page is not only a useful resource, it is a fun place to browse.

February 2006 Meeting Report--Styling Lists

At our February meeting, we just about finished styling lists. We began by reviewing unordered lists and then got into the more interesting subject of ordered lists, where CSS gives the web author options that do not exist in HTML. From there we looked briefly at styling definition lists. We used this samples page from last month--it can be downloaded and edited to test out list properties.

We then worked on the descendant selector, which lets you define the properties of an element when it is the child of another element. In our case, we styled nested lists to make sublists with different bullets and numbers. Of course, we took it to the extreme to create some styling straight out of the 90's dot-com boom--all legitimate, but a little ugly. I uploaded this samples page that has nested unordered and ordered lists. Use it to practice descendant selectors and styling sublists.

The next meeting is March 18. We will tie up a couple of loose ends with lists, and then move on to more creative uses of CSS.

February 11 Meeting Announcement

The February meeting of the PACS CSS Workshop will be next Saturday, February 11. This date is a week earlier than usual because of the school schedule.

We will continue on the topic we started last month, styling lists. We did a little work with unordered lists, but this month we will get into more interesting topics, like ordered and nested lists. Along the way, we will consider descendant selectors, so that we can do things like create outlines. It will be a lot of fun, and we can then follow up and get into styling navigation links.

This month we also have the usual lineup of sessions for JavaScript and Flash, along with the scheduled return of the HTML Workshop. Plus, Reed Gustow will be presenting at the afternoon Web Design SIG, talking about how to create a contact form for your site.

See you Saturday.

Sample Pages Now Indexed

Over the course of the workshop, I have used sample pages to illustrate different CSS topics. My practice has been to upload the samples to this site when I post my meeting report. At this point, though, it is very difficult to find these samples -- you have to go back through the archived meeting notes looking for a particular topic.

To make it easy to locate a sample, I have added to the site an index to the sample pages and a permanent link to this index in the sidebar under the CSS Resources Page link. As we use more sample pages, I will post them and update the index to keep it current.

I encourage you to download a page and edit its source in order to get a real feel for how CSS works.

Content is now syndicated

I have set up a syndication feed for the site, so that readers can subscribe to the feed and receive updates using any of the usual newsreaders. More information on syndication is available in the notes of the Blogging Introduction meeting we had in January.

Look in the sidebar to the right of the page for the link to subscribe.

The Bloglet e-mail system is still in operation for those who just want an e-mail notification when the site is updated.

January 2006 meeting notes

At our January meeting, we finished the subject of pseudo-elements by tying up a couple of loose ends, and we then went on to lists. We reviewed the basics of HTML lists and started showing how to style unordered lists with CSS.

CSS gives us the ability to position the bullets but does not add any new bullet types. The advantage to using CSS is in the efficiency with which you can choose the type of bullet. I posted the sample page that I used, in case anyone wants to download it and play with the options for styling lists. Note that you should also download the little AOL gif if you want to use the image as a bullet.

Next month we will continue with styling lists, and we will incorporate the topic of descendant selectors. You will see how much more control and efficiency you can have with your lists by using CSS. These topics will all lead up to creating some interesting navigation elements for our pages.

Note that the February meeting is on the second Saturday, February 11, not the usual third, due to school scheduling. So make sure you update your calendar program.

January 21 Meeting Announcement

The next meeting of the PACS CSS Workshop will be this Saturday, January 21, at our usual 9-10 hour.

This month we will briefly tie up a couple of loose ends from the last meeting regarding pseudo-elements. We will then go on to styling lists, a topic that should be pretty interesting since there is good browser support for the different CSS properties. In the process, over the next couple of meetings, we will get into descendant selectors and the display property, and tie everything together to create some interesting navigation menus and bars.

See you Saturday.

CSS Beauty | CSS Design Showcase

I came across this new website on CSS called CSS Beauty | CSS Design Showcase. It looks like a good collection of CSS news and resources.

If you want to try your skills in a contest with the same idea as css Zen Garden, check the CSS Shuffle page.