Main Points

History is Now

These are not OO - CSS techniques for the most part. Most of these examples require some customization and adaptation before they will work in your own website. This is how most CSS traditionally has worked, you can reuse "templates" but everything requires tweaking and adjusting to make it work. While OO - CSS is a wonderful way to build pieces, there are some items which simply can't be packaged that neatly. However, these are core CSS techniques that you will probably use repeatedly in your custom designs. While not "drop and pop" components, they are templates which simply require the standard customization which any CSS student is used to when reusing code from one website to another. Therefore, I've included them here as traditional CSS "component cousins" that see a lot of use.

CSS Background Images

Here's an issue that comes up frequently. CSS best practices dictate that inline images (those applied with the <img> tag) should only be used in cases where the image is relevant to the text of the webpage; otherwise you should use CSS background images. This means an image of a manatee should appear as an inline image on a page about manatee biology, or on a page with news story about a manatee tangled in local fishermen's nets. Depending on the context it could be used on general webpages for a site that is generally dedicated to manatees. However in all other cases, the image does not serve the content, but is merely decorative, and it should be applied as a background image in the CSS.

Further, any images that are on the page template for the site or even one section are much nastier to maintain if you have inline images written into the XHTML of every page. This is another reason why I'm pretty hard on inline images. It's so much easier to tie a CSS background image into a particular element that's in the page template; then it's only defined one time... in the stylesheet. So if you need to make changes to the images, you no longer have to update references on every page of the website; you just fix one reference in the stylesheet. That's why I don't use inline images for the page template unless each page wouldn't make sense without an inline image. Strictly speaking, that's probably too high a bar for semantics; it's certainly not the same criteria I use for custom content in the main content area of the webpage. However, the advantages are so key that I do it for the maintainability anyway.

Therefore, many cases arise where you need to apply an image to the page using CSS background images. In each case, create a div element with an id attribute to display the image. In some cases you may be able apply the CSS to the id of a convenient block element which already exists on your page, and that's preferable. However, if not, simply drop a div element with an id specified, and then create a style rule for that id. Then declare the image in the background property as shown, and specify the height and width of the element in pixels to match the image dimensions.

Customizable CSS

#siteId {
background: url(../Images/Logo4.jpg) top left no-repeat;
height: 150px;
width: 150px;
}

Customizable XHTML

<div id="siteId"></div>

Background Image Rollover Link

Here's a useful adaptation of the CSS background image code. Inserting images into link text has been a common need, and the same effect is easily accomplished with background images. Note that as with any image rollover, you need images of the same dimensions to prevent awkward side effects. In order to create a rollover link, we already have an XHTML element to apply the background image to, the link itself. The default image is applied as a standard background image, and the rollover is applied with a hover pseudo-class.

Customizable CSS

#siteId a {
background: url(../Images/Logo4.jpg) top left no-repeat;
display: block;
height: 150px;
width: 150px;
}

#siteId a:hover {
background: url(../Images/LogoRollover03.jpg) top left no-repeat;
}

Customizable XHTML

<div id="siteId"><a href="PageToLinkTo.aspx">Here is the Text for the link. (if any)</a></div>

Spacer Div

One very fundamental technique in OO - CSS is to be able to contain the appearance of some XHTML so that the styling of a component does not bleed into the content before or after it. This is one of the fundamentals of OO - CSS. Ideally, you can use clear:both; on an existing container or element to achieve this effect, however, sometimes you don't have an element, so you need to create one. There are a number of work arounds for this (overflow: hidden, etc.) but they are all ugly and have significant side effects. For that reason I prefer to add a final element (the spacer div) which ensures that the content will not interfere with the content which follows it.

Component CSS

.spacer {
margin: 0.05em 0.05em 1em 0.05em;
padding: 0.05em;
clear: both;
}

Component XHTML

<div class="spacer"></div>

Some content to show the spacer.

Some more content to show the spacer.

CSS Drop Down Menus

Another excellent piece of functionality, drop downs, turn out to be very simple. Although it does not work in IE6, that's the only one of the standard complement of browsers which does not support this technique. Moreover, you can use this code for creating drop down or pull up navigation menus or showing / hiding components around the page. You can even use a checkbox list in a drop down to replace the undesirable <select> tag which improves your usability and accessibility, and simplifies your programming on the server side. While you still need to style the "button" and the menu elements as you desire, this is all the CSS necessary to drive the interactive behavior.

Customizable CSS

.dropDown,
.dropDown ul {
list-style-type: none;
margin: 0;
padding: 0;
}

.dropDown ul {
display: none;
position: absolute;
}

.dropDown:hover ul {
display: block;
}

Customizable XHTML

<div class="dropDown">
<a href="#">Trigger</a>
<ul>
<li>
<a href="#">One</a>
 </li>
<li>
<a href="#">Two</a>
 </li>
<li>
<a href="#">Three</a>
 </li>
 </ul>
 </div>

To make this IE6 compatible, an IE6 and below stylesheet if you do not already have one (use conditional comments in the <head> tag to wrap a link to your stylesheet). Then insert the following style rule.

.dropDown ul {
display: block;
position: relative;
}
Trigger

Hover Highlight

OK, so we have some basic drop-down functionality in place. This is simple, easy interactivity when we're using the webpage, and it helps free up some of the space on the page. However, an even better practice is to add a hover highlight. When someone mouses over the links, the background color changes to clearly indicate that the link can now be clicked. This is an excellent usability cue which shows us which item is currently selected. This technique too is very easy, and doesn't even require any changes to the XHTML.

Customizable CSS

a:hover {
background-color: #FFF0CD;
}

Expanded Link Footprint

The hover highlight is definitely a nice addition, but you still have to mouse right over the link. The fact is, you don't have to settle for this functionality. You can easily expand the link's footprint so that we don't have to click on the text to trigger the link, you can click anywhere around it too. And even the hover highlight will automatically expand to react to the modified footprint.

Customizable CSS

.dropDown a {
display: block;
}

I should note that expanding the footprint has sometimes required me to add a little padding to get things to work right. However, in this case, changing the display is all I needed to do to get the link to expand to the full size of the list item in which it is contained.

You can do a lot of additional styling to the different pieces to make them look the way you want, but those are the core elements of the drop down functionality.

While not strictly OO - CSS, these are some key CSS techniques you can use repeatedly with only minor modifications. Especially considering the importance of each of these techniques, they're vital parts of a web designer's toolkit and something good to have with you on your projects. Background images are an important way to improve the semantics of your design and sweep a lot of image elements out of your XHTML. Spacer divs between elements provide solid dividers, and are an important tool for creating certain OO - CSS components that otherwise would require customization to behave properly. Drop downs are a simple way to free up space in your interface and clear out visual clutter; yet it still allows you to incorporate links and information which are nice to have but not of primary importance.

I also have galleries for OO - CSS components for production, and those useful for design tools during XHTML prototyping.