HTML / CSS – Using Lists

So, you’ve reached the third part of these lessons I see. Well done, you’re doing well
You’ve still got quite a bit to learn on XHTML & CSS. Mainly, and it’s important, you will learn how to make the design of your web site in this part.

In part 3 we’ll learn new things in XHTML and in CSS. The plan of the lesson can be summarised like so :

XHTMLCSSXHTML & CSS – The combined power of both languages

Ah, did you notice what I did there ? I used a list to write down the different parts, and that’s what I’ll teach you in this chapter !

It’s not very hard to understand, and it’s a nice introduction chapter to part 3 which will get a bit more complicated as we go along.
And yes, for those who are asking themselves, this is the most difficult part. But there’s no need to worry, if you pay good attention every thing should be fine

In this chapter we’ll do the following : firstly we’ll see how to set up lists in XHTML, and after that we’ll see how to decorate them with CSS. To start with, you should know that there are 3 types of lists :

Ordered listsUnordered listsDefinition lists (rarer)

We will see how to create each one of these lists. It’s easy, but still pay attention as you will need lists in the following chapters (in fact you need lists in most web sites…). In effect, differently to what you may think about lists, they are used a lot, they will be used mainly to create the menu of your site !

An unordered list looks like this :

StrawberriesRaspberriesCherries

This is a system that allows us to make a list of elements, without any order (no first or last). Creating an unordered list is very easy. You just write the tag

which is closed later with

Start by writing this :

Code : HTML

And now, here’s what we’re going to do : we’re going to write each of the elements of our list between the tags

. All these tags have to be between

and

. You’ll understand straight away with this example :

Code : HTML

• Strawberries


• Raspberries


• Cherries

is a list

is a new element in the list

Of course, you can put as many elements as you want in a list, you aren’t limited to 3

And that’s it, you know how to make an unordered list !
It wasn’t too hard was it ?

If you need to make a complicated list, you should know that you can make a list inside a list. If you want to do that open a second

inside a

If you close the tags in the right order there shouldn’t be any problems

You’ve already found out that making unordered lists is really easy…well, now you’re going to find out how hard it is to make a web site

To make an ordered list, we’re not going to mess about. We only need to change the

tags, which now become

(ul for unordered list, ol for ordered list).
Inside nothing changes, we still use

However, this time the order of the elements is important. The 1st

is element 1, the 2nd

is element 2 etc…

As it is rather instinctive, I’ll leave you to admire the simplicity of this example :

Code : HTML

1. I get up


2. I eat and drink


3. I go back to sleep

Compared to the last example, all we had to change was the

tag.




Here however, it’s different to the previous examples. It’s a bit more difficult (but truly just a bit )
The global idea is the same. We indicate the beginning and end of the list with tags. This time it isn’t


or

, but as you may have guessed


(abbreviation of Definition List).





Let’s start by writing this :




Code : HTML







Right, now the small difference is that we don’t use


to indicate the elements of the list.
In effect, in a definition list, there are 2 different types of elements :


The wordsAnd their definitions


The words go between


, and the definitions go between








What you need to understand is that we must first put the word (


), and then its definition (


). If you want to add a second definition, you need to restart : a dt, then a dd.





Have a good look at this example :




Code : HTML







Cat




Animal with 4 legs that goes "Miaow !"




Dog




Animal with 4 legs that goes "Woof Woof !"




Maths Teacher




Alien from another planet that teaches something that nobody understands




As you can see, when you test the code, the definitions are slightly to the right of the words. At the moment it doesn’t look very nice, but everyone knows that with a bit of CSS magic we can make the words become bold and blue, and the definitions flashing red. If you can’t do that by yourself you might have gone through part 2 quickly




So, elements in a definition list go in pairs. Once you have understood that you need to write first the word, then the definition, well, you know how to use definition lists !




What would you say to spicing it all up with some CSS ? It should be even better after




No, don’t worry, I’m not going to teach you how to make the definitions flash on a red background You already know how to do that :




Code : CSS

dd { background-color: red; /* . . . */}


Anyhow, that’s already been seen several times, and now I’ve just put you on the right path
What we are now going to see are CSS properties specialised in the presentation of lists. There are 3 of them. We’ll see how each of them works.




The first property I’m going to show you is easy to use. It allows you to say if you want the elements content to wrap itself around the bullet point. This property is called list-style-position, and can take 2 values :

inside : the element wraps aroundoutside : the element doesn’t wrap around (by default)


This diagram will show you the difference between inside and outside :







Here’s the CSS to allow you to test the positions :




Code : CSS

.no-wrap { list-style-position: outside;}.wrap { list-style-position: inside;}


and an XHTML code with a list :




Code : HTML




Here is a list that doesn't wrap (by default) :






• Bullet
  Point List


• Line 1
  Line 2


• You can see that
  the text stays aligned




Here is a list that wraps :






• Bullet
  Point List


• Line 1
  Line 2


• You can see that
  the text is no longer aligned




So that you can see the difference you’ll need at least 2 lines of text in the elements (which is why I’ve put a
).




A lot more interesting, the property list-style-type lets you change the appearance of the bullet point. In effect, the point doesn’t need to be a black circle, just as ordered lists don’t need to be numbered (you can also use a, b, c, d…).




The property list-style-type can take several values. Some of them only concern unordered lists, the others concern ordered lists :

For unordered lists (


) : disc : a black disc (by default)circle : an empty circlesquare : a squarenone : nothing will be shownFor ordered lists (

) there’s a lot of choice : decimal : numbers 1, 2, 3, 4, 5… (by default)decimal-leading-zero : numbers starting with 0 (01, 02, 03, 04, 05…) Doesn’t work on older versions of Internet Explorerupper-roman : latin notation in capitals (I, II, III, IV, V …)lower-roman : latin notation in small letters (i, ii, iii, iv, v …)upper-alpha : alphabetic notation in capitals (A, B, C, D, E …)lower-alpha : alphabetic notation in small letters (a, b, c, d, e …)lower-greek : greek notation Doesn’t work in IE


There also exist other notations for ordered lists, like the armenian notation, georgian, hebrew, japanese etc…however I’ll spare you the trouble (and I don’t think you’ll mind !). What I have given you above should be more than enough




And if we tested some of our modified lists ? Here’s the XHTML code that will let us test (it’s a bit big, but don’t worry, it’s very repetitive )




Code : HTML




A few unordered lists




Here's an unordered list without any modifications (= disc) :





• Bullet


• Point


• List



With circle :





• Bullet


• Point


• List



With square :





• Bullet


• Point


• List



With nothing (no points) :





• Bullet


• Point


• List



A few ordered lists




Here's an ordered list without any modifications (= decimal) :





1. one


2. two


3. three


4. four



with Decimal Leading Zero (Doesn't work on IE) :





1. one


2. two


3. three


4. four



with lower alpha :





1. one


2. two


3. three


4. four



with upper roman :





1. one


2. two


3. three


4. four



with lower greek :





1. one


2. two


3. three


4. four



…and the CSS to go with it :




Code : CSS

/* unordered lists */.circle { list-style-type: disc;}.square { list-style-type: square;}.nothing { list-style-type: none;}/* ordered lists */.leading-zero { list-style-type: decimal-leading-zero;}.small-letters { list-style-type: lower-alpha;}.roman-letters { list-style-type: upper-roman;}.greek-letters { list-style-type: lower-greek;}/* a few added styles for presentation and to help you remember ;o) */h2 { text-indent: 20px; font-family: Arial, Verdana, "Times New Roman", serif;}em { background-color: yellow;}strong { color: red;}


I’ve not put all the styles, but you can try them if you want




If none of these presentations suit your needs why not create your own ? That is exactly what the property list-style-image allows us to do. It lets you use any image instead of a point.




You must give it the value url followed by the address. It works in exactly the same way as background (which if you remember, lets us add a background).




For example, copy the following image then use the example code, you’ll see, it’s a lot nicer






Code : CSS

ul { /*My list will have points in the shape of folders */ list-style-image: url("../images/folder.png");}/* Just to make the presentation better */a { color: blue; text-decoration: none;}a:hover { text-decoration: underline;}


Code : HTML





• Contracts


• Presentations


• Web Sites


• Videos
The format of the image can be any type (PNG, GIF or JPEG).
However, be careful, the image mustn’t be too big or it will be cut. I suggest that you make them about 15×15 pixels.




So we’ve done pretty much everything possible with lists.
I agree that the names of the tags aren’t very clear, but at least they’re short, and there aren’t very many to learn You’ll see that you’ll remember them soon enough