Lists

HTML Coding Tutorials | Submited Jan 22, 2008

Written by:

Definition lists

Definition lists look like this:


<dl> = Definition list
<dt> = Definition item
<dd> = Definition of the item

The code for the example above:

<dl>
    <dt>Brandon::.</dt>
    <dd>An awesome example of marvel</dd>

    <dt>Kitties::.</dt>
    <dd>The cutest thing ever to grace the planet</dd>

    <dt>Skem9::.</dt>
    <dd>An amazing website that requires no further explanation</dd>
</dl>

Unordered lists

Unordered lists just but a bullet next to anything tagged with <li>, they look like this:


<ul> = Unordered list
<li> = List item

Code for the example above:

<ul>
    <li>Brandon</li>
    <li>Kitties</li>
    <li>Skem9</li>
</ul>

you can use <ul type="TYPE"> to change it froma bullet to something else, the following are what you can use:

disk
square
circle

disk = diamond shaped thingy
square = duh
circle = Hollow bullet

Ordered Lists

Ordered lists put numbers next to anything tagged with <li>, they look like


<ol> = ordered list
<li> = list item

<ol>
    <li>Brandon</li>
    <li>Kitties</li>
    <li>Skem9</li>
</ol>

Styling lists

Yeah, like anything else, you can style it.

list-style-type

remember the part earlier with <ul type="TYPE"> ?
This is the same thing, pretty much.

ul{list-style-type:none;}

That will simply leave a blank spot, but just like above, you can use, disk, square, and circle. :)

you can also use this with ordered lists like so:

ol{list-style-type:decimal}

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

ol{list-style-type:upper-roman}

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

ol{list-style-type:upper-alpha}

Decimal:
   1.Brandon
   2.Kitties
   3.skem9


Lower-roman:
   i.Brandon
   ii.Kitties
   iii.Skem9


Upper-roman:
   I.Brandon
   II.Kitties
   III.Skem9


Lower-alpha:
   a.Brandon
   b.Kitties
   c.Skem9


Upper-alpha:
   A.Brandon
   B.Kitties
   C.Skem9

list-style-image

instead of a bullet, or a number, or whatever, you can use an image:

ul{list-style-image:url(IMAGE_URL_HERE)}

list-style-position

if you have a list inside a div or a table, and the bullets are hanging out of the box, or maybe it's inside the box and you want it outside, you can do either with these. pfft.

ul{list-style-position:inside}

ul{list-style-position:outside}