Creativebits.org

an All Creative World site
KrunkPony's picture
144 pencils

Hanging Bullets on the Web.

I 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?

AttachmentSize
hangingbulletsontheweb.gif22.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.

JimD's picture
2617 pencils

You use "unordered list" to do what you want:

  • Text Here
  • More Text Here More Text HereMore Text HereMore Text HereMore Text HereMore Text HereMore Text HereMore Text HereMore Text HereMore Text HereMore Text HereMore Text HereMore Text HereMore Text HereMore Text HereMore Text Here
  • Some more text here

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.

natobasso's picture
3953 pencils

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

ireid's picture
1283 pencils

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

natobasso's picture
3953 pencils

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

KrunkPony's picture
144 pencils

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

natobasso's picture
3953 pencils

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

Creativebits is a blog about creativity, design and Macs. We also have a critique section where you can post your work to get opinions and a forum to discuss any design related topics.

Recommend us on Google

Latest critique

Do you need a great new logo?

If you need a logo for your company or product you can get it done with us.
In our logo store you can pick from over 28,000 pre-made logos that will be customized to your name for free or you can post a contest for us for just $250 and our designers from all over the world will submit dozens of logo design suggestions to your specific needs.

Marketplace