Sunday, September 16, 2007

All you need to know about styling lists

Lists are used extensively within blogs, particularly in the sidebar; for example in blog rolls, category and archive lists. Lists within posts are an excellent way to improve readability and to highlight areas. Your blog software automatically creates some of these lists for you and your template styles them so you may not have had to worry about their formatting.

However If you want to change the type of list or its styling you may find this of use:

Types of Lists

Unordered List (Bulleted List)

This is more commonly known as a bulleted list - a list of items, each one preceded by a "bullet". The html default style will appear with a disc bullet as follows: If your lists look different to this then they have had CSS class attributes added to them in your template/theme stylesheet.

<ul>
<li>First item</li>
<li>Second Item</li>
<li>Third Item </li>
</ul>
  • First item
  • Second Item
  • Third Item

An unordered list is not to be confused with an unruly list as this only exists in my imagination; which just loves to play on words:

  • I refuse to do as you say

  • I will do as I want

  • I am a rebel, headstrong and wild

  • I can't do anything with my hair today

Ordered Lists

The simplest kind of ordered list is the numbered list.

Numbered List
<ol>
<li>This is obviously line 1 </li>
<li>This is therefore line 2 </li>
<li>This is subsequently line 3</li>
<li>I have had enough now </li>
</ol>

Numbered List
  1. This is obviously line 1
  2. This is therefore line 2
  3. This is subsequently line 3
  4. I have had enough now

Other List Styles

To achieve other ordered and unordered list styles you can either assign a class to the list or use inline styling.

Using Classes

Stylesheet Code:

Blogger - put your chosen list style type inbetween the <style></style> tags in your page.
For blog platforms that use seperate stylesheets, such as Wordpress, add these to your css stylesheet.

CSS Classes

ul.disc {list-style-type: disc} or
ul.circle {list-style-type: circle} or
ul.square {list-style-type: square} or
ul.none {list-style-type: none}<style type="text/css">
ol.decimal {list-style-type: decimal}or
ol.lroman {list-style-type: lower-roman}or
ol.uroman {list-style-type: upper-roman}or
ol.lalpha {list-style-type: lower-alpha} or
ol.ualpha {list-style-type: upper-alpha}
ol.harry-potter {list-style-type: decimal}

html:

These are is placed where you want them to appear on your page:

<ul class="circle"><li>circle</li></ul>
  • circle
<ul class="square"><li>square</li></ul>

  • square
<ul class="disc"><li>disc</li></ul>
  • disc
<ul class="none"><li>none</li></ul>
  • none
<ol class="decimal"><li>none</li></ol>
  1. decimal
<ol class="lroman"><li>none</li></ol>

  1. lower-roman
<ol class="uroman"><li>none</li></ol>
  1. upper-roman
<ol class="ualpha"><li>upper-alpha</li></ol>
  1. upper-alpha
<ol class="lalpha"><li>lower-alpha</li></ol>
  1. lower-alpha
<ol class="harry-potter"><li>decimal style with class name harry-potter </li></ol>
  1. decimal style with class name harry-potter

I threw the last one in just to show you that you can give your classes any name you like although it is much better to give them a descriptive name (I am unlikely to remember that harry-potter is the class name for a numbered list)

Continous numbering

If you want to continue numbering from a prior list as in my last post
Blog Design - 25 KISS techniques
then you can use the attribute "value"


<ol>
<li value="30"> makes this list item number 30. </li>
<li> continues on from above.
<li value="100"> makes this list item number 100. </li>
</ol>

  1. makes this list item number 30.
  2. continues on from above.
  3. makes this list item number 100.

Link List/Blogrolls

You can of course have text or even image links within an ordered or unordered list. Text link example:
<ul class="circle">
<li>
<a href="http://sueblimelybt.blogspot.com/">Sueblimely Blogging</a>
</li>
</ul>

  • Sueblimely Blogging

List Style Images:

