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 — 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
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 — • 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
Works for me. Maybe it’ll work for you. Thoughts?
The post How To Make Lists Look Better In HTML, Part 2 appeared first on The River.
