• Lists

  1. HTML
  2. CSS

Lists are an important part of CSS, they are used to primarily make navbars. I’ll cover some basics with you and how to set up your list. In my NEXT tutorial, I’ll show you how to make VERTICAL navbars. I know, I know, you’re asking, “Why are you splitting it up?” Well, mostly because I’ll have to cover vertical and horizontal navigation separately. There are tips and tricks to both, and although some apply to both, many do not. I’m starting out with lists all alone because it’s easier that way. When you need to review an item in CSS, you can switch between the different lessons and it won’t be all jumbled up.  I’ve found that numerous tutorials online do not explain this area thoroughly enough so I hope it will help you out.

• Lists (HTML)

Lists are important in PHP, and especially to navbars so I plan to spend some time discussing the HTML as well. There are two basic types of lists: an ordered list that starts with the tag <ol> and an unordered list <ul>. The idea is that you enclose a list in these tags and then write out each item with the tags <li> surrounding them. Here is what it should look like:

<ul>

<li>first item</li>

<li>second item</li>

</ul>

• first item
• second item

Substitute <ol> for <ul> and you’ll get a numbered list:

1. first item
2. second item

There are also definition lists but you won’t need to know these to create navbars, at least not with me, but here is how they work. You start out with a <dl> tag to tell the browser you’re making a definition list. Then you list a definition term <dt> followed by the defintion description <dd> like this:

<dl>

<dt>cow</dt>

<dd>an animal</dd>

<dt>dog</dt>

<dd>another animal</dd>

</dl>

cow

an animal

dog

another animal

One more thing, you can embed multiple lists by starting another list inside a list. Let me show you:

<ul>

<li>first item

<ul>

<li>item a</li>

<li>item b</li>

</ul>

</li>

<li>second item</li>

</ul>

• first item
  • item a
  • item b
• second item

And that’s it for the HTML part. Simple, huh? Well remember it. All you need to really remember is how to start an unordered list with <ul> and that each item in the list has to be enclosed within the <li> tag.

• Lists (CSS)

The above was just to make sure you know how to do all of that basic stuff. Let’s move onto the basic CSS when it comes to lists. Now, you may wonder, what basics? Well, to create a navbar, you need to know everything from the previous lessons, especially all that stuff about borders and padding. There are SOME properties only inherent to lists, and that’s what I’ll deal with here.

Let’s start with the unordered list. You see those bullet points on the left of the item? Let’s change them to something else:

ul.circle {list-style-type: circle}

• circle

ul.square {list-style-type: square}

• square

ul.disc {list-style-type: disc}

• disc

ul.none {list-style-type: none}

• none

For the ordered list, you can use the same as above except in the CSS you’d change “ul” to “ol”. You can also use the following:

ol.armenian {list-style-type: armenian}

1. armenian

ol.decimal {list-style-type: decimal}

1. decimal

ol.leadingzero {list-style-type: decimal-leading-zero}

1. decimal-leading-zero

ol.georgian {list-style-type: georgian}

1. georgian

ol.loweralpha {list-style-type: lower-alpha}

1. lower-alpha

ol.upperalpha {list-style-type: upper-alpha}

1. upper-alpha

ol.lowergreek {list-style-type: lower-greek}

1. lower-greek

ol.lowerlatin {list-style-type: lower-latin}

1. lower-latin

ol.upperlatin {list-style-type: upper-latin}

1. upper-latin

ol.lowerroman {list-style-type: lower-roman}

1. lower-roman

ol.upperroman {list-style-type: upper-roman}

1. upper-roman

List-style-position is the next property,  its values are “inside” and “outside”. The default is set to “outside” and it determines the indent of the list. If you want the indent to be counted from the beginning of the text, it’s “outside”. If you want the text to start from the bulletpoint, use inside.

<ul style=”list-style-position: inside”>

• text

<ul style=”list-style-position: outside”>

• text

Let’s say you want an image to replace the bulletpoint, you set up a special “arrow” or whatever to replace it. You can do that using list-style-image and the following formula:

ul { list-style-image: url(‘image.png’) }

Replace image.png with the right address. Unfortunately, this style is not supported by all browsers so I’ll use a little trick mentioned at W3Schools:

ul
{
list-style-type:none;
padding:0px;
margin:0px;
}
li
{
background-image:url(‘arrow.png’);
background-repeat:no-repeat;
background-position:0px 5px;
padding-left:14px;
}

All you do there is remove the lis-style-type and added a background image to the <li> tag that will be used as the bullet point. Finally, let’s look at the shorthand:

ul {

list-style: none outside url(arrow.png);

}

The order of properties is: type, position, image.

That’s it for lists! Yeah, nothing exciting, I know but it’s essential to know these things before moving on to navigation bars.

Here’s what we’ll be dealing with in my next tutorial by putting all the previous tutorial information together:

NAvBar picture

Click on the picture and it’ll take you to an example vertical navbar

Related posts:

1. CSS Vertical Navigation
2. CSS: Lesson 1
3. CSS: Lesson 2 Fonts, Padding, and Border
4. CSS3 Lesson 3: Background Information is Essential
5. CSS Lesson 6: Intro to Divs