XHTML

XHTML Tutorials

The Right Way to Add Custom List Markers to Unordered Lists

on | 4 Comments

Custom List MarkersMost experienced web developers now understand that using CSS’s built-in method for adding custom list markers (also referred to as “bullets”) to style an unordered list is not an option. The unpredictable bugs that occur in Internet Explorer when using the list-style-image property render that method quite useless.

Fortunately, because of CSS’s inherent flexible nature, we can still customize the list marker on an unordered list. This is done by placing a background image on the list items. Here’s how most developers do this:

CSS Opacity That Doesn’t Affect Child Elements

CSS Opacity That Doesn't Affect Child ElementsThis is a quick tip to demonstrate a way to work around the problem of child elements in your HTML inheriting the “alpha” settings of their parent. This tip is not necessarily recommended, because it creates extra markup and is a little bit messy. But I’m sure it could come in handy in a rare case, depending on the layout of the elements involved, the content, the type of site, etc.

First, here is the CSS code necessary to make an HTML element semi-transparent:

How To Put a Multi-Line Indent on a Styled Blockquote

Multi-Line Blockquote IndentThis brief and easy tutorial provides a method to indent multiple lines of text around a background image on a styled <blockquote> element.

When I wrote the previous post, listing 25 Classic web design articles, I included a styled <blockquote> for each of the listed articles. This is obviously nothing new; virtually all design blogs have a fancy blockquote styled with a double quotation mark in the background or something similar.

But when I was laying out the blockquote in Photoshop, I didn’t like the way it looked with the entire left side indented. Here is how I originally intended it to be:

How to Style a “Call to Action” Area with Minimal Code

on | 2 Comments

Doing front-end development for a full service web design company means I’m often involved in very high-end, corporate websites that require styling “call to action” (CTA) or “promo” areas on the home page. These areas usually consist of 3 or 4 boxes that are most likely going to change at some point, and the client might even ask for one or more of the CTA boxes to include dynamic content. What is often troublesome about these boxes is that, more often than not, they don’t contain consistent content. They might have different colored titles, different background images, variations in text size, and so on.

If we’re not careful, our CTAs can suffer from divitis, too many attributes, and CSS-overload. In this tutorial, which is mainly aimed at CSS beginners, I’ll teach you how to create a nice clean CTA that is easy to modify and contains minimal styles and markup.