CSS Tutorials

Having a fixed header and/or footer can be quite effective in a web interface where its use proves to be advantageous. However, getting it implemented in all browsers, including IE6, can seem quite daunting. In this tutorial we’ll not only get it working in all the major browsers, but we’ll also cover all the necessary steps required in doing so. By the end of this tutorial, you should be able to implement this into your own projects without having to copy and paste a thing.

In this two-part article we learn a few methods for enhancing user experience and making your WordPress blog a better place. In this part, we see how to use paginator, highlight searched text in search results, and use the CSS sliding doors technique within WordPress.In the second part we will create a dropdown menu for your categories, add a breadcrumb to your theme, display related posts and tabs on your sidebar.

Build a basic slideshow that has a layered frame using z-index and PNG transparency.

Print stylesheets often come as a secondary thought on many websites, after all, who prints a webpage anyway?! Despite their slightly infrequent use, a print stylesheet can really help polish the printed document for when it is used. It doesn’t take too long to create, so let’s take a look at some handy tips that you can put into practice on your own site.

Without regurgitating too much history behind image sprites and how and why we should use them, we’re going to create something practical that you can implement into your projects immediately. We’re going to skip the history lesson and get you started using CSS image sprites today.

Starting with a photoshop file and finishing with semantic HTML and CSS, we’ll be creating an advanced CSS navigation menu using its :hover and position properties.

Every tutorial I've done on navigation bars or menu's has been the normal one level navigation bar, but when you build a website you may feel the need to create sub categories, for example my blog houses various tutorials which are stored in categories, I have a drop down navigation bar on the main link, which is tutorials which then displays sub catergories and then the specific catergory e.g. Tutorials > XHTML > Basics in that example there are three levels. You can create navigation bar level

In this tutorial I show you how to use jQuery to grab your column heights, compare to them to each other and get your that perfect two column layout

Follow these steps to build your own modern navigation bar design, starting with the initial steps in Photoshop to flesh out the design, then moving on to constructing the HTML and styling with the CSS image sprite technique. However, if all that sounds too strenuous, there’s also a handy download of the source files especially for you!

Show's you a breakdown of how to style up each element of the Twitter badge and how to make it more interactive with jQuery. Free downloads of both badges too!