March 2010 Meeting Report: Background Images and CSS3

At the March meeting, we followed up on our topic from February, showing how to clickable image using CSS and not putting the image into the HTML. We then took a second image and used it as the hover background image.

We spent the second half of the meeting looking at some of the new features that will be part of CSS3. The sites we looked at are listed here:

• Basic CSS3 Techniques That You Should Know


• CSS3 Techniques You Should Know


• Dabbling in CSS3: Drop Shadow

Also take a look at this site: CSS3 Generator

March 2010 Meeting Announcement

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

We have two things I hope to cover this month. One is to look at background images using the example from last month and expanding on it, including using different images for link and rollover. That last topic will lead toward a discussion of the CSS sprite.

But we might not get to sprites because I also want to look at some examples of CSS3 properties because browsers are starting to incorporate CSS 3, even though it is not yet adopted as a standard.

February 2010 Meeting Report: Clickable Background Images

At recent meetings, we have looked at styling links and positioning elements with CSS. This month, we took those styles and added background images to create a clickable image that was entirely styled with CSS.

The technique was based on the article Clickable Background Images Via CSS. We started by reviewing the HTML technique for making an image clickable, and we talked about the deficiencies of that approach. Then, we showed how CSS background, position, display, height, and width could be brought together to achieve the same result while keeping all presentational elements in the style sheet.

February 2010 Meeting Announcement

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

We have been working on navigation menus, starting with styling links, and then going to positioning. This month, we will tie up some loose ends from last month. Then we will put the elements together to make a link with a graphic background, using as an example something I recently did for a site.

Finally, if we have time, we will look at some interesting new properties that are coming with CSS3.

January 2010 Meeting Report: Using Position for Page Layout

We started out January meeting with a look at some statistics from some local government webmasters showing the browsers used to access their sites. Over the last year, generally Firefox has increased in use, IE6 is still a major player, and Chrome has made progress.

We then looked at an article on The Case Against Vertical Navigation from Smashing Magazine. The article was nicely related to the topic that we are covering in this year's meetings.

We then moved on to the tutorial on positioning that we have been working on, Learn CSS Positioning in Ten Steps. We finished that tutorial, and next month will move on to positioning background images.

January 2010 Meeting Announcement

The next session of the PACS CSS Workshop will be this Saturday, January 16, at the usual 9-10 am hour.

At our November meeting, before the snows, we looked at absolute and relative positioning, and then put them together to see how they worked with each other. At this month's session, we will finish the positioning tutorial that we have been working on, and then move to another tutorial on graphics and links. The goal is to show how to create a navigation menu that is a cut above the usual horizontal or vertical list.

I will also have some interesting statistics from a few government websites about browser usage.

December 2009 Meeting Report: Let It Snow

We were snowed out this month, so in January, we will continue with positioning and navigation. See you then.

December 2009 Meeting Announcement

The next session of the PACS CSS Workshop will be this Saturday at the usual 9-10 am hour.

Last month, we looked at absolute and relative positioning, and then put the two together to see how they worked with each other. At this month's session, we will finish the positioning tutorial that we have been working on, and then move to another tutorial on that is more focused on graphics and links. The goal is to show how to create a navigation menu that is a cut above the usual horizontal or vertical list.

We will also have a website or two of interest.

November 2009 Meeting Report: Absolute vs. Relative Positioning

Our November meeting started with a look at some websites with useful CSS material:

• 10 Tips for Writing Better CSS
• Different Ways To Format CSS
• Poll: How do you format your CSS?

We also looked at two Firefox add-ons that let you see the structure of your page, something that is important in order to understand how positioning will work with your elements:

• Firebug
• DOM Inspector

We then continued with the tutorial by BarelyFitz Designs called Learn CSS Positioning in Ten Steps. We reviewed relative positioning, then moved on to absolute positioning, and then looked at how absolute and relative work together.

November 2009 Meeting Announcement

This month we will continue working on positioning. There was something that bugged me as we were doing the example last month, and I will see if we can resolve it. We will then move on with the different ways of using the CSS position:relative properties.

I will also have a couple of new websites that have some good ideas on using CSS.