If you want to add some pizzazz to your lists then consider using an image rather than a default bullet.
ul.image {list-style-image: url(http://www.sueblimely.com/blogging/images/icon_arrow_sm.gif;}

  • List with an Image instead of bullet

Adding list styles to posts


<ul style="list-style-type:square;">
<li>List with inline styling</li>
</ul>
  • List with inline styling

Note for html buffs - the "type=" html attributes are now deprecated

tag , alexa

6 comments:

Les Miserable said...

Thanks for that - I can use it. Thought you might be interested in this - how to get your articles on the Front Page of Google. I've just tested this technique with three stories and it appears to work really well. I got on the First Page of Google in less than a day for keywords with over 2 Million Results. Check this out - http://www.welcometowallyworld.com/boost-your-google-ranking/

Kim said...

Good to have all the codes in one place Sue......
I have just changed my blog to 3 columns and I'm waiting to see if it will blow up...haha....
if it doesn't I will probably attempt some of these... :)

Sueblimely said...

The three columns look good Kim :-)
I am going to cover adding image bullets to lists in a post soon.

Deborah said...

A list for lists, how cool Sue!

I have no knowledge of HTML and had problems with this myself. It will be a big help. Thanks for writing this! It's a keeper :-)

Sueblimely said...

Glad to be of help Deborah. Let me know if there is anything else that you would find useful to know regarding html and CSS as far as your blog is concerned.

Kim said...

oh that would be good Sue
I've been wondering how to add images..... :D

Sunday, September 16, 2007

All you need to know about styling lists

Lists are used extensively within blogs, particularly in the sidebar; for example in blog rolls, category and archive lists. Lists within posts are an excellent way to improve readability and to highlight areas. Your blog software automatically creates some of these lists for you and your template styles them so you may not have had to worry about their formatting.

However If you want to change the type of list or its styling you may find this of use:

Types of Lists

Unordered List (Bulleted List)

This is more commonly known as a bulleted list - a list of items, each one preceded by a "bullet". The html default style will appear with a disc bullet as follows: If your lists look different to this then they have had CSS class attributes added to them in your template/theme stylesheet.

<ul>
<li>First item</li>
<li>Second Item</li>
<li>Third Item </li>
</ul>
  • First item
  • Second Item
  • Third Item

An unordered list is not to be confused with an unruly list as this only exists in my imagination; which just loves to play on words:

  • I refuse to do as you say

  • I will do as I want

  • I am a rebel, headstrong and wild

  • I can't do anything with my hair today

Ordered Lists

The simplest kind of ordered list is the numbered list.

Numbered List
<ol>
<li>This is obviously line 1 </li>
<li>This is therefore line 2 </li>
<li>This is subsequently line 3</li>
<li>I have had enough now </li>
</ol>

Numbered List
  1. This is obviously line 1
  2. This is therefore line 2
  3. This is subsequently line 3
  4. I have had enough now

Other List Styles

To achieve other ordered and unordered list styles you can either assign a class to the list or use inline styling.

Using Classes

Stylesheet Code:

Blogger - put your chosen list style type inbetween the <style></style> tags in your page.
For blog platforms that use seperate stylesheets, such as Wordpress, add these to your css stylesheet.

CSS Classes

ul.disc {list-style-type: disc} or
ul.circle {list-style-type: circle} or
ul.square {list-style-type: square} or
ul.none {list-style-type: none}<style type="text/css">
ol.decimal {list-style-type: decimal}or
ol.lroman {list-style-type: lower-roman}or
ol.uroman {list-style-type: upper-roman}or
ol.lalpha {list-style-type: lower-alpha} or
ol.ualpha {list-style-type: upper-alpha}
ol.harry-potter {list-style-type: decimal}

html:

These are is placed where you want them to appear on your page:

<ul class="circle"><li>circle</li></ul>
  • circle
<ul class="square"><li>square</li></ul>

  • square
<ul class="disc"><li>disc</li></ul>
  • disc
<ul class="none"><li>none</li></ul>
  • none
<ol class="decimal"><li>none</li></ol>
  1. decimal
<ol class="lroman"><li>none</li></ol>

  1. lower-roman
<ol class="uroman"><li>none</li></ol>
  1. upper-roman
<ol class="ualpha"><li>upper-alpha</li></ol>
  1. upper-alpha
<ol class="lalpha"><li>lower-alpha</li></ol>
  1. lower-alpha
<ol class="harry-potter"><li>decimal style with class name harry-potter </li></ol>
  1. decimal style with class name harry-potter

I threw the last one in just to show you that you can give your classes any name you like although it is much better to give them a descriptive name (I am unlikely to remember that harry-potter is the class name for a numbered list)

Continous numbering

If you want to continue numbering from a prior list as in my last post
Blog Design - 25 KISS techniques
then you can use the attribute "value"


<ol>
<li value="30"> makes this list item number 30. </li>
<li> continues on from above.
<li value="100"> makes this list item number 100. </li>
</ol>

  1. makes this list item number 30.
  2. continues on from above.
  3. makes this list item number 100.

Link List/Blogrolls

You can of course have text or even image links within an ordered or unordered list. Text link example:
<ul class="circle">
<li>
<a href="http://sueblimelybt.blogspot.com/">Sueblimely Blogging</a>
</li>
</ul>

  • Sueblimely Blogging

List Style Images:

If you want to add some pizzazz to your lists then consider using an image rather than a default bullet.
ul.image {list-style-image: url(http://www.sueblimely.com/blogging/images/icon_arrow_sm.gif;}

  • List with an Image instead of bullet

Adding list styles to posts


<ul style="list-style-type:square;">
<li>List with inline styling</li>
</ul>
  • List with inline styling

Note for html buffs - the "type=" html attributes are now deprecated

tag , alexa

6 comments:

Les Miserable said...

Thanks for that - I can use it. Thought you might be interested in this - how to get your articles on the Front Page of Google. I've just tested this technique with three stories and it appears to work really well. I got on the First Page of Google in less than a day for keywords with over 2 Million Results. Check this out - http://www.welcometowallyworld.com/boost-your-google-ranking/

Kim said...

Good to have all the codes in one place Sue......
I have just changed my blog to 3 columns and I'm waiting to see if it will blow up...haha....
if it doesn't I will probably attempt some of these... :)

Sueblimely said...

The three columns look good Kim :-)
I am going to cover adding image bullets to lists in a post soon.

Deborah said...

A list for lists, how cool Sue!

I have no knowledge of HTML and had problems with this myself. It will be a big help. Thanks for writing this! It's a keeper :-)

Sueblimely said...

Glad to be of help Deborah. Let me know if there is anything else that you would find useful to know regarding html and CSS as far as your blog is concerned.

Kim said...

oh that would be good Sue
I've been wondering how to add images..... :D