May 2009 Meeting Report: Building Blocks of Nav Menus

At our May meeting, we returned to the topic of styling navigation menus, a topic we have been covering throughout this year.

This month we looked at the CSS properties that I think are keys to creating attractive menus. Those properties include

• pseudo-selectors, using the LoVeHA order;


• display:, both block and inline-block, the latter being increasingly supported by browsers;


• list-style, particularly list-style-type:none;


• background, both color and image;


• position.

And to get really creative, image editing for creating background images.

May Meeting Announcement

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

We will get back to the subject of navigation menus by looking at the building blocks of good navigation styling and considering some issues that come up in designing a navigation system.

We will also cover a couple of other topics of interest related to web design, as well as anything else that comes up in discussion.

30 Exceptional CSS Navigation Techniques

Since we have been talking about CSS navigation this year, I think this article from Six Revisions will be of interest. Many of the examples are from websites where you can find even more ideas. We'll see if we can work through some of these approaches to navigation in coming meetings.

April 2009 Meeting Report: More On IE8

At our April meeting, we started by looking at a page from CSS Tricks on the different options for setting type size in CSS. There are some nice visuals there to illustrate the different units of measure. For another article on fonts from a different perspective, check out Typeface Inspired by Comic Books Has Become a Font of Ill Will.

We then returned to looking at Internet Explorer 8, which will shortly be added to the Microsoft update system. We looked at the new update/bookmark utility called Web Slices. For information, see the Microsoft IE8 site and New Features To Slice, Store, And Accelerate Your Web Applications.

We then discussed compatibility with earlier browsers, a topic that is covered in How Do I Fix My Site Today?

Finally, we looked at more of the standards that Internet Explorer now complies with, including list style types, borders, generated content, and paged media attributes.

April Meeting Announcement

The next session of the PACS CSS Workshop will be held this Saturday, April 18, at our usual 9 - 10 hour.

We have been working this year on styling links and creating navigation menus with CSS. Last month, we took a side trip to look at the new Internet Explorer 8 and its claim of full support for current CSS standards.

We had a few leftover topics to look at regarding IE8, and this month, we will finish up with those and then head back to navigation. Along the way, I will give you a philosophical question to ponder as you back up your hard drives next week.

March 2009 Meeting Report: Online CSS Utilities; Internet Explorer 8

At our March meeting, we first looked at an online site for creating CSS declarations. The site lets you use drop down menus for various properties and then copy and paste into the head of a webpage. The site is CSS Mate. There are other sites out there that do the same thing -- just do a search.

We also looked at a couple of sites that create color palettes. One was Color Blender. You can also try Color Mixers. Again, there are other sites out there like these, just do a search.

We then looked at Internet Explorer 8 and its support for CSS properties that were not supported before or were not completely supported. Information is at Microsoft's IE8 page. There is a separate page on CSS Improvements in Internet Explorer 8.

March Meeting Announcement

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

We will continue on the subject of styling menus, but I hope to take a slight detour as well. I just downloaded Internet Explorer 8, which was released today, and I hope to be able to show what might be new in IE8 as far as CSS support. For those interested, the download page is at http://www.microsoft.com/windows/internet-explorer/default.aspx. You will notice that versions 6 and 7 are available on that same page. Install them in a virtual machine, and you can test your sites like its 2001 all over again.

February 2009 Meeting Notes: Extending Pseudo-Classes

At our February meeting, we took pseudo-class selectors to a new level by employing combined declarations and by using classes.

A combined selector looks like this -- a:hover:visited. It would define the hover style of a link after it has been visited.

So in the below example, the link hover will be overlined when not visited, but underlined after being visited:

a:hover {color:red; text-decoration: overline;}
a:hover:visited {color:red; text-decoration: underline;}

Adding a class to a pseudo-class selector will let you apply the styling to specific links, and that will be useful for defining the style of navigation links. The syntax is familiar:

a:link.nav {color:green;} -- the style declaration
<a href="PACS_Home.htm" class="nav"> PACS HOME</a> -- the link that will now have the text color green

We ended by looking at two proposed tags, <nl> and <nav>, which, if either is adopted, will make it easier to define and style navigation links.

February Meeting Announcement

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

We will continue on the subject of styling links, with the goal of developing interesting navigation menus. We worked last month with the pseudo-classes that can be used with the anchor tag, emphasizing the correct order to be used in order for the links to be styled properly.

This month, we will finish off some loose ends relating to that discussion and then get into compound declarations that can give you more power to style links in different ways on the same page.

Along the way, I will show you a couple of HTML tags that I can almost guarantee you have never heard of.

January 2009 Meeting Notes: Pseudo-Classes

The January meeting was about using CSS to style links. We started with the HTML attributes for the body tag that allow you to set the colors of a link when it is unvisited, active, and visited. Of course, CSS gives you that and more, so we moved on to using CSS to style links.

First, we saw that the anchor tag can be styled the same way as any selector, but the result does not differentiate between states of the link. There is more flexibility in using pseudo-classes.

The pseudo-classes that apply to anchors let you style four states of links: unvisited, hover, active, and visited. (There are other pseudo-classes, but they do not come into play with the anchor tag.)

We noted that the preferred order of these pseudo-classes in a style sheet is link, visited, hover, active. "LoVe HA" will help you remember. Changing this order can result in one declaration being overridden by another declaration, rendering some of your styles ineffective.