Hanging Bullets on the Web.
KrunkPony (144 pencils) | Mon, 2008-04-21 13:33I come from a print background but have recently been getting my web skills up. But I have come across some problems creating a typographic anomaly called Hanging Bullets.
I'm a attaching an image with the blocks of text with differently styled bullets as a point of conversational reference.
What do you think is the best way to handle bullets on the web?
How do you code it?
| Attachment | Size |
|---|---|
| 22.84 KB |
---
Good, fast, and cheap. Pick any Two.
The future is now.
Big Pony Blog
Design Portfolio
Commenting on this Forum topic is closed.

You use "unordered list" to do what you want:
You do this by starting with the UL code, which is:
(remove the spaces before and after the two letters)
Then you take each paragraph or line of text you want "bulleted" and start it with the list code, which is:
(remove the spaces before and after the two letters)
After each list item, end the line with the closing code, which is:
((remove the spaces before and after the slash and two letters)
Then at the very end of your bullet list, end it with the unordered list closing code, which is:
(remove the spaces before and after the slash and two letters)
In the example above, there are three items (one at the start of each of the bullet text lines, and three items (one at the end of each of the bullet text lines. Note that there are NO HARD RETURNS in the second bullet. Just like in print, a hard return results in a new bullet.
-----------
Visit The Graphic Mac for graphics and Mac OS tips, reviews, tutorials and discussion.
Or ordered list for numbered lists:
Replace * with < and >:
*ol*
*li*First Item
*li*Second Item
*/ol*
1. First Item
2. Second Item
And use CSS to style your bullets. You can affect ul and li using those as tags in your CSS file:
ul {
}
ol{
}
li{
}
----
Powerpoint is not a design application
----
Dirt and Rust
I still can't get my head around CSS. . .:P
is there a primer that anyone could recommend to get me started. I'm WAY behind on this!
Used to the ol GUI in dreamweaver b4 it went CS!
"Try not, Do! or do not, there is no try."
-Yoda
There's tons out there but csszengarden.com is a cool place to start. I like the books from sitepoint.com about CSS, particularly this one:
The Art and Science of CSS
Check out other CSS books from Sitepoint. Search the web for CSS and you'll find an endless array of websites covering it.
A good CSS properties reference is HTML Dog
----
Powerpoint is not a design application
----
Dirt and Rust
On the web where do you think the bullet should start. I know one thing you can do in CSS is tell the bullet where to start.
Should it be linked B or C or further indented?
-T
---
Good, fast, and cheap. Pick any Two.
---
Good, fast, and cheap. Pick any Two.
The future is now.
Big Pony Blog
Design Portfolio
You can choose where the bullet starts by updating its css reference:
li
{
padding-left: 5px;
}
Just one example. Play with the spacing till you like how they layout. Make sure you're testing this li css on more than one li (list item).
----
Powerpoint is not a design application
----
Dirt and Rust