Vince Cutting

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:-

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.

Running IE6, IE7 and IE8 on the same pc (even on Vista)

Vince Cutting — Tue, 21 Oct 2008 12:20:15 +0000

For many web designers and developers, getting a website to look and function the same in different browsers can often be a challenge. This challenge is often made even more difficult when trying to achieve the same appearance across Microsofts hugely different versions of it’s Internet Explorer browser – none of the IE browsers have ever complied to web standards, and each different version comes with it’s own quirks to deal with. So you would think you could just install all the different versions and test your web pages in each of them…wrong, it’s often impossible to get all the different versions (namely IE6, IE7 and IE8) running on the same computer, especially if you are running Windows Vista which will not let you install IE6 at all.

For XP users, Tredsoft’s “Multi IE” (http://tredosoft.com/Multiple_IE) has been a godsend for a while now, although this solution still will not work on Windows Vista.

I stumbled accross something today, whilst searching for a solution to this Vista problem, and this solution will actually allow Vista users to preview web pages utilising a online rendering engine for IE5.5, IE6, IE7 and IE8beta2, all nicely packaged up into a single desktop application, which even allows you to view say a IE6 rendered page alongside a IE7 rendered version of the same page. This program is called “IE Tester” from www.my-debugbar.com, and it absolutely blew me away when as found it, as it does exactly what I need (viewing pages under different Internet Explorer rendering engines) IN WINDOWS VISTA!

If you are suffering the nightmare scenario of needing to test website pages in different versions of Internet Explorer, but cant install all the different versions you need onto the same PC, and especially if you are needing to do this in Windows Vista, then I recommend you give IE Tester a try – it works like a dream for me, and saves me having to run a seperate XP computer just for testing.

You can download MyDebugbar’s “IE Tester” from the following link: http://www.my-debugbar.com/wiki/IETester/HomePage

IE Tester Screenshot

Where to start when creating an xHTML page

Vince Cutting — Sun, 19 Oct 2008 00:02:04 +0000

When I create a new xHTML/HTML page I like to start with a template where I can then fill in the blanks. My basic template will include the doctype for the document, the basic document tags (html, head, body, title etc), a link to my external stylesheet, and finally a ‘wrapper’ div in the body which makes things easier when specifying a width for you page or centering the layout. This is the basic framework for any xHTML document, and is the bare minimum you should start with.

The following code is my own basic xHTML template I use when creating static pages:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Title Here
Title Here
Some content here.

If you are using Aptana Studio to write your pages, then you can find a similar template under the HTML Snippets in the IDE.

Aptana Studio…better than Dreamweaver, and FREE!

Vince Cutting — Sat, 18 Oct 2008 22:28:37 +0000

To kick off my blog I’d like to share with you my IDE (Integrated Development Environment) of choice for writing and editing all of my website code.

Now I have used Dreamweaver in the past and it is a fantastic product, but comes with a very hefty price tag that most beginners simply cant afford. A little over a year ago, I was scanning the internet for a alternative to the industry-standard Dreamweaver, and after a few days of relentless searching and trying out many different programs, I came across Aptana Studio which ticked all the boxes of the features I needed in an IDE and appeared to be a suitable alternative to Dreamweaver, and best of all, it was (and still is) FREE.

I have used Aptana Studio ever since finding it, and very soon weened myself off Dreamweaver altogether. For writing and editing code and uploading it to your server it is an awesome program, and comes complete with syntax-highlighting (colorization of your code, so that you can more easily read it), FTP, plenty of pre-written code snippets for you to play with and learn from, code-assist (this is where the program actually helps you write your code by displaying tooltips as you type), as well as a browser preview view of your web page. All of that is built into the one program, and the whole thing is extremely customizable so you can tweak it to your own way of working.

Aptana Studio Preview

Aptana Studio will happily work with all of your website files and will provide all the suitable code-coloring and code-assist for your HTML, CSS, PHP and Javascript files, all in one program.

Now Aptana Studio doesn’t have the fancy WYSIWYG (What You See Is What You Get) editors of Dreamweaver, but this is a feature I never used anyway as I always like to write my own code, so if that is a feature you rely on then Aptana Studio may not be for you, although you can still use if for editing your code and use something like Dreamweaver of NVU (free WYWSIWIG website editor program) when you really need to drag and drop things.

More recently I have totally uninstalled Dreamweaver, as I no longer have any need for it and Aptana Studio regularly release better and better updates and are constantly adding some excellent features (like the brand new Aptana Cloud and the Aptana Jaxer javascript server). I’d wholeheartedly recommend using Aptana Studio as a Dreamweaver alternative if you are serious about either learning to write websites, or building better websites.

I would give Aptana Studio 5 stars out of 5 for being the best IDE currently available…and its free (I know I’ve already told you it’s free, but it’s such an amazing program for free that it just needed repeating again).