Lists
You can easily make bulleted or numbered lists in the Text List module. Too easy!
But if you want more control and more of a say on how the information is presented you'll need to learn to use three HTML tags.
Lets say you want to display a list in the middle of a slab of information and then continue writing without having to add another Text/Write Module (and feel obliged to have a new heading) you can.
On top of that you can tweak the look of the bullets. Or indeed get very clever with the way you order lists (alphabet points or even roman numerals in addition to numbering) and you can stop and start the numbering sequence.
By the end of this how to lens tutorial you'll be a List Master!
Table of Contents
- Unordered and Ordered Lists
- Default Bullet List
- Bulleted List with Circle
- Bulleted List with Square
- Ordered Lists
- Different types of numbers
- Changing the start-point
- Images as Bullets
- Animated Bullets
- Hyperlinks
- Increasing the Margin
- Embedded Bullet Lists
- Embedded Ordered Lists
- How'd you go?
- Other Lenses in the How To Squidoo series...
Unordered and Ordered Lists
Unordered is of course, not ordered. If there is no reason to have a list in sequential numbers then you could get by with an unordered list. You could run off a list of features, or benefits, or whatever you thinik would be best presented in a list in point form rather than having to incorporate the same information in a conversational type manner.
Unordered lists use bullet points.
The Code
ul = Unordered List
ol = Ordered List
li = List point
The <li> is used with each line of your list. The <ul> or <ol> is surrounds (nests) the entire list of <li>. This tells the web browser, "hey, we've got an Ordered/Unordered List on the menu!".
Default Bullet List
- First item
- Second item
- Third item
The Code...
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
Just so you know, the default shape is called a Disc...
<ul type="disc">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
Bulleted List with Circle
- First item
- Second item
- Third item
The Code...
<ul type="circle">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
Bulleted List with Square
- First item
- Second item
- Third item
The Code...
<ul type="square">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
Ordered Lists
- First item
- Second item
- Third item
The Code...
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
Different types of numbers
<ol type="A"> Starts a numbered list, using capital letters.
- First item
- Second item
- Third item
<ol type="a"> Starts a numbered list, using small letters.
- First item
- Second item
- Third item
<ol type="I"> Starts a numbered list, using capital roman numbers.
- First item
- Second item
- Third item
<ol type="i"> Starts a numbered list, using small roman numbers.
- First item
- Second item
- Third item
Changing the start-point
You can stop and restart your numbered list...
<ol> Starts a numbered list, using normal numbers.
- First item
- Second item
- Third item
...we take a break and then continue...
<ol start="4"> The startpoint is added to pick up from where you previously left off:
- Fourth item
- Fifth item
- Sixth item
The same can be done with the letter and roman numeral ordered lists. But you have to be sure to slip in the right type and also use normal numbers for the start element.
<ol type="i"> Starts our roman numeral numbered list.
- First item
- Second item
- Third item
<ol type="i" start="4"> and off we go:
- Fourth item
- Fifth item
- Sixth item
Images as Bullets
- Item one
- Item two
- Item three
You need to have your image uploaded to some webspace. And the smaller and more compact you make the graphical icon the better. Make sure you use the <ul> (Unordered List) and not the <ol> (Ordered List).
This can either be done like this...
<ul style="list-style-image: url(http://img.squidoo.com/icon-view.gif);">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>
Or like this...
<ul>
<li style="list-style-image: url(http://img.squidoo.com/icon-view.gif);">Item one</li>
<li style="list-style-image: url(http://img.squidoo.com/icon-view.gif);">Item two</li>
<li style="list-style-image: url(http://img.squidoo.com/icon-view.gif);">Item three</li>
</ul>
I'm outlining both ways because I'll soon show some code where you can do a few interesting tricks. While the former is less messy and easier, the latter can be used to feature different graphics for each line.
I don't recommend going crazy with graphics but here are some examples of how they can be used effectively. Replace the image URL with your own images (be sure to resize them smaller than 16 pixels in height)...
- Cross
- Tick
Code...
<ul>
<li style="list-style-image: url(http://img402.imageshack.us/img402/4650/01noei7.gif);">Cross</li>
<li style="list-style-image: url(http://img524.imageshack.us/img524/5798/01yesbq3.gif);">Tick</li>
</ul>
- Cross
- Tick
Code...
<ul>
<li style="list-style-image: url(http://img253.imageshack.us/img253/673/02nolh8.gif);">Cross</li>
<li style="list-style-image: url(http://img253.imageshack.us/img253/149/02yespw9.gif);">Tick</li>
</ul>
- Cross
- Tick
Code...
<ul>
<li style="list-style-image: url(http://img201.imageshack.us/img201/6590/05nozw4.gif);">Cross</li>
<li style="list-style-image: url(http://img108.imageshack.us/img108/7391/05yesvi0.gif);">Tick</li>
</ul>
- Cross
- Tick
Code...
<ul>
<li style="list-style-image: url(http://img155.imageshack.us/img155/624/03novh9.gif);">Cross</li>
<li style="list-style-image: url(http://img155.imageshack.us/img155/9935/03yesgq0.gif);">Tick</li>
</ul>
- Cross
- Tick
Code...
<ul>
<li style="list-style-image: url(http://img155.imageshack.us/img155/3755/04noic7.gif);">Cross</li>
<li style="list-style-image: url(http://img253.imageshack.us/img253/7789/04yestv4.gif);">Tick</li>
</ul>
Animated Bullets
- Item one
- Item two
- Item three
As well as the code.
Hyperlinks
<li><a href="#">Item one</a></li>
Change # to the URL of your choice (be sure to have the http:// at the start).
Increasing the Margin
<ul style="margin-left: 50px;">
<li type=circle>First item</li>
<li type=circle>Second item</li>
<li type=circle>Third item</li>
</ul>
You can slip style="margin-left: 50px;" into any UL or OL tag. Change the number of pixels to suit.
Embedded Bullet Lists
- First item
- First item of embedded list
- Second item of embedded list
- Third item of embedded list
- Second item
- Third item
The Code...
<ul>
<li>First item</li>
<ul>
<li>First item of embedded list</li>
<li>Second item of embedded list</li>
<li>Third item of embedded list</li>
</ul>
<li>Second item</li>
<li>Third item</li>
</ul>
You will have noticed that the bullet type changes by default. This can be changed by implementing a different type element as outlined in the aforementioned lessons.
Embedded Ordered Lists
- First item
- First item of first embedded list
- Second item of first embedded list
- Third item of first embedded list
- Second item
- First item of second embedded list
- Second item of second embedded list
- Third item
The Code...
<ol>
<li>First item</li>
<ol type="i">
<li>First item of first embedded list</li>
<li>Second item of first embedded list</li>
<li>Third item of first embedded list</li>
</ol>
<li>Second item</li>
<ol type="i">
<li>First item of second embedded list</li>
<li>Second item of second embedded list</li>
</ol>
<li>Third item</li>
</ol>
How'd you go?
Leave any questions or feedback or here...
|
thrivingmom
Another amazing lens. I refer to your basic html and advanced html lenses over and over every time I make a lens. I gave you 5* yet again for another well done lens. Thank you for sharing all of this information. Posted July 24, 2008 |
|
Michaud68
Thanks for all the help this lens has given me 5*'s Posted June 25, 2008 |
|
michaelgibbons
waiting for the sweet animated bullets! hurry Posted June 19, 2008 |
|
EricaBlonde
Just the info I was looking for! Thanks! Posted June 05, 2008 |
|
FengShuiStyle
Woweee! Finally! Lists that work! Yeeeeehaaaaa! Bless you. Posted May 25, 2008 |
Other Lenses in the How To Squidoo series...
-
Squidoo Modules
-
This lens demonstrates a selection of some of the most used and useful Squidoo Modules. You'll see them in their natural environment, with content or product included. Accompanying each is a description of what the module does. To start with, this is...
-
Basic HTML for Squidoo
-
You can use basic HTML in a few of the lens modules. Mostly used to create hyperlinks (they are the "live links" to other sites). Though there are also other uses for HTML. If you find yourself in need of quick tutorial on how to do it, her...
-
HTML Tips for Color
-
Color can be applied via HTML tags to fonts, borders and backgrounds. squidoo.com/basichtml and squidoo.com/advancedhtml show how to implement these colors. This lens however isn't going to show how the code is applied, but is a repository for the...
-
Advanced HTML for Squidoo
-
The techniques shown here aren't much more advanced then what's in the Basic HTML tutorial. The code being used isn't any more special. But the results and presentation can appear to be more sophisticated. Hence it being the Advanced HTML tutorial. F...
