ColdFusion Tips and Tutorials

Keep Coding,
Nathan Stanford
President/CEO
C.F. Concepts, Inc.
http://www.coldfusionmonthly.com
http://www.cftipsplus.com

If you have suggestions for articles send them to us.
If you would like to write for cftipsplus.com
send us an email to:

admin@cftipsplus.com

IF YOU WANT TO BE AN AUTHOR SEND IN YOUR COLDFUSION TIPS.

Remember this is a great way to get your name known in the
ColdFusion Community.

Visit this site. If you have plans to get training here is a company that provides Advanced, Intensive ColdFusion Training. Check them out.

http://www.coldfusiontraining.com/index.cfm?ref=cftipsplus

Monthly access to new articles written by industry-leading ColdFusion experts. A fully-functional application that accompanies each issue.

Full access to all issues, past and present (with a one year paid subscription). The chance to be seen in our "Community Spotlight" corner, which showcases new writers and emerging talent

Build a Style Sheet for Links
The idea is to use links in the tabs without having the words wind up underlined or change color after a visit. A style sheet can override these characteristics. This style sheet defines what links ("a": the anchor tag) should look like in two modes: idle and hover. Setting text-decoration to none keeps links from being underlined. When the mouse is not on a link, it will be black and bold. When the mouse hovers over a link, its color will change, but it will retain the characteristics not explicitly changed. It will remain bold and not underlined. The page for each tab should start with this code.

<style>
a {text-decoration:none;color:black;font-weight:bold;}
a:hover {color:blue;}
</style>

Build the First Tab
The convention of folders in a file cabinet is represented here by a table having multiple cells in its first row and a single cell spanning the table in its second row. The second row can of course have as many lines of text and controls as desired and can even use nested tables for formatting. The cell of the top row that represents the tab for THIS folder should be the same color as the body of the folder: the second row. The other cells should have slightly different colors so they don't merge with the body or with each other. The usual space between cells should also be removed. The cellspacing control does this for Internet Explorer; the border control is added to accommodate Netscape Navigator as well.
A word about colors is in order. David Sanders points out that HTML hex colors are controlled by three pairs of hex characters: a pair for red, a pair for green, and a pair for blue. Thinking of them this way will help you make small adjustments when your reference chart isn't handy.

Add this code to the previous code and save it as tab1.cfm.

<table cellspacing="0" border="0">
<td bgcolor="#EDEDED"><a href="tab1.cfm">Tab 1</a></td>
<td bgcolor="#CCCCCC"><a href="tab2.cfm">Tab 2</a></td>
<td bgcolor="#A9A9A9"><a href="tab3.cfm">Tab 3</a></td></tr>
<tr><td colspan="3" bgcolor="EDEDED"><br>
This information is displayed when you select Tab 1.
</td></tr>
</table>

Change a Copy for the Second and Third Tabs
Make a copy of tab1.cfm, rearrange the colors to put the body color in the middle, and call the result tab2.cfm. The tab code will look like this. Don't forget to change the text in the body as appropriate.

<td bgcolor="#CCCCCC"><a href="tab1.cfm">Tab 1</a></td>
<td bgcolor="#EDEDED"><a href="tab2.cfm">Tab 2</a></td>
<td bgcolor="#A9A9A9"><a href="tab3.cfm">Tab 3</a></td></tr>

Do it one more time and call the result tab3.cfm. The tab code will look like this.

<td bgcolor="#CCCCCC"><a href="tab1.cfm">Tab 1</a></td>
<td bgcolor="#A9A9A9"><a href="tab2.cfm">Tab 2</a></td>
<td bgcolor="#EDEDED"><a href="tab3.cfm">Tab 3</a></td></tr>

Review and Refine
To see the result, browse any of these files and click tabs to move between them, then imagine how the effect could be better. Some colors (purple, for example), tend to shrink away from others and therefore may not work well in this context; however, you certainly don't need to stick with gray tones. Images would be nice and can be joined to text using style sheets so clicking on the image or the text would select the page. Use this interface with ColdFusion controls; drive it with a database to automatically generate tabbed folders for your top five sales items. Enjoy!

=Marty=