Note: This post has been updated from its original version to reflect more HTML knowledge on my part…
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:
(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 is cheat.
Rather than make an unordered list, I enclose all the to-be-bulleted items between <div> tags. For the first one I add styling information like this:<div style=”padding-left: 50px;”> This indents the text (on the left), which adds some nice white space. You could also add right space by using <div style=”padding-left: 50px; padding-right 50px;”> and tweak the number of pixels until it looks like you’d like.
But what about the bullets? Well, turns out there’s special code — • or • — 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:
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?