[TUT] Making lists useful

[Svip]

Making lists useful

 

Some people have different ideas of how to create a menu, or any sort of data there just keep repeating down the line.

 

It's here lists come in, mainly known as <ul> ( unordered list ), but there is also <ol> ( ordered list ), but since we don't care about numbers, we us <ul>, each item has the tag <li> for "list item".

 

Let's write a list that is a menu we want to use.

 

HTML:

 

<ul><li>Item 1.</li><li>Item 2.</li><li>Item 3.</li><li>Item 4.</li></ul>

 

Click to view.

 

Okay. This doesn't look like much, but let's get into the CSS. First we want to remove those annoying circles, and remove the padding.

 

CSS:

 

ul {list-style-type: none;padding: 0;}

 

Click to view.

 

Okay. Let's make these items a bit more prettier. First lets add some borders on them.

 

CSS:

 

li {border:1px solid gray;}

 

Click to view.

 

Oh jeez, those lists became a little too long. So we are doomed to set a width of it. I think 30% is good number, you can use anything you want, in fact pixels instead of %.

 

CSS:

 

li {width: 30%;...}

 

Click to view.

 

Great, now let's add a background colour and some text colour to each of the list items.

 

CSS:

 

li {background-color: #ff3535;color: #0a3e6f;...}

 

Click to view.

 

Oh yeah, I didn't say this was suppose to be pretty.

 

Anyways, how about we add a background to left of each item?

 

CSS:

 

ul {width: 30%;background-color: #256db0;list-style-type: none;padding: 0 0 0 10%;}

 

Click to view.

 

Woops, those items got a bit small. Better fix that by removing the width of the list items.

 

Click to view.

 

Okay, anyways. Now this might seem boring enough, but what can you really use list tags for?

 

Let me show you. First we strip down our current CSS code, so we end up with;

 

CSS:

 

ul {list-style-type: none;padding: 0;}li {border:1px solid gray;}

 

 

Okay, we have seen this before, now to make this cool, we have to add some id tags to our list, so our list in HTML will look like this:

 

HTML:

 

<li id="left">Item 1.</li><li id="right">Item 2.</li><li id="left">Item 3.</li><li id="right">Item 4.</li>

 

 

Good, good. And first we start by letting the "left" items float to the left.

 

CSS:

 

li#left {float:left;}

 

Click to view.

 

Wow? Yeah. Okay, in order to make this work, we have to give the left items a width of 50% to give the same amount of space.

 

CSS:

 

li#left {width:50%;float:left;}

 

Click to view.

 

Okay, now let's say we are going to have a list of links, and they have to displayed on each side of the list ( as it looks like in the link ).

 

First we have to make the text of the right items be standing to the right.

 

CSS:

 

id#right {text-align:right;}

 

 

Then we have to add some links to our HTML code so we can see the sense.

 

HTML:

 

<li id="left"><a href="#">Item 1.</a></li><li id="right"><a href="#">Item 2.</a></li><li id="left"><a href="#">Item 3.</a></li><li id="right"><a href="#">Item 4.</a></li>

 

Click to view.

 

Uuuh, those links look ugly. We better fix that.

 

CSS:

 

li a:link, li a:visited {color: #bda176;text-decoration: none;}li a:hover, li a:active {text-decoration: underline;}

 

Click to view.

 

That's more like it. But to make it work even better, it would be cool if you could just hover within the borders and the link would be ready to press, right?

 

CSS:

 

li a:link, li a:visited {width: 100%;display: block;...}

 

Click to view.

 

Good, now we can make this look pretty good if we added a "hover" background for the links.

 

CSS:

 

li a:hover, li a:active {background-color: #f9e3bf;...}

 

Click to view.

 

Yup, that looks great. Lastly I will just add/remove some CSS to make it look cooler.

 

CSS:

Add:

 

body {background-color: #ffdfac;}ul {width: 30%;border: 1px solid #bda176;...}

 

 

Remove:

 

li {border: 1px solid gray;}

 

Click to view.

 

Now you might be wondering, what would happen if I added only one more list item? Not much but this;

 

Click to view.

 

That's why I would suggest you not to use borders on the <ul> tags, and rather on the item surrending the <ul> tag. But you get the idea.

 

I said I would make it. ¬¬

[BenMillard]

You've made another example of "good" HTML which doesn't work correctly in different browsers.

[Hynes]

You've made another example of "good" HTML which doesn't work correctly in different browsers.

Cerbera, why would it be written to perform incorrectly? If you know it doesn't work correctly, get a browser in which it DOES. Here, Firefox.

 

Nice tutorials, Svip.

[Tsuroki]

You've made another example of "good" HTML which doesn't work correctly in different browsers.

Cerbera, why would it be written to perform incorrectly? If you know it doesn't work correctly, get a browser in which it DOES. Here, Firefox.

 

Nice tutorials, Svip.

As much as I love Firefox, I hate it when I find people posting stuff like that. It's almost as annoying as Linux zealotism.

 

IE is still a force to be reckoned with. Proper development and design means that you have to take this into account, not ignore the software and just tell people to "get something better".

[BenMillard]

 

You've made another example of "good" HTML which doesn't work correctly in different browsers.

Cerbera, why would it be written to perform incorrectly? If you know it doesn't work correctly, get a browser in which it DOES. Here, Firefox.

 

Nice tutorials, Svip.

FireFox isn't the most standards-compliant browser on the planet, Opera is. Eeven more so than Amaya and, guess what? The example doesn't work correctly in it! The fault isn't with the browsers, it's with the code. Get a clue before you start telling people what is "correct" and what isn't. Seriously. If people actually started believing you that would be a real blow to WD&P because you have no idea what you are talking about.

 

It's pretty funny that you think that IE and FireFox are the only browsers in existance. When I said it doesn't work correctly in other browsers, it was because I tested it in a whole load of other browsers There are NO browsers which have 100% compliance with standards (especially not with CSS), so telling people to get a different browser will just replace the current bugs they had with a bunch of other bugs. It wouldn't solve much. Therefore, exactly as Tsuroki says, web developers must take account of the devices which actually exist when designing web pages to be as interoperable as possible.

 

Just like we take into account the habits people already have when designing interfaces instead telling people to learn the way that we think is the "correct" way. Technology should adapt to the user, not the other way around.

[Svip]

Errm... the idea the Opera is more standard than Firefox is not entirely true. A lot of CSS features are not in Opera, while they are in Firefox.

 

I once read a CSS site where they had a page where you could see all their features they made and which browsers did or did not support them. It was without doubt IE that was the worst, but Opera was not the best in their examples, Firefox lacked very few pages, I counted only one myself.

 

Though their site was not large, it did tell me that Opera perhaps wasn't the most standard browser after all.

[Luke]

Now I'm no HTML expert here or anything, but in all honesty, if you're going to make a tutorial I think you should be aiming for perfection. I thought IDs were only supposed to be used the once, unlike you who's used "left" and "right" at least twice.

[Svip]

Now I'm no HTML expert here or anything, but in all honesty, if you're going to make a tutorial I think you should be aiming for perfection. I thought IDs were only supposed to be used the once, unlike you who's used "left" and "right" at least twice.

sh*t you're right.

 

It should have been classes. :<

[Tsuroki]

Now I'm no HTML expert here or anything, but in all honesty, if you're going to make a tutorial I think you should be aiming for perfection. I thought IDs were only supposed to be used the once, unlike you who's used "left" and "right" at least twice. 

sh*t you're right.

 

It should have been classes. :<

Snap.