December 20, 2009

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 17, 2009

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 22, 2009

November 2009 Meeting Report:
Absolute vs. Relative Positioning

Our November meeting started with a look at some websites with useful CSS material: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: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 19, 2009

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.

October 17, 2009

October 2009 Meeting Report:
Relative Position

We started the October session with a look at some recent articles on web design:We then went into the main topic for the meeting. This season, we are continuing to work on navigation menus. Last year we styled the links. This year, we will be positioning the menu items outside of the usual vertical or horizontal lines and then adding graphics.

We began with positioning and looked at the CSS position: property. We looked at one site that has a review of this property, CSS Positioning. We then began using the tutorial at Learn CSS Positioning in Ten Steps and did the first two steps. We will pick up from there next month.

October 15, 2009

October 2009 Meeting Announcement

At our next meeting, we will get back on track after a detour into free and open source software last month.

We will look at some issues with positioning and background images, and how they work together. Our aim will be to add these styles to what we previously worked on with links, and then make some creative navigation menus.

September 20, 2009

September 2009 Meeting Report:
Free Software for Web Editing

The September meeting of PACS was devoted to free and open source software. With that theme in mind, at the CSS Workshop we looked at HTML editors and related programs that are free and in some cases open source.

We started with a current listing of free programs at Best Free WYSIWYG HTML Page Editor Review.

We looked at these editors:
  • Amaya, an open source editor from the W3C. Last updated September 9, 2009.

  • SeaMonkey, an internet application suite based on the Mozilla source. Includes an editor called Composer. We looked at a beta of version 2, released September 12, 2009.

  • PageBreeze, a commercial product that is free for personal, not-for-profit, or educational use.

  • CoffeeCup, another commercial product that has a free version which has some features not activated.

We also looked at two other applications for web development:
  • FileZilla, an open source FTP client.

  • TopStyle, a commercial CSS editor. There is a free version that has a nag screen and has some limts to its functionality.

September 10, 2009

September 2009 Meeting Announcement

The first meeting of the season for the PACS CSS Workshop will take place on September 19. We will again meet at the 9-10 hour in the Alps Room.

This month, the theme of the PACS meeting is Software Freedom Day. The group will be highlighting free and open source software throughout the day. In line with that theme, we will start our session with a look at free HTML editors. These programs let you do WYSIWYG editing without spending the money for Dreamweaver or other commercial editor.

Depending on time, we will then start on our topic for the next couple of meetings. Last season, we worked through using CSS to style a navigation menu. This year, we will take the next step and incorporate images, so as to create more attractive and user-friendly navigation buttons.

August 17, 2009

More CSS Summer Reading

If you have gone through all the current vampire novels and still need something to read down the shore, try out Mega CSS Resource Roundup. I just found out about this site. This CSS resource roundup looks like a promising collection of tutorials and references.

Note that the article is actually a collection of links to other sites, so there is no guarantee of quality control. If you try any of the suggestions, be sure to check your results in different browsers.

The site also has a bunch of other good pages -- go up to the home page for the list.

And remember your sun screen.

July 09, 2009

15 Must Read Articles for CSS Beginners

The Line 25 website has a nice run-down of articles from various sources entitled 15 Must Read Articles for CSS Beginners. We have covered most of the subjects at our workshop, and others will be covered next season.

Don't be fooled by "Beginners" in the title. These articles might be introductory, but some of the subjects are fairly advanced. And you might find that the locations of these articles are sites that you will want to follow for future articles.

July 04, 2009

Check Sites in Various Resolutions

ViewLike.us is a new website that lets you check how your website looks in different resolutions. Checking different resolutions is obviously a good idea, but it is not always easy without a bunch of computers. This site might be a solution. It even includes iPhone and Wii Browswer.

If you try it, leave a comment here about how the site worked for you.

June 21, 2009

June 2009 Meeting Report:
Adding Up the Menu Options

At our June meeting, we discussed the elements of navigation menus and then saw how those elements worked on some sample menus.

We first considered the HTML foundation for a menu. Looking at a couple of major sites, we saw that the unordered list seems to be the most accepted format, but a simple sentence list is often used for secondary menus, like footers. Compare the White House site with the New York Times. Load them in Firefox, turn off styles, and check the actual HTML of the different navigation sections, both in body and in footer.

We then looked at the below online tutorials to see how menus can be styled with just CSS and no graphics.

Horizontal Navigation using list property - two methods

Button effect with only background colors

Next season, we will continue with using graphics, as illustrated in this Web Designer Wall tutorial that we looked at briefly.

June 18, 2009

June Meeting Announcement

The next meeting of the PACS CSS Workshop will be this Saturday, June 20, at 9 to 10 am.

At this session, we will bring together the different elements of navigation styling that we have discussed this season. We will sum up where we have been, and then show how to use CSS to make navigation menus that are attractive as well as functional. Along the way, we will raise another of our web design philosophical questions, so you will have something to ponder while hanging at the Wildwoods this summer.

It will be a grand finale, so don't miss it.

May 21, 2009

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 14, 2009

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.

April 30, 2009

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 18, 2009

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 16, 2009

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 22, 2009

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 19, 2009

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 22, 2009

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 16, 2009

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 18, 2009

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.

January 15, 2009

January Meeting Announcement

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

We will continue our review of styling the anchor tag, so as to create interesting navigation menus with CSS. We talked about the HTML of links last month. This month, we will get into adding style to those links and discuss the concept of the pseudo-class.

Along the way we will also consider LoVe, HA! Seriously.

December 2008 Meeting Notes:
The Anchor Tag

At the December meeting, we went through the basics of the HTML anchor tag. We talked about some of the attributes of the tag, like title and target. We spent some time discussing how to style the title of an anchor, using an example from the Code: qTip website. We also discussed linking to named anchors within a page and to named anchors within another page.

As an example of how creative one can be in creating navigation menus with CSS, we looked at two examples from Stu Nicholls' site, A Circular Menu and A Circular Menu with Sub Menus.