Currently Browsing: CSS Tutorials

Two Element CSS Selector Challenge

A while ago I was asked by a follow co-worker if I think it was possible to build an entire site using only two CSS selectors. So after better defining, then adopting the challenge, I felt it was time to share. With this challenge, you push your thinking in a more minimalistic frame of mind with little impact and/or no learning curve.

read more

Working With CSS Sprites

Sprites are compiled versions of different creative parts of a website that typically has no need for repeating axises. Sprites are recommended to be used when ever possible to help cut down on HTTP requests to the server, and ultimately help speed up the performance of your web site.

read more

Fix Collapsing Elements With Floating Children

Today we are going to talk about how to un-collapse them parent elements of floating children. How many times have you had an element collapse or rather disappear from sight when its children element are using a CSS float styles?

read more

Pure CSS Menu With Infinite Sub Menus Tutorial

Today we are going to cover how to build a pure CSS menu with infinite sub menus; an area of CSS that is seldom talked about, poorly written or misconceived. This pure CSS menu with infinite sub menus technique makes use of CSS2 selectors so it will not work in IE6 and below without help from JavaScript. With that said, this pure CSS menu with infinite sub menus technique will work in:IE7,...

read more

How to Build a jQuery Lava Lamp Menu

Here I am going to show you how to build "Lava Lam"p menu tabs. We will be using CSS / jQuery and a single image to maintain a 100% stretchy rounded corners menu tab or lava bubble if you will. This version of the Lava Lamp menu tabs works in IE6+ and all other browsers!

read more

IE6 Z-Index Sort Order Issue Fix

Did you know that IE6 has an bug when it comes time to use the CSS z-index sorting style? Here I will show you how to over come this classic IE6 z-index sorting issue.

read more

Pure CSS Vertical Menu

Today we are going to build the second most common menu navigation, the vertical navigation menu. Here we are going to be using only pure CSS and un-ordered lists to create our menu with three sub-levels. This version of the vertical navigation menu will work in IE5 / IE6 (with CSS pseudo hover fix), IE7, IE8, IE9, as well as FF, Safari and Chrome.

read more

Three Column Layout in Less Than Ten Lines of CSS

Many developers have dedicated their time and efforts such as me to try to move developers over to the proper standards of web code and away from older or non w3c approaches to site designs. One of these long used but improper approaches to site designs is the dreaded table use for your sites layout. Tables were never meant to be a websites layout backbone as IE and Microsoft FrontPage have been advocating...

read more

The !important Use In CSS

Sometimes we must isolate out specific versions of IE that give us grief as developers. There have been many discovered avenues in isolating certain versions of IE out of our style scheme to give specific instructions to, but none are as subtle as the !important. That’s right the !important use is for IE related issues ONLY! Aside from the ridicules fact that we have a procedure to make this one browser...

read more