-
Aug27
-
Horizontal and Vertical Centering Using CSS: A Beginner’s Guide
-
There comes a time in every web designer's life, when you're trying to center an HTML element and it's failing miserably. You're ready to pull the plug on CSS, revert back to tables, and use deprecated tags and attributes like:
<center>,align, andvalign. In this tutorial we're going to shed some light on the subject, and hopefully help demystify the process of centering HTML elements using CSS.
42 -
-
Aug11
-
CSS Image Maps: A Beginner’s Guide
-
While they may not be used as often as they once were in the heyday of table based web design, image maps can still be quite useful in situations that call for it. Unfortunately, for beginners, achieving this with CSS alone, can be a difficult concept to grasp.
In this tutorial, we're not only going to get you up to speed on how to create a CSS image map, but, we're also going to take it a couple steps further and add hover states to our image map using a CSS background image sprite, as well as a "tooltip" like popup.
-
-
Jun27
-
Fixed Header & Footer Layout: A Beginner’s Guide
-
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.
-
-
May27
-
Create an Advanced CSS Menu Using the Hover and Position Properties
-
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.
The finished product will render properly in all major browsers including Firefox, Safari, IE7/IE8, Opera, and Google Chrome. Due to IE6 and its lack of support for the :hover property (other than on anchor elements), we'll have to implement a little javascript to gain its support. Nonetheless, let's get started!
-
-
May22
-
CSS Background Image Sprites: A Beginner’s Guide
-
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. There are several resources and tutorials already covering what image sprites are and even how we should use them. Just google "CSS Image Sprites" and you'll return more than 2000 results. We're going to skip the history lesson and get you started using CSS image sprites today.
-