Creating Clickable DIVs

DIV’s are a must in all CSS-based web design. They give you all kinds of fantastic positioning ability and give structure to your HTML. You can put links inside of a DIV, of course, but sometimes you just want the whole DIV to be clickable as a link. No problem, here is how it’s done:
<div [...]

CSS Menu With Rollover Images

We just posted on the nastiness of javascript-based rollovers. We showed you the basics of how to do it with CSS instead, but now it’s time to put our money where our mouths are and provide a real example.

This menu example uses three possible states:
- Normal
- Rollover
- Selected
The code is really clean and simple and [...]

Reset all Margins & Padding

* {
margin: 0;
padding: 0;
}
This has become a very popular technique lately, and for good reason. It removes all default margin and padding for every object on the page, no holds barred, regardless of browser. This provides a nice clean slate for design and ensures that all spacing is [...]

3 Styles for BIG Headers

Here are some simple styles you can use when you need a BIG header.
h1.test1 {
font-family: Georgia, sans-serif;
font-size: 5em;
letter-spacing: -2px;
}
h1.test2 {
font-family: “Trebuchet MS”, sans-serif;
font-size: 5em;
letter-spacing: -2px;
border-bottom: 2px solid black;
text-transform: uppercase;
}
h1.test3 {
font-family: “Arial Black”, sans-serif;
font-size: 4.5em;
letter-spacing: -1px;
background-color: black;
color: white;
}

Header Text Image Replacement

So you know that search engines like Google, Yahoo, and MSN are primarily looking at the text content of your pages to index them an determine their relevancy to searches. You also know that using header tags like <h1> in your HTML is important because search engines value organized, sectioned content. But what if you [...]