OpenNTF.org - Making tabbed tables work on t
My Links (Not logged in)
Code Bin Search
 
Hosted by Prominic.NET
Rate This Code
5 - brilliant stuff
4 - very nice
3 - average
2 - needs work
1 - bad
   OpenNTF Code Bin
About This Code
Brief Description:
Making tabbed tables work on the Web 
Rating:
Not Rated Yet 
Contributor:
Andrew Jones 
Category:
CSS 
Type:
Webdevelopment 
Last Modified:
17 Jun 2002 
OpenNTF Disclaimer

All of the program code and information presented in the OpenNTF.org Code Bin are provided "as-is", and should be used at your own risk. OpenNTF.org make no express or implied warranty about anything in the Code Bin, and OpenNTF.org will not be responsible or liable for any damage caused by the use or misuse of anything from this site. OpenNTF.org makes no guarantees about anything. Please thoroughly test all of the knowledge and code you find here before you attempt to use them in your production environment.

Code / Description
Tabbed tables as rendered for the Web by Domino are pretty much a waste of time - basically they look terrible. If you've tried it, you'll know exactly what I mean. Never fear, however - include the code given here on a Domino form, and watch as tabbed tables become recognizable as... well, tabbed tables.
Usage / Example
FIRST, A FEW COMMENTS

The code below is written to support IE5+. I can pretty much guarantee it will require modification to work properly with Netscape.

A before-and-after example of the code may be found at:
http://members.ozemail.com.au/~jjrogers/tabs.html

USING THE CODE

The first thing you need to do, is pick an image to serve as the tab background. My sample image is available at: http://members.ozemail.com.au/~jjrogers/tabs.html. This image may be stored in your database as an image resource. If you're using a different image, you'll probably want to change the image name and tab height and width specified in the code below.

After this, there are two steps to applying the code. Firstly, include the following in the HTML Head Content of the form with which you're dealing:

"<style>" +

" /* properties for the tabs themselves */ " +
" div table tr td table tr td { " +
" border:none; " +
" border-width:1; " +
" background-image:url(tabimage.jpg); " +
" width:90px ;" +
" height: 22px;" +
" } " +

" /* formatting for text on the non-current tab text */ " +
" div table tr td table tr td a { " +
" color:black; " +
" font:8pt Arial; " +
" text-decoration:none;" +
" }" +

" /* formatting for mouseover on the non-current tab text */ " +
" div table tr td table tr td a:HOVER { " +
" color:black; " +
" font:8pt Arial; " +
" text-decoration:underline;" +
" }" +

" /* formatting for the current tab text */ " +
" div table tr td table tr td b { " +
" color:black; " +
" font:8pt Arial; " +
" font-weight: bold; " +
" }" +

" /* formatting for the table that contains the tabs */ " +
" div table tr td table { " +
" border-width:0; " +
" }" +

"</style>"

Next, put a <div> tag immediately before the tabbed table on the form, and a </div> tag after it. Mark these tags as pass-thru HTML, of course.

That's it. Again, a before-and-after example of this may be found at:
http://members.ozemail.com.au/~jjrogers/tabs.html

A BRIEF DISCUSSION

The overall intention here was to provide a means by which the tabbed tables available in Domino could be practically used, with a minimum of overhead in initial development, and more particularly in maintenance.

CSS is used to provide the formatting, and contextual selectors are used to determine which elements are subject to this formatting. The <div> tags are used to limit the page elements to which the formatting is applied. However, if there you have tables within tabbed tables, you might encounter some unwanted application of styles, unless you apply alternative formatting explicitly to those elements.

 Comments
Posted by Josef Prusa on 07/31/2003 02:42:43 AMCannot access your examples!
Hello,
I cannot access you r examples ! It tells me I do not have right to read them....
 Add your comment!