neskaya
Follow [ bookmark livejournal facebook twitter rss stumbleupon ]
Log in to download layouts, skins, and emoticons. Register?

Designs

Web Templates
LJ Layouts
phpBB3 Skins

Graphics

Avatars
Textures
Buttons
Emoticons
Pixels
Fonts

Misc & Fun

Quizzes
Tutorials
Interactive

Community

Forums
Rotation

Site

FAQ & Contact
Links

Affiliates

Komet Tails
Smile Scan
Dragonrain

CSS Tutorial: List <li> Effects

First off, what is a list? Here is an example:

  • Bullet point
  • Bullet point
  • Bullet point

Made with this:

Indents / Margins

Now what if you don't like the automatic indents/margins and you want to add a background color? You can make it like this:
  • Bullet point
  • Bullet point
  • Bullet point

How did I generate that? Like this:

You can use margin-left, margin-right, margin-top, margin-bottom, and background-color to customize your list.

Bullet Points / Images

You can also make all your bullet points into an image, and customize your lists by default. Use this code in your stylesheet:

Replace IMAGEURL with the URL of the image you want to use. You can also change the bullet to different default types by using list-style-type. Replace TYPE with one of the following (these are not the only options, just the most common):

  • none
  • disc
  • circle
  • square
  • decimal
Have fun customizing those lists now!