≡ Menu

How To Make Lists Look Better In HTML, Part 2

Tweet about this on Twitter1Share on Google+0Share on Facebook1Share on LinkedIn0Email this to someone

I started this mini-series with a look at how to spread things out more easily using standard (though outdated) HTML list tags. Now, a look at my secret weapon — fake lists. It looks like a list, but it isn’t a list at all.

By the way, these tips are meant for folks who aren’t on intimate terms with CSS or are working on sites where they don’t have access to the CSS — there may be more elegant ways to accomplish this stuff, but I’m no designer/coder.

So, first, let’s look at the problem we’re trying to solve:

normalunordereslist

(Note: I’m using an example from George Aspland’s recent Marketing Land column, so be sure to check it out.)

The above doesn’t look terrible, but, for my taste, it’s kind of bunched up. I’d like some spaces between the bulleted items. And, in some cases, I’d like to break up the bulleted items into multiple paragraphs. It’s just easier to read with a bit more space.

So, what I do — and this may or may not work depending on how your CSS is set up with regard to the display of blockquotes — is cheat.

Rather than make an unordered list, I enclose all the to-be-bulleted items between <blockquote> </blockquote> tags. This indents the text (on both sides), which adds some nice white space.

But what about the bullets? Well, turns out there’s special code — &bull; or &#8226; — to create a bullet. So I add those to the front of each bulleted paragraph.

Here’s how it turned out on my edit of the above text:

spacedoutlist

You can do the same thing with ordered lists. Just write the actual numbers or letters, rather than using a <LI> tag within an ordered list. The bullets or numbers aren’t out in the white space, as they are with real lists, but I prefer that quirk over bunched up text.

Works for me. Maybe it’ll work for you. Thoughts?

Tweet about this on Twitter1Share on Google+0Share on Facebook1Share on LinkedIn0Email this to someone

Comments on this entry are closed.