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.