Fancy Unordered Lists (bullet points) using CSS

Vince Cutting — Fri, 20 Mar 2009 20:20:57 +0000

Have you ever wanted to add fancy bullet points to your unordered lists in your(x)HTML but never knew how? The truth is, it’s actually really easy to achieve. All you need to do is add a CSS class to your unordered list and then use your CSS to add your chosen image as the bullet points. In this post I’ll walk you through this step by step. First lets take a quick look at the list we’re going to be creating:

This is the first list item
This is the second list item
and this is the third list item

Step 1: Create your unordered list, ensuring you use a classname for the ul.

OK the first step is to create your unordered list as normal, and to specify a classname on the ul element. In this example i am using a class name of “tick-list” as I’ll be using a tick image for my bullet point. The HTML code should look something like this:-

class="list-tick">
This is the first list item

This is the second list item

and this is the third list item

Step 2: Add the CSS to specify your image to be used as a bullet point

With our HTML list in place we now need to use our CSS to control how it will look. The following CSS will remove the default margin and padding for both the ul and li elements, remove the standard unordered list bullet points, indent the list items using some padding on the left, and finally place your chosen image as a background in the padded are at the left of the list item. Your CSS for this particular list should look something like this:-

ul.list-tick {
margin: 0;
padding: 0;
}
ul.list-tick li {
margin: 0;
padding: 2px 0 2px 16px;
list-style: none;
background: url('../images/list_icons/tick1.jpg') no-repeat top left;
}

Step 3: Dont forget to add your bullet/tick image to your server where your CSS can find it.

Of course the above HTML and CSS will not work without the image you want to use actually being available, so make sure you have them available on your server where your CSS can find them – you’ll also want to make sure that your image(s) are scaled down appropriately prior to using them, I have scaled down my bullet images to 12px x 12px so they should fit nicely beside standard sized text.

Step 4: View your fancy new list

OK, with the first 3 steps now completed, you should be ready to view you fancy new unordered list with customized bullet points, like so:

This is the first list item
This is the second list item
and this is the third list item

Step 5: Experiment with different images

You can add as many different customised list classes and images as you like to your website. Below are a few more examples:-
List with a ‘list-pin1′ CSS class

This is the first list item
This is the second list item
and this is the third list item

Another list with a ‘list-pin2′ CSS class

This is the first list item
This is the second list item
and this is the third list item

List with a ‘list-cross’ CSS class

This is the first list item
This is the second list item
and this is the third list item

List with a ‘list-note’ CSS class

This is the first list item
This is the second list item
and this is the third list item

List with a ‘list-mark’ CSS class

This is the first list item
This is the second list item
and this is the third list item

So, use your imagination, you can add bigger images if you’d like, you’ll probabally need uo use bigger li text though or more padding. Let me know if you come up with any stunning lists of your own.

How to center a website accross all browsers using CSS

Vince Cutting — Tue, 21 Oct 2008 22:23:41 +0000

Now I’m not sure about you, but I really do hate websites that are stuck on the left of the screen, and from talking to a few friends, I know I’m not alone with this pet hate. The thing is, that many beginner site designers may also dislike this left alignment, but simply do not know how to make their site appear in the center of the screen, but others may have centered their site absolutely perfect in their favourite browser, but are totally unaware that it may not be centered in others.

Today, I’d like to share my own method of centering your website in any browser using CSS – I’m going to be using CSS in the head of the HTML document today for simplicity, although ideally you should place it into an external/linked stylesheet on your own pages.

The trick to centering pages in all browsers is using what’s commonly known as a ‘wrapper’, applying some auto margin to that div in the CSS, and then using a small workaround so that the wrapper is centered in IE.

I’m going to start by using a basic outline template, demonstrating the basic page structure and illustrating what I mean buy the wrapper – which is commonly just a div to contain everything in.

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http-equiv="Content-Type" content="text/html; charset=utf-8" />
</span></span>Title<span class="sc2"><span class="kw2">
name="robots" content="index, follow" />
name="keywords" content="" />
name="description" content="" />
type="text/css">
body, html {
margin: 0;
padding: 0;
}
#wrapper {
width: 800px; /* your wrapper obviously needs a width otherwise it will be 100% */
margin: 0 auto; /* This is the proper way to center in a standards compliant browser */
}
/* This is the IE workaround*/
body { text-align: center; }
#wrapper { text-align: left; }
/*Now to just add some colour to see it in action*/
body { background: #000; }
#wrapper { background: #fff; color: #000; }
id="wrapper">
Title
Content to go here.

Now you can see the structure is fairly simple – the wrapper is just a div with a id of “wrapper”, which we specify a width for, and then set the margins to “0 auto”, which means no pixels for top and bottom margins, and auto for left and right margins. the auto value for margins basically gives the left and right edges equal space between the edge of the wrapper div and the edge of the browser window.

Next, we have to add the workaround for IE6, because it doesn’t understand auto as a value for margin. We basically do this by using text-align:center for the body to center the div on the page, but this will also center everything inside the div too, so we then have to re-align this to the left again using text-align:left for the div itself.

I’ve applied some background colours to the body and the div, so that you can see the centering effect for yourself – go ahead and try it for your own pages, and test it in different browsers…enjoy.

Vince Cutting » css