Ideals

I firmly believe that a site should still be functional, 508 compliant and still look good when styles and JavaScript are turned off. With this in mind we will be doing some "progressive enhancements" and since there is going to very little that won't work in all browsers I won't go into my rant about PE.

Structure

We will be using Definition lists; why definition lists? Because they are semantically correct for this situation. Have a look at two really good articles from Css-tricks.com and Maxdesign.com which go into detail on why you should use definition lists.

Below is the structure we will be dealing with, notice that we only have the DL/DT/DD structure and now wrapping DIV or any other extra mark up:

With PE in mind, we will use JavaScript to add in any additional mark up we will need to achieve the scroller look.

Current Progress

The content from our current progress is from a dump I did of my own site using WordPress' loop.

Styling

In our next layer of PE will are going to add in some style simple based off of the current structure minus the JavaScript.

Current Progress

In this phase we really did not do anything special, I just styled it as I would have normally. You can add more pop to it if you feel. Do note however, that at line 28 I am using a selector that IE6 does not support and since the extra padding for that element is a nice to have and really does not hold the user of IE6 back I felt it was ok to add that in there.

JavaScript

Now we start with the real fun, using JavaScript - in this instance, jQuery as our framework of choice, but you can just as easily use MooTools or DoJo - to add in some WOW factor. Here the plan is to wrap the DL in a DIV, add some classes to some elements, set up some events, and animations.

What we have in the example just below is some additional styles and elements.

Current Progress

Finally we have to set up the events and animation; what events do we need to set up and why? We need to bind the mouseenter and mouseleave event because if we want to be able to read what is being shown we need to be able to put our mouse over the content and have it stop any animations that are running so we can read it.

First thing we will need to do is to find out the total height of the grouped content is. The grouped content in this case is the DT/DD/DD/DD combination. We will be using the outerHeight() method to get the total height (padding/margin/height). To get that grouped content we will be using a combination of .children() and .slice().

Final

Final

Closing

So with the final product we have a decent footprint to stylize to your likings. Feel free to stylize it, add new functionality, new animation - some easin/easeout effects would look nice. Think outside of the box, just make sure it degrades nicely.

Although they do and look like you would expect I decided to add a little flare to them.

The Look

The Code

The Closing

Someone once told me, when optimizing my images for the web from Photoshop or Fireworks, don't use the default values.  I think the same should be said about using any of these css frameworks that are out there.  Get into the code and 1) learn what's going on and 2) experiment with the default values.  You will be glad you did.

Credits

• Icons from WeFunction

I started out by doing a search for "css em;" yes, it was that simple to get started. The results varied from good to bad and the way I weeded out the bad was the way probably most users weed out a bad site, The Design. After that, if I did not understand what the person was saying after the second paragraph, I moved on to the next site. What I end up with was a few that really made it clear to me what and how to use the EM in css. I am just going to post some quotes that I thought made things clear to me with a link to the site for you to get the full scope of the article.

The first site I came across what Monday By Noon, they themselves point to a few articles that were pretty good. The first ten paragraphs were about why not use PX, %, or EX. Although they were good, I was only interested in learning how to properly use EM so I only skimmed them. The "Putting em to Use" was the most informative to me with regards to the article.

...using em units for font-size is dependent on the font size of parent elements. This is the most important concept to grasp when using em to scale text, and most often confusing to early adopters.

Those two sentences made the most sense and really put things into perspective.

In order to keep from being confused, it is often a good idea to keep font-size declarations to a minimum. Once the font-size is defined in the body, you should only continue to define where needed due to the fact that em font-sizes are relative to parent elements.

As you can tell from my current site, I am not following that advice. When dealing with PX, I found myself giving everything a size and when moving to EM I was doing the same thing and really started frustrating me because some lines would be huge where others are the way I wanted.

The comments were where I really started to get some good information. The best comment and most informative was:

...em scaling is inherited from its containers, in the case you mentioned, its like saying set all the body text to .81em, then set the table cell to .75em of this, so it is the correct and logical behaviour. What you want is text 6% smaller that the body text so set the td text to .94 em.

I would suggest that you do have a read of the comments, very very informative. That site again is mondaybynoon.com.

Site number 2 that was very usefull is Jon Tangerine; this one may be information overload, so take it piece by piece. He goes over how to convert your PX size to Em size while taking into account the size of the parent element. He also take using EM to the next level by using it with the complete layout of the site; margins, paddings, line height, and images are all using EM to keep their size relative when the end user resizes their text.

Margin, line height, padding etc. in ems are all relative to the font size of the element they belong to.

Ems allow only three decimal places. More is fine in calculations but before writing CSS, round it up to three

He really explains the EM thing real well, have a read at it at http://jontangerine.com/

Last but now least, here is a site you should bookmark, http://riddle.pl/emcalc/; it will save you time when needing to figure out what 23px equates to in em.

I personally will be using the information found and putting it to good use, so look for some layout changes to this site as I experiment.

One such site was talking about CSS Image Rollovers and their examples consisted of a <A> tag wrapping a none breaking line space, I won't post a link because I have actually seen quite a few other sites doing the same thing and don't want to single anyone out. But what really made me frustrated is this particular site had a least 50 comments saying how great this was. While I don't consider myself an expert there are a few things I truly believe in: clean code and accessibility. As it stands now, my blog is not 100% accessible, there are things I need to do to make it better, and those things are in the works.

So, what I would like to do is show you a way of making image rollovers while being accessible, and search engine friendly.

Say we have an image sprite like below (we can cover the pros and cons of image sprites in another post, these icons can be found at http://utombox.com/my-works/):

The style sheet code:

The Html code:

The outcome:

youtube iconflickr iconrss iconfeedburner icondelicious icontechnorati icon

The Explanation:
Lets start off with the easy things to explain; in the instance above I am using an image sprite which, depending on how many external elements you need to load, will speed up load time. In the first class icon we are setting the background as the sprite and then proceeding classes we simply position the background image to get the desired image showing with both the default image and the hover.

The hard thing to explain, at least for me, is what everything in the icon class is doing. I will try, but if I mess something up, call me on it.

• display
  • -moz-inline-box: for mozilla based browsers
  • inline-block: supported by IE and all other grade-A browsers
• overflow
  • hidden: make everything hidden if it is outside the box (ie6, you know I talking about you)
• background
  • url: ummm... the background image
• text-indent
  • without *: applies to only block-level elements, table cells and inline blocks, since we are using -moz-inline-box, firebox will not use this
  • with *: IE does not support it correctly, so we set it back to 0
• font
  • 0/0 Arial: this is to set the text to a very small size, there are some browsers that do not support this shorthand, but I can't remember which ones off hand.
• color
  • rgba(255,255,255,0): this is a css3 spec and is only being supported by safari and firefox 3
• vertical-align
  • bottom: this is required for block elements to keep them inline with text

The Small Print:
There are some thing to consider when doing the rollovers or image replacements in general; it is not 100% accessible, meaning, although screen readers will be able to pick it up, people that can see, but have poor vision will not be able to set the font any bigger then what you have in your image.

With that said, have fun with it. Any questions comments or concerns, feel free to drop a line.

Update 11/21/2007: Came across a really nice article about css sprites, very good read.