Make a Fancy Table of Contents
Ranked #101 in Squidoo Community, #14,731 overall
Navigation for a Squidoo Lens or Lensography
A clickable Table of Contents helps visitors navigate webpages. A table of contents also shows what's on a single webpage, which helps visitors decide whether your page is worth reading! A great table of contents within the first screen is a powerful way to convert visitors into explorers.
Links: GPS For Your Lens
Horizontal Table of Contents
Adding Pictures
A Great Lensography Tip
Add a Background Texture
Borders, Colors, Fancy Text
Contents in an Inset Box
Frame on One Side
Text on Top of a Picture
Rounded Corners
Introduction Module Quirks
Make a Web 2.0 Widget
PAGE BREAK Navigation
This lens shows how to create effective road maps to help visitors navigate your content: on a single lens, between lenses, or between pages in a page break lens.
Terms of Use: Feel free to cannibalize my code. In return, please link to one my lenses from any of your webpages. If you already have, thank you-- please, help yourself!
Flower art courtesy of Karen's Whimsy
Squidoo's Built-In Lens Navigation Options
No Code Knowledge Needed -- Quick and Easy!
The Table of Contents module (found in the Writing category of the module browser) adds a clickable list of all lens modules.
Pros: It's a complete table of contents.
Cons: It hogs vertical space on longer lenses, and you'd have to cut most of the Introduction to fit it on the first screen.
Click the Table of Contents tab in the Introduction module to activate a mini "Contents at a Glance" that shows just the first six modules and a "More..." toggle.
Pros: With a short introduction, it's on the the first screen, and it doesn't hog vertical space.
Cons: Visitor has to click "More..." to see most of the index.
Both kinds of Table of Contents let you turn off module titles you don't want indexed. Both have problems displaying special characters like © “ ♥ π
The Featured Lenses module, found under "Popular" in the sidebar, shows a rotating selection of any number of lenses.
Pros: It's quick, neat, and requires no code.
Cons: Only shows five lenses at a time in a random order. That's a problem for lenses in a sequence.
The About Me module, found via Browse all modules > All Modules, can display the five "featured" lenses on your profile. There's a "Show all my lenses" link at the bottom.
Pros: Showcases all your lenses, and visitors like to know something about page authors.
Cons: Can't choose which lenses to send them to. Another vertical space hog.
If you need more control that these built-in tools give you, you'll need to create your own Table of Contents using HTML and CSS.
Links: GPS For Your Lens
The Building Blocks of a Table of Contents
You know how to make a link to a web page in HTML:
<a href="urlgoeshere">Click here</a> makes Click here.
You can also make links pointing to a specific part of a webpage, using a hash mark plus a label: <a href="#squid">Squid News</a>. That works if somebody's planted a matching hidden label: <a name="squid"></a>
So how do we find those labels on a Squidoo lens? (It won't let us make our own.)
You could "View Source" and search for "a name=", but that's tedious.
You could add a traditional Table of Contents module and copy the links from it. To get the URL of a clickable link, right-click it (option-click on Mac), and choose "Copy Link Location" from the popup menu. Try this one to see how that works.
If you use Firefox, there's a free tool that will save you having to add a clunky Table of Contents, build a better one, and then erase it. Get SquidUtil's Squidoo Enhanced Add-on. Along with other goodies, it adds "[#link]" to the top of every module in your workshop. Right-click it to get the module's URL!SquidUtils gives the #link in the format: http://www.squidoo.com/lensname#module1234 That works fine, and if some twit steals your content, it's a sneaky way of linking back to your lens. But some web browsers don't notice it's the URL of the page they're looking at, and reload the page before jumping down to "module1234". So I delete everything before the # sign. Trimming also makes my code easier to read.
There's one more thing we need before we start coding our fancy table of contents.
Make a "Back to Top" Link
Add It to the End of Modules
An elevator that goes down but not up isn't very useful! Your readers need a quick way back up to the Table of Contents.
This HTML code links back to the top of a page:
<a href="#">Going Up!</a>
But here's something sneaky:
Going MOST of the way up!
<a href="#content-intro">[Link to top of the Introduction Module.]</a>
Sorry, Squidoo. I want readers to check out my stuff, not the whiz-bang header.
Update: Ack. Squidoo has disabled my sneaky trick.
Use the # sign; that still works!
A Basic Table of Contents
The Unordered (or Ordered) List
An HTML "unordered list" makes a neat Table of Contents:HTML Code for List:
<ul><li><a href="lens1">Part I: Squids.</a>
</li><li><a href="lens2">Part II: Octopi.</a>
</li><li><a href="lens3">Part III: Kraken.</a></li></ul>
<ul> means "unordered list" and <li> means "list item."
Change <ul> to <ol> to get an "ordered list" labeled 1, 2, 3, etc.
Change round bullets by tweaking <li> with the CSS code list-style-type. For example,
<li style="list-style-type: square;"> turns a bullet into a square.
Here's a list of all possible list-style-types.
Make a Horizontal Table of Contents
Also Known As a Navigation Bar
Sometimes you need a navigation bar: a horizontal strip with all the links in a row. It's handy with a long link list that would otherwise hog a lot of vertical space.
How to Align Images | How to Upload Images | Where to Get Free Web Graphics
Squidoo Clip Art | How to Make Glossy Web 2.0 Buttons | CSS-Codes Tutorial
HTML Code:
<a href="link1">First Link</a> | <a href="link2">Second Link</a>
...and so on.
To center the whole thing, put <p align=center>...</p> around it.
For dividers, I use | pipe (shift-\) double colon (::), or special characters like ◊ (◊)
Use words, not just graphics, for links to other lenses. Links help search engines learn about your page.
Why do you keep going on about "Vertical space hogs"?!
The less vertical space used by navigation or decorative elements, the faster visitors reach your content.
But a Wall o' Text is hard to read!
Use navigation and graphics to divide content and make it easy to follow, like street signs and road markings.
This sticky is a vertical space hog!
Add Pictures to Your Table of Contents
Graphics Give Your Page Pop
For a sequence of lenses, you need to direct readers from one lens to the next. Here's an example from my multi-lens travel diary:
"...Now it's time to head for the Acropolis, the Parthenon, and the museums of Athens in Ancient Greece Odyssey: Day Three!"
Complete Index of Ancient Greece Odyssey:
- Part One: Arrival
- Part Two: Acropolis and Athens Museums
- Part Three: Eleusis, Demeter and Persephone
- Part Four: Delphi and the Oracle of Apollo
- Part Five: Mycenae, Tiryns, Nauplion
- Ancient Greece Odyssey Updates Blog
Code For This Example:
<p align=center> centers text and/or images:
<p align="center"><img src="http://www.istad.org/squid/preview.jpg" alt="Picture of Greece Diary" /></p>
To make side-by-side graphics and text, Use style="float: left;" or right in the <img> tag. That anchors the picture on one side, and the stuff you write after it fills in next to it. Margins add a buffer of space around the image.
<img src="http://www.istad.org/squidgraphics/youarehere.jpg" style="float: left; margin-left: 60px; margin-right: 40px;" /><ul style="line-height: 200%;"><li><a href="http://www.squidoo.com/odyssey">Part One: Arrival</a></li>
[rest of the list]</ul>
Also note line-height in the <ul> tag. That adds extra vertical space between lines of text to help make the list match the height of the picture.
A Great Lensography Tip
Remember the Featured Lenses module I mentioned back at the start? It has two limitations: it lists lenses in a random order, and it only shows five at a time. This easy ten-step tutorial solves both problems.
Add a Background Image
Text Over Textures Looks Snappy
Part I: The Attack of the Colossal Squids.
Part II: The Great Galloping Giant Clams of Galapagos.
Part III: An Ornery Octopus Ate My Homework.
Code For This Example:
<p style="background:url(http://www.istad.org/squidoo/align-images/background-image.jpg); padding: 20px; font-weight: bold;"><a href="#link1">Part I: The Attack of the Colossal Squids.</a>
[...etc, etc...]</p>
style="background:url(URLofanImage.jpg);" inside a <p> or any HTML tag sets a background image.
This also works: style="background-image: url(URLofanImage.jpg);"
By default, if the paragraph (or other "containing box") is bigger than the background image, the image will repeat until it fills the space. If the background image is bigger than the paragraph, it will stop at the edge of the paragraph.
When you use a background-image, background-color, or border, you'll probably want padding to keep the text inside from mashing against the sides of the box.
font-weight: bold; is optional. It helped the text stand out. Pay attention to text/background contrast.
Is My Code Starting to Look Intimidating?
Don't Panic!
This pair of tutorials on the basics may help you!
Add Borders, Colors and Fancy Text
CSS Adds Visual Effects to Your Web Page Building Blocks
Political Lenses ♦ Travel Lenses ♦ Biography Lenses ♦ Cool Science Lenses
Paragraphs, images and lists are treated as boxes. Set the top left corner with a start-tag (for example, <p>). The box expands as you add stuff (text and/or images) until you close the bottom right corner with </p>.
Add colors, borders and text formatting to boxes by putting style="..." inside the start-tag, then listing CSS codes, separated by semicolons, between the quotes.
Code For This Example:
<p style="border: 2px #999 solid; background-color: #046381; color: lightblue; padding: 5px 20px; text-align: center; font-family: Arial; font-weight: bold;"><a href="url1" style="color: white;">Political Lenses</a> ♦ <a href="url2" style="color: white;">Travel Lenses</a> ♦ <a href="url3" style="color: white;">Biography Lenses</a> ♦ <a href="url1" style="color: white;">Cool Science Lenses</a></p>
Sorry about the rainbow! Instead of trying to break this down with long explanations, I've linked each CSS code to the part of my CSS tutorial lens explaining how to use that code. The tutorial will open in a new tab or window.
The one thing to note is that when you set the color of text in a paragraph, it has no effect on link color. Links on Squidoo pages are blue unless you override that on a case by case basis. So I had to add style="color: white;" inside each link's tag to make it stand out from the background.
Table of Contents in an Inset Box
Make a Navigation Widget
Chapter 1: Pearl
Chapter 2: Ammonite
Chapter 3: Undertow
Chapter 4: Exposure
Chapter 5: Driftwood
To get an inset box, you need two CSS codes: float (with the value left or right) to anchor the box against the left or right margin, and width. Define the "floating" box, finish it with a close-tag, and the stuff you add after that will start side by side with it, even with the top of the floating box, and fill in around it.
Here's an example. I didn't include the link-code this time, but you know what to do.
NOTE: See how ramkitten used this floating menu in the description field of a Table of Contents module to jump between large sections of a long lens and subsections within each section!
Code For This Example:
<p style="float: right; width: 9.7em; margin-left: 15px; margin-bottom: 5px; background-color: #f7f7f7; padding: .25em 1em; border: 1px dotted #666; font-size: 10pt; font-family: Times New Roman, Times; font-style: italic;">Chapter 1: Pearl
Chapter 2: Ammonite
Chapter 3: Undertow
Chapter 4: Exposure
Chapter 5: Driftwood</p>
The essential codes you must have for an inset box are float: right; (or left) and width, which I measured with em (see below on measurements.)
You usually want padding to keep the text inside the box from being squashed against the edges of the box, and margin outside the box putting space betwen it and what's next to it. Put margin on the opposite side from the direction of the float.
A Note About Measurements
When you're trying to fit text to a graphic, you usually want to measure in pixels (px).
When you're primarily working with text, and you need borders to hug blocks of text closely, use em, the width of the letter m.
That makes sure your text doesn't spill out of its bounding box.
Add a Border to the Left of the Table of Contents
It's Time For More Background-Image Magic!
There's several ways to fine-tune background images. This example uses repeat-y, which means "repeat vertically" -- not horizontally.
Use padding-left to push the text away from the lethand margin, so it won't overlap the picture. The padding should be the width of the graphic plus a little extra (10 pixels for text, 20 pixels for lists to leave room for bullets works well).
Also try this trick with repeat-x to make a horizontal stripe at the top of a paragraph. In that case, use padding-top to move the text down, or use the stripe as a dramatic highlight for the first line!
<ul style="background: url(http://www.istad.org/squidoo/toc/octopi.jpg) repeat-y; padding-left: 110px;"><li><a href="#link">A link.</a>
</li><li><a href="#link">A link.</a>
</li><li><a href="#link">A link.</a>
</li>[etc]</ul>
Vertical Stripe to the Right of a Table of Contents
Great for the Introduction Module
A dramtic title, with a typo.
Another dramatic title.
A pithy statement.
A double entendre.
A really bad pun.
Philosophical thinky thoughts.
Understated sarcasm.
Rhetorical question?
Concluding bon mots.
How do you align a background-image on the right? This would be more useful for the Introduction Module, which already has a graphic on the left.
The key to this trick is top right, which glues the graphic to the upper right corner of the paragraph. Again, repeat-y makes sure the background image only repeats vertically, not horizontally.
Code For This Example:
<p style="background: url(http://www.istad.org/squidoo/graphics/artnouveau.jpg) repeat-y top right; padding-right: 70px; padding-bottom: 0px; font-size: 14px; line-height: 20px; margin-left: 300px; border: teal 2px solid; padding-left: 20px;"><a href="#link">A dramtic title, with a typo.</a>[...etc...]</p>
This time I measured the font-size and line-height in pixels, because I wanted the bottom of the paragraph to be even with the bottom of one of the squares. Otherwise the squares got cut in mid-design like the octopi in the last example.
Text on TOP of a Background Image
...Requires Kung Fu Plus a Tesseract
• A Link
• A Link
• A Link
• A Link
• A Link
• A Link
• A Link
This is tricky. When I added padding to push the text away from the left margin, everything moved over -- including this paragraph! I found that I needed a "box" inside of a "box" -- one floating box with the background painted on it, and another box inside it to manage padding.
Oddly enough, Squidoo balked at my paragraph inside of a paragraph. As far as it was concerned, I was trying to install a tesseract! How about a list inside a paragraph, or vice versa? No dice. Squidoo put one after the other.
Undaunted, I pulled out my favorite CSS Kung Fu trick: take the HTML tag <span> and declare, "You are a BOX!" with the powers of style="display: block;" (On non-Squidoo pages, just use <div>, which defines a box-shaped area. Squidoo won't let us use that tag, because you can break a whole page's layout if you put one </div> too many).
To my surprise, the following code does work in the Introduction module, although it looks stupid next to the Victorian postcard. It needs a pile of paper clips.
Code For This Example:
<p style="background: url(http://www.istad.org/squidoo/toc/notepad.jpg) no-repeat; width: 223px; height:300px; float: left; padding-right: 15px;">
<span style="display: block; padding-left: 70px; padding-top: 60px; font-size: 16px; line-height: 20px;">
• <a href="#link">A Link</a>
• <a href="#link">A Link</a>
• <a href="#link">A Link</a>
• <a href="#link">A Link</a>
[etc, etc]</span></p>
My color coding shows the outer <p> framing the inner <span> box.
You've seen most of these codes already; the only new item is no-repeat to make sure the graphic didn't tile across the page (probably unnecessary), and display: block; to convert <span> into a box.
How to adapt this code:
1. Pick your own background-image and set the height and width in pixels.
2. float: right; or left is optional. If you use it, put some margin on the opposite side.
3. The hard part is guessing the amount of padding needed to scoot the text down and to the right (using padding-top and padding-left) until the text is over the picture. You can load the picture into Photoshop and use the Info palette to measure, but I just eyeball it and adjust as needed.
4. Optionally, you may want to adjust the font-size and line-height. Give your text extra wiggle room around all four sides, since text is not displayed at the same size on all browsers.
Add Rounded Corners to Your Table of Contents
Plus, the "You Are Here" School of Web Navigation
Make rounded corners with -moz-border-radius: [number]px; -webkit-border-radius: [number]px; plus a background and/or border to make the paragraph's edges visible.
The repetition is because web browsers are still working out whose standard to use. Right now some do it one way, some another. IE (even 8) cannot display rounded corners; it makes them square.
On a lens directory, try leaving the link-code OFF the current page:
Aligning Images Tutorial
Table of Contents Tutorial
CSS Codes Tutorial
The Featured Lenses Module
Uploading Images Tutorial
Colors indicate links. The default color shows the current page.
Code For This Example:
<span style="-moz-border-radius: 15px; -webkit-border-radius: 15px; display: block; padding: 0px 5px 15px; border: 5px #4E5051 solid; width: 15em; background-color: white; color: #4E5051; margin-left: 20px; margin-top: 10px;">
<a href="http://www.squidoo.com/graphics-layout">Aligning Images Tutorial</a>
Table of Contents Tutorial
<a href="http://www.squidoo.com/css-codes">CSS Codes Tutorial</a>
[...etc...]</span>
See the Rounded Corners section of my CSS Tutorial for how to set different corners differently.
Linking a Series of Lenses
Since Squidoo's Page Break Module was retired, we can't make multi-page lenses. However, we can make a series of lenses and link them together. How do we make sure our readers can navigate from one lens in the series to the next?
Any of the table of contents on this page is an option, especially the Horizontal Navigation bar.
Or use something REALLY big and bold to lure your readers to the next page. Like, say:
VISIT THE REST OF MY WEBSITE
But Wait... There's More!
Ancient Greece Odyssey Table of Contents:
Er, sorry. Commercial break.
Actually, for search engines, it's better to use text links. However, people like graphics.
So here's what I've been doing for navigation between lenses. I put a strip of navigation buttons and text links at the bottom of the Introduction Module and/or in a Text Module just before the Guestbook (since people often don't look past the guestbook).
Explore My Other Pages on Dollhouse Furniture
There's Lots More to See!
Go to Next Page
or browse the rest of this site:
Code For This Example:
You can probably come up with something fancier for the "Go to next page" part:
<p style="font-size: 25px; line-height: 26px;"><b>Go to <a href="http://www.squidoo.com/next-page-of-lens">Next Page</a></b> <br><i style="font-size: 15px;">or browse the rest of this site:</i></p>
You may want to add a link to "Previous page" as well. But the important thing is the navigation bar with all the buttons.
(Oh, here's an idea -- for two of the buttons, use arrow graphics labeled "next" and "previous", and/or use a graphic that looks like a house with the caption "home.")
Navigation Buttons:
1. Create or find some graphics. The graphics I used here come from MySiteMyWay.com.
2. Find the WIDTH in pixels of each graphic.
3. Start with a wrapper that will define the way the text looks for the whole batch of buttons:
<b style="text-align: center; font-size: 10px; line-height: 10px;">
4. Without skipping a line, create a paragraph for each button:
<p style="width: 64px; float: left; padding-bottom: 0px;"><a href=http://www.squidoo.com/next-page-of-lens" style="text-decoration: none;" title="Kitchen Furniture"><img src="http://www.imagehost.com/kitchen.jpg"><br>Kitchen Furniture</a></p>
Things I had to set:
(a) the WIDTH of the paragraph must match the width of the graphic
(b) the link to the new page (duh). The easiest way to get this is by using Fluff's SquidUtils Workshop Add-on, which enhances the Lens Workshop with the link to each module indicated by "[#link]" above the module (right-click [#link] to copy the URL).
(c) the TITLE is text that pops up when the cursor hovers over the graphic, and
(d) the text below the graphic.
5. WITHOUT SKIPPING A LINE, repeat step 4 for each navigation button.
6. If you have too many for the width of the lens, they'll wrap onto a new row. If you want to start a new row of buttons, add this code inside the style of the <p> tag for the first button in the new row:
clear: left;
That tells it not to allow anything to be to the left of that paragraph, and if there's something there, it starts the paragraph on a new line.
7. When you're ALL DONE with the buttons, CLOSE the "wrapper" with </b>
8. If you add any content after the navigation buttons, you need to make sure it doesn't try to go side-by-side with the buttons. Use this:
<p style="clear: left;">
Adapting to the Introduction Module
The Risk of Coding Around Code You Didn't Write
You may have noticed that <p align=right> doesn't work in the introduction module. Try float: right; instead. To end side-by-side paragraphs or boxes, start a new paragraph with style="clear: both;" to say "don't float anything to the left or right of this."
padding-left won't work either: something about the lens graphic overrides it. Sometimes I have to resort to margin-left: [width of my lens graphic + 15px]; to get my table of contents boxes to fit nicely in the space to the right of the lens photo. That's risky, because the box could hang down past the bottom of the lens photo if someone's browser displays text at a different size.
Keep in mind that on someone else's browser, text may be larger or smaller, and wrap at a different point. Plan your design with "wiggle room" so that it won't look too awful if your paragraphs/lists are a couple lines longer or shorter. Check complex layouts with Browseshots.org and/or Litmusapp.
Putting It All Together: Web 2.0 Widgets
Quilting Webpages with CSS
By overriding text-formatting HTML tags, you can use b, i, and u like the span tag, to define box-shaped areas -- and then nest them!
This widget probably took me about half an hour to code, with another 15-20 minutes for graphics. Go here to see the code.
Happy Holidays! My Seasonal Lenses
Hallowe'enChristmasValentine's Day
Don't try complicated layouts to start with. Practice each technique -- floating boxes, colors and borders, text formatting, rounded corners, background-images, and boxes inside of boxes -- in simple layouts first. Clean and simple Tables of Contents that WORK are best!
To do complex layouts, start with the overall bounding box and fill it with "Words words words". I'm not kidding; that's how I started this one! Then start subdividing into boxes (first rows, then cells in each row, as if it were a table) and applying CSS decorations to each box. Add the link-codes at the very end, after you're happy with the layout.
If I'm doing a multi-row layout like this, I will often use <p> for the outer bounding box, <span style="display: block;"> to define the bounding boxes of rows, and <u style="display: block;"> to define cells within each row. That leaves <b>, <i>, <a>, and <img> to apply honest-to-gosh formatting to individual elements within a cell, depending on whether those elements are text, links, or images. Remember the CSS Kung Fu trick to turn off bold, italics, and underline as needed even in b, i and u tags and press them into service for something else.
Keep saving to see how it looks. Don't be afraid to publish a lens early! Just make a funny "Under Construction" sign with the date using a Black (or orange) Box module. Each time you've got something working, save it in a spare text file, just in case you get lost and need to back up.
I know this sounds intimidating, but the results can be so rewarding! It's like making a quilt. Piece by piece, add more detail, until you've got a beautiful design.
Visitors' Guestbook
Leave your comments here!
-
Reply
-
kievan
Feb 10, 2012 @ 6:32 am | delete
- Great!!
Linking is why internet exists, and doing it in a logical way makes things so much more enjoyable. I am fairly good at html and css. So this lens makes perfect sense to me. It is from your experience with what is restricted by Squidoo and what is allowed that will save me from spending time on experiments of my own.
And thanks for the link to the tool from SquidUtils. I was wondering about the the hash tags for the individual modules myself.
a
Great read, will definitely come back!
-
-
Reply
-
ChristineSama
Feb 2, 2012 @ 2:10 am | delete
- It so so awesome.There is too much for me to learn!
-
-
Reply
-
AdrianaCopaceanu
Feb 1, 2012 @ 1:13 pm | delete
- I absolutely adore the graphics you have on this page :). And thank you for such easy to understand directions.
-
-
Reply
-
cmadden
Jan 26, 2012 @ 1:29 am | delete
- Pretty amazing, both how well presented and easy to follow this lens is, and that you spent so much time (you must have!) to help folks like me who started out HTML-clueless. Thanks.
-
-
Reply
-
pablina
Jan 22, 2012 @ 8:42 am | delete
- Very useful. I'll be testing some of these out. Thanks.
-
- Load More
by Greekgeek
I've written several Squidoo Tutorials to help you!
BONUS! Free online text editor.
more »
- 256 featured lenses
- Top lens » Jackie Robinson: The Story of an American Hero
- This lens »
Won purple star
Explore related pages
- CSS Codes: Easy Tutorial and Quick Reference Guide CSS Codes: Easy Tutorial and Quick Reference Guide
- How to Align Images in CSS & HTML How to Align Images in CSS & HTML
- Build a Better Featured Lenses Module Build a Better Featured Lenses Module
- Advanced CSS: Tricks and Tips Advanced CSS: Tricks and Tips
- SquidU's Lensmaster Lounge: Help for New Squids SquidU's Lensmaster Lounge: Help for New Squids
- How to Upload Images on Squidoo How to Upload Images on Squidoo
Super Squidoo Tip!
A CSS Book that Won't Break the Bank
Useful reference for all the tricks I use
CSS in Easy Steps
Amazon Price: $6.00 (as of 02/23/2012)
Are online websites teaching you HTML and CSS intimidating? Here's a good book for beginners with the latest CSS codes (as of Nov 2009) and good examples. It will help you get used to CSS so that it's as easy as adding pizza toppings to a pizza to have your pizza -- er, webpage -- come out just right!
