Quantcast
Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
    1. Welcome to GTAForums!

    1. GTANet.com

    1. GTA Online

      1. The Cayo Perico Heist
      2. Find Lobbies & Players
      3. Guides & Strategies
      4. Vehicles
      5. Content Creator
      6. Help & Support
    2. Red Dead Online

      1. Frontier Pursuits
      2. Find Lobbies & Outlaws
      3. Help & Support
    3. Crews

    1. Red Dead Redemption 2

      1. PC
      2. Help & Support
    2. Red Dead Redemption

    1. Grand Theft Auto Series

      1. St. Andrews Cathedral
    2. GTA VI

    3. GTA V

      1. Guides & Strategies
      2. Help & Support
    4. GTA IV

      1. The Lost and Damned
      2. The Ballad of Gay Tony
      3. Guides & Strategies
      4. Help & Support
    5. GTA San Andreas

      1. Guides & Strategies
      2. Help & Support
    6. GTA Vice City

      1. Guides & Strategies
      2. Help & Support
    7. GTA III

      1. Guides & Strategies
      2. Help & Support
    8. Portable Games

      1. GTA Chinatown Wars
      2. GTA Vice City Stories
      3. GTA Liberty City Stories
    9. Top-Down Games

      1. GTA Advance
      2. GTA 2
      3. GTA
    1. GTA Mods

      1. GTA V
      2. GTA IV
      3. GTA III, VC & SA
      4. Tutorials
    2. Red Dead Mods

      1. Documentation
    3. Mod Showroom

      1. Scripts & Plugins
      2. Maps
      3. Total Conversions
      4. Vehicles
      5. Textures
      6. Characters
      7. Tools
      8. Other
      9. Workshop
    4. Featured Mods

      1. Design Your Own Mission
      2. OpenIV
      3. GTA: Underground
      4. GTA: Liberty City
      5. GTA: State of Liberty
    1. Rockstar Games

    2. Rockstar Collectors

    1. Off-Topic

      1. General Chat
      2. Gaming
      3. Technology
      4. Movies & TV
      5. Music
      6. Sports
      7. Vehicles
    2. Expression

      1. Graphics / Visual Arts
      2. GFX Requests & Tutorials
      3. Writers' Discussion
      4. Debates & Discussion
    1. Announcements

      1. GTANet 20th Anniversary
    2. Support

      1. Court House
    3. Suggestions

[TUT] Making lists useful


Recommended Posts

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. tounge.gif

 

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. ¬¬

Link to post
Share on other sites

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

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.

Link to post
Share on other sites
You've made another example of "good" HTML which doesn't work correctly in different browsers. confused.gif

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".

Link to post
Share on other sites

 

You've made another example of "good" HTML which doesn't work correctly in different browsers. confused.gif
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.

Link to post
Share on other sites

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.

Link to post
Share on other sites
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. confused.gif
Link to post
Share on other sites
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. confused.gif

sh*t you're right.

 

It should have been classes. :<

Link to post
Share on other sites
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.  confused.gif

sh*t you're right.

 

It should have been classes. :<

Snap. tounge.gif

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • 1 User Currently Viewing
    0 members, 0 Anonymous, 1 Guest

×
×
  • Create New...

Important Information

By using GTAForums.com, you agree to our Terms of Use and Privacy Policy.