I have been busy this week with a few really cool projects - one of them to create a widget for any site that will show the latest news items from a RSS feed - while not limiting the widget to servers with PHP. After putting that together, I had to add inline CSS to style the feed output. Everything looked great but I could not figure out how to add a :hover to an inline style…until I realized I could fake it by adding some basic javascript: onmouseover and onmouseout to change the font color.

[html]
Title

If you are not comfortable with CSS or want to get a layout together really quick - check out the YUI CSS Grid Builder. You can easily create a layout, add content, and get the code in a matter of minutes. At the very least - this is a great starting point for beginners! Check it out!

Awhile back, I put something together (sons of suckerfish and sliding doors) and then was recently asked how to get this to work dynamically in WordPress.

The key to getting this to work dynamically is to first choose how you want to organize your site. I have done numerous sites based on categories and a lot also done using pages. Once you figure out what you want your menus to be driven from (page hierarchy or category hierarchy) you can then use some built in WordPress functions to dynamically fill out your menus.

For categories: you will want to use the wp_list_categories function
Example: (using the CSS and JS from the article I posted previously)

With that example, you can exclude certain categories, and their will not be a "Categories" text as the first level of the list. For more options, check out the wp_list_categories documentation.

For categories: you will want to use the wp_list_pages function
Example: (using the CSS and JS from the article I posted previously)

With that example, you can exclude certain pages, and their will not be a "Pages" text as the first level of the ... [more]

There have been two great menu and navigation techniques I have used over the last few years:

Sliding Doors of CSS
Sons of Suckerfish (for drop down menus)

I have used both of these techniques on several web sites, but crazily not together...until a week ago when a client decided they wanted to move away from their antiquated menus that relied on hundreds of lines of javascript, HTML tables, and over 40 image files (for seven tabs). This technique works in IE 6, IE 7, Firefox, and Safari.

After I had put the code into place I thought it might be helpful for others to see exactly how it is done. These techniques give you a lot of flexibility with very lightweight code.

Code/Files Needed

Two tab images (left and right, with both an active and hover (highligted) option
Sub-menu arrow (not required)
Sons of Suckerfish javascript
CSS for both the drop downs and the sliding doors techniques
Menu list code (your menu items)

Two tab images
The sliding door technique is great because you do not need to make tab specific images, nor do you need to worry about the tab length - it is all taken care of by two images and some CSS. For ... [more]

I apologize for not blogging as much as I would like over the last few weeks, but I have been swamped with a number of big projects. As soon as I have more than five minutes at one time to blog - I have a great blog post to write on some really cool stuff I have been doing with CSS. Stay tuned!

What do you do when you have thousands of lines of CSS and probably have hundreds of lines within the thousands that are no longer used...but you have no idea because multiple people have contributed? You use the CSS Redundancy Checker.

I am working on a project that started small and got really big. Good for the company, bad news for the code. I am in the process of going through the code and to fix and optimize it for multiple browsers. One word of advice for developers: when starting a new project, expect exceptions. One issue I have run into: not all buttons will be 90px wide like once thought by the original designer. By using flexible code, your big and small sites can benefit from changes in the future. If you are going to create buttons for your site, check out the "sliding doors" buttons. I also recommend the "sliding doors" tabs - I use those on almost every site I do.