CSS: Lists Galore!

The purpose of this post was to have a library of CSS resources for controlling styling of lists. In a recent site I designed, I used several lists for the layout and design – and the flexibility they offer is wonderful!

The numbered elements in the screen-capture indicate a list that has been styled using CSS. Click on the image to view the full size.

Power of lists!

Power of lists!

Use this To look like this
The HTML:

<div id = "list1">
 <ul class = "list1">
  <li id = "first">first</li>
  <li id = "middle">middle</li>
  <li id = "last">last</li>
 </ul>
</div>

List 1

List 1

UL LI
{
list-style: square;
}

List 1

List 2

UL LI
{
 list-style: none url(list_bullet.gif);
}

List 3

List 3

UL, LI
{
 padding: 0px;
 margin: 0px;
}
UL LI
{
 list-style: none;
 background-repeat: no-repeat;
 padding-left: 34px;
 margin-bottom: 10px;
}
#first
{background-image: url(side_kb.png);}
#middle
{background-image: url(side_email.png);}
#last
{background-image: url(side_chat.png);}

List 4

List 4

UL, LI
{
 padding: 0px;
 margin: 0px;
}
UL
{
 width: 200px;
 border: 1px solid #AAA;
}
UL LI
{
 border-bottom: 1px solid #AAA;
 list-style: none;
 padding: 5px;
}
UL #last
{
 border-bottom: none;
}

List 5

List 5

UL, LI
{
 padding: 0px;
 margin: 0px;
}
UL
{
 width: 350px;
 float: left;
}
LI
{
 border-right: 2px solid #F8F8F8;
 border-left: 0px solid #000000;
 width: 90px;
 list-style: none;
 float: left;
 margin: 0px;
 padding-left: 2px;
 text-align: center;
}

List 6

List 6

#list7
{
 width: 300px;
 height: 32px;
 background-color: #102E41;
 margin-top: 10px;
 font-size:20px;
}
UL, LI
{
 list-style-type: none;
 padding: 0;
 margin: 0;
}
LI
{
 background: #D53804
 url(breadcrumb.gif)
 no-repeat left center;
 float: left;
 height: 32px;
 line-height: 32px;
 padding: 0px 6px 0px 15px;
 color: #fff;
}
#first
{
 background: #D53804 none;
}
#last
{
 background: url(breadcrumb.gif)
 no-repeat left center;
 background-color: #102E41;
}

List 7

List 7

UL, LI
{
 padding: 0px;
 margin: 0px;
}
LI
{
 width: 90px;
 list-style: none;
 float: left;
 margin: 0px;
 padding: 30px 0px 0px 0px;
 height:50px;
 text-align: center;
 background-position: center top;
 background-repeat: no-repeat;
}
#first
{
 background-image: url(side_kb.png);
}
#middle
{
 background-image: url(side_email.png);
}
#last
{
 background-image: url(side_chat.png);
}

List 8

List 8

Download the HTML and CSS.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s