Journal CSS: Lists +

Lists on deviantart can be rather ugly beasts, which is why, perhaps, they don't get the love they deserve. A shame really, because with a few simple lines of CSS they can become quite beautiful things.

I've already covered the use of lists in special techniques like hover menus and image list but in this journal/tutorial we go back to basics.


The HTML to create a list is quite simple. Well, HTML is simple in itself anyhow... but lets keep moving. There are three types of list:

1. the ordered list - with sequential numbers marking each item (like this list here! )
2. the unordered list - usually seen as bullet points
3. and the definition list - a special type of list I'll explain below.

The most commonly used is the unordered list, and with it you can separate a bunch of items into bullet points:



Compare that to the more common 'fudged' lists, which could use dashes or other symbols to indicate each list item:



Putting your lists in actual HTML lists is a great because you can use CSS to make them look any way you like. Borders, backgrounds, more spacing, less spacing... whatever. With plain text lists you get none of that.

HTML
The HTML is very similar for ordered and unordered lists, see if you can figure out which is which:

<ul>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

<ol>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ol>

List items can contain all sorts of things, not just text. You can put thumb/avatar/username shortcuts (which dA converts into image/link tags) - you can even put a whole other list inside a list item. CRAZY.



Definition lists are special though, instead of placing your list items in li tags, we have definition terms dt and definition descriptions dd:

<dl>
  <dt>term</dt>
  <dd>description</dd>
</dl>

In HTML we are meant to use specific tags for specific purposes, and definition lists have the specific purpose of defining lists of terms, for example:



fixing the annoying space
One last thing to note before we get to the fun stuff - if you write a list in your journal formatted nicely like those examples, you'll find that there will be unwanted extra space between the list items. The extra space is caused by the break tags deviantart inserts whenever it encounters a 'newline' (a hit of the enter key) - to avoid it you could write your lists all bunched on one line, but a nicer solution is to use CSS to hide the tags:

ul br{display: none}
ol br{display: none}
dl br{display: none}

li br{display: inline}
dt br{display: inline}
dl br{display: inline}

The first three lines hide the break tags that cause the problems, and the last three lines retain them when they appear inside the list item itself - somewhere break tags have legitimate use.

ordered list fancypants
By default you will find your ordered lists items marked by numbers, but it is quite simple to make it alphabetical, Roman numerals, or even the Greek alphabet!


The CSS is simple:

ol{list-style-type: lower-latin }

Check htmldog.com's property list for a full list of values you can give list-style-type.

Note that with the CSS in the example above, all ordered lists in your journal will have that style applied. If you only want to change a specific list, you'll have to wrap it div tags and give the div a class name, then adjust your selector ie: .alpha ol{list-style-type: lower-latin}

custom bullet images
The crowd pleaser



There is a property for specifying a bullet image - list-style-image - but you don't get any control over the exact position of the bullet image. Give it a try if you like, but I prefer a different approach.

Instead of using the property, we can apply the bullet image as the background image of the list item, setting a few special properties along the way to make sure it all looks exactly as we want it.

The HTML is the same as any other list, only this time there's an extra div tag surrounding it, with the class name 'custom_bullet' - though you can call it anything you like.

.custom_bullet ul{padding: 0}
.custom_bullet ul li{
  background: url(...) no-repeat;
  padding-left: 20px;
  list-style: none
}

The amount of padding you give depends on the size of your bullet image. Setting it to exactly the width of your bullet will make it touch the text, so be sure to give it a little extra to space things out.

You can also adjust the position of the bullet using the background-position properties - which you can specify separately, or keep within the background shortcut property I have shown above. For instance, if you wanted your list bullets vertically centered:

background: url(...) no-repeat left center;

...would give:



Most useful however, is to use background-position to fine tune the position of a bullet image to make sure it looks right. This will most often happen when the size of the list item doesn't position the bullet image naturally - either because the font size is huge, or because the list item has a lot of padding. Below, I've give the list items a silly amount of padding to illustrate my point:



The second item was fixed with:

background: url(...) no-repeat 0 13px;
...the 0 indicates how many pixels to push the image from the left (in this case, none), and the 13px indicates how many pixels we want to push the image from the top.

For some extra fancypants, you could also change the bullet image on :hover -



Link lists

I'm currently working on this section!

If you want to make a simple list of links, you could write up a list and put your links in the list items... but that's not interesting enough for me, so I'm going to share some fancy pants.

Instead of using list tags (strange, I know, considering this is a tutorial on lists) we're going to make a div, and stick the links right in it. Then we'll use CSS to make it interesting.



...that's about it for now I think. If I've missed something, or if you have any questions, leave a comment