Monthly Archives: June 2008

How to Use CSS Sprites With Son of Suckerfish Drop Downs

Jun
22

36 Comments - LEAVE A COMMENT

So recently I was working on a project that required image based navigation AND drop down menus. From the get-go I decided to use CSS Sprites for the tabbed menu for the normal, active and hover styles. I also decided the best way to implement the drop down was to use the “Son of Suckerfish” drop down menus heavily modified from the original code to fit in with the original programming I had done for the menu.

I’ve explained before how to use CSS Sprites for changing images, so I won’t go into too many more details on how to accomplish this, but to recreate this for your own site you will need to create one sprite for your normal tab, hovered and current/active tab. That’s three sets of tabs in one file.

CONTINUE READING...

How To Make Aardvark Add-on Work With Firefox 3!

Jun
20

7 Comments - LEAVE A COMMENT

Aardvark Plugin for Firefox I’m a huge, huge fan of the latest Firefox release. But I was really, really disapointed that a LOT of my very favorite (and most used!) plugins were incompatible. The plugin I felt most lost without was Aardvark, which I use every single day, practically all day long to aid me in development, editing and design.

Aardvark is a simple little Firefox plugin that when activated (right click and choose “Start Aardvark”) lets you highlight each elements on the page with a red border – not only that, a tab appears on the border with the element and id/class that is associated with it.

This plugin is critical for me (along with Firebug) when diagnosing layout problems.

CONTINUE READING...

Create A Memorable Maintenance Page

Jun
16

13 Comments - LEAVE A COMMENT

Every once in a while we have to take our site down for upgrades, or god forbid something breaks and we have to fix it and we don’t want to leave the broken version for our users to see.

I was inspired to write this after seeing the funny Technorati maintenance page this morning:

Technorati Monster Loose

Maintenance pages are important for many reasons, but one of the most important reasons is to make people remember to come back. If someone is visiting your site for the first time and you are currently working on your site and have placed it in maintenance mode typically you will replace your index with a page explaining the downtime and encouraging users to check back later (giving a specific time frame is good practice).

CONTINUE READING...

Rounded Corner Boxes With Expandable Heights Using CSS and Images

Jun
9

18 Comments - LEAVE A COMMENT

Rounded corners are a great design element to escape from the blocky/boxiness a lot of web designers fall victim to. I remember the first time I created my own rounded corner box using Photoshop and HTML/CSS. What a thrill :) A lot of people shy away from it because it SEEMS a lot more difficult than it really is.

I’m going to show two ways to create this effect using Photoshop (or the graphic editor of your choice) and HTML/CSS. There are other ways to create this effect using just CSS – but I really am not a big fan of it because it creates a lot more empty divs than this method. Yes if images are off you will lose this effect – but I’m willing to sacrifice that.

Like I said I’m going to demonstrate two ways to accomplish this. The first is using just a flat rounded corner image with no other effects. The second will have a box with a drop shadow, border and gradient. :) So let’s start easy!

CONTINUE READING...

Create Full Width Header & Footer With Centered Content Using CSS

Jun
7

30 Comments - LEAVE A COMMENT

Update #3 2/1/2015 – Final update! I have made the final version completely simpler and completely responsive! Disregard this version and all others. The only version you should read and download is the New Update: 100% Full Width Header & Footer with Centered Content (Including “Anchored” Versions).

Update #2 1/15/2012I have updated this version once again, please see the latest release of 100% Full Width Header & Footer with Centered Content.

Update!: I’ve published a new version of this method that is even EASIER. If you would like to learn more please see How to: Create Full (100%) Width Header/Footer with Centered Content (Updated). This method is still valid and feel free to use it if you like.

There are probably a million different ways to do this, but I’m going to show the way that I have preferred to do it, combined with my favorite centering position method.

So the simple way to do this is as follows:

CONTINUE READING...