Jump to content
wayzways

How To Create Tabs ?

Recommended Posts

which part of you having trouble with? what have you tried? it's kind of a tricky example because they are working within the context of the ebay site. Do you have another example? Typically inventory systems that display information like that use a server side language to create a template file for all products, and then usually a product id is passed into the page to get the specific content associated with that product, for that tab.

Share this post


Link to post
Share on other sites

If you just want the appearance of a "tab", why not create some links and style them that way? Or is there some specific functionality you are thinking of?

Share this post


Link to post
Share on other sites

I have got a template below which I have tried to edit to fit my need but I wanted to learn how to start from the scratch. I played around with interactive button in front page but dint go very far. I would appreciate any help on how to do it step by step. Thanks, ---------------------------xxxxx------------------------ here is the template I edited------------------ <html> <head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"><title>Concord Extra accepts payment fo</title></head> <body> <div align="center"> <table id="tabHolder" width="100%" cellspacing="0" cellpadding="0" border="0"><tr><td> <!-- setup area --><style> td.tabgap {width:2px;} a.tabtop { display:block; position:relative;white-space:nowrap; cursor:pointer;text-decoration:none; line-height:28px; text-align:center;font-size:14px; font-family:arial; font-weight:bold;} div#tabterms { height:150px; padding:15px; font-family:arial; font-size:14px; text-align:left; }</style><!-- _______________________________________ Change colors as needed below. They will override stylesheet colors._______________________________________--><script>var pageBgColor ="#ffffff";var cardBgColor ="#ffffff";var cardTextColor="#000000";var borderColor ="#868686";var backtabColor ="#0066FF";var tabTextLink ="#000000";var tabTextHover ="#FFFFFF";</script><!-- end of setup --> <div id="tabtops" class="tabtop"><!-- _______________________________________ Add or delete tab tops as needed below. Number them sequentially. _______________________________________--> <tt id="tt1">Payment</tt>|<tt id="tt2"> Delivery </tt>|<tt id="tt3"> Returns </tt>|<tt id="tt4"> Order By Phone </tt>|<tt id="tt5"> Contact Us </tt></div><div id="tabterms" style="overflow: auto; height: 150px; font-family: arial; font-size: 14px; text-align: left; border-left: 2px solid #777777; border-right: 2px solid #777777; border-top: 0px none; border-bottom: 2px solid #777777; padding: 15px"><!-- _______________________________________ Add or Delete tab content sections below as necessary. Number them sequentially. _______________________________________--> <!-- terms #1 --><div id="tab1"><span class="Apple-style-span" style="color: rgb(0, 0, 0); font-family: tahoma, arial, verdana; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: justify; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; "><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; font-family: tahoma, arial, verdana !important; font-size: 12px; "><b style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; font-family: tahoma, arial, verdana !important; font-size: 12px; ">Payment Information</b></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; font-family: tahoma, arial, verdana !important; font-size: 12px; ">Payment can only be made by PayPal. To ensure your purchase is protected it will only be delivered to your registered PayPal address. Payment on 'Buy It Now' purchases must be made immediately. Once your payment has been received we will send you a confirmation email. VAT invoice will be sent when requested. Our listed prices include VAT at the standard rate.</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; font-family: tahoma, arial, verdana !important; font-size: 12px; ">If the item needs to be shipped to an alternative address please update the address in PayPal prior to placing your order. We will only ship to your registered PayPal address. In the event that your order has already been placed, please contact our customer service team who will refund the order to allow you to update the address details in PayPal and resubmit your order.</p><img alt="We Accept PayPal" title="We Accept PayPal" src="http://pics.ebaystatic.com/aw/pics/uk/paypal/imgLockup.gif" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; font-family: tahoma, arial, verdana !important; font-size: 12px; "></span></div><hr class="tt"> <!-- terms #2 --><div id="tab2"><span class="Apple-style-span" style="color: rgb(0, 0, 0); font-family: tahoma, arial, verdana; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: justify; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; "><table class="Delivery-Table" summary="Delivery Information" style="font-family: tahoma, arial, verdana !important; font-size: 12px; width: 1013px !important; border-collapse: collapse; border: 0px initial initial; margin: 10px 0px; padding: 0px" id="table1"><tbody style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; font-family: tahoma, arial, verdana !important; font-size: 12px; "><tr style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; font-family: tahoma, arial, verdana !important; font-size: 12px; "><td class="col1" valign="top" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; font-family: tahoma, arial, verdana !important; font-size: 12px; width: 150px; text-align: left; "><img title="Royal Mail" height="103" alt="Royal Mail" width="140" src="http://www.royalmail.com/images/royalmail/paarch/pa_rmlogo.gif" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; font-family: tahoma, arial, verdana !important; font-size: 12px; "></td><td class="col2" valign="top" style="font-family: tahoma, arial, verdana !important; font-size: 12px; width: 589px; text-align: left; border: 0px initial initial; margin: 0px; padding: 0px"><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; font-family: tahoma, arial, verdana !important; font-size: 12px; ">Orders will be despatched via Royal Mail or City Link. Most items will be sent out the next day excluding weekends and Bank Holidays. We aim to despatch all orders within 2 working days of cleared funds. City Link deliveries MUST be signed for. Please note;<span class="Apple-style-span" style="color: rgb(0, 0, 0); font-family: tahoma, arial, verdana; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: justify; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">City Link </span>deliver Monday to Friday, between 7:30 - 17:30. If there is no one available to sign for your parcel they will leave a card with details of when your item will be redelivered or where you should go to collect it.</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; font-family: tahoma, arial, verdana !important; font-size: 12px; ">City Link (24 Hr) prices mentioned on the listing applies to UK Mainland only. Contact us prior purchase for the delivery price for other regions.</td><td class="col2" style="font-family: tahoma, arial, verdana !important; font-size: 12px; width: 275px; text-align: left; border: 0px initial initial; margin: 0px; padding: 0px"><img title="Parcel Force" height="70" alt="City Link" width="190" src="http://www.city-link.co.uk/static/i/logo.gif" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; font-family: tahoma, arial, verdana !important; font-size: 12px; "></td></tr></table></span> </div><hr class="tt"><div id="tab3"><span class="content"><span class="Apple-style-span" style="color: rgb(0, 0, 0); font-family: tahoma, arial, verdana; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: justify; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; "><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; font-family: tahoma, arial, verdana !important; font-size: 12px; "><b style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; font-family: tahoma, arial, verdana !important; font-size: 12px; ">Returns</b></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; font-family: tahoma, arial, verdana !important; font-size: 12px; ">If you change your mind, or any of our products fall below the standard you would expect and you wish to return the item, you must notify us via the link in "my eBay" within 10 days of delivery. We are happy to refund or exchange the item providing it is returned unused, in its original packaging with all accessories. Please retain proof of posting from post office.</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; font-family: tahoma, arial, verdana !important; font-size: 12px; "><b style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; font-family: tahoma, arial, verdana !important; font-size: 12px; ">Faulty items</b></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; font-family: tahoma, arial, verdana !important; font-size: 12px; ">If your item develops a fault please notify us via the link "my eBay".</span></span></p><span class="content"><span class="Apple-style-span" style="color: rgb(0, 0, 0); font-family: tahoma, arial, verdana; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: justify; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; "><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; font-family: tahoma, arial, verdana !important; font-size: 12px; ">If the fault has developed within 28 days of delivery we will offer a refund, including postage costs or a replacement product once the original product has been returned to the Concord Extra team for assessment and verification of the fault.</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; font-family: tahoma, arial, verdana !important; font-size: 12px; ">If a product is returned as faulty but not found to have a manufacturing fault or if a fault has developed as a result of misuse, no product or postage costs will be refunded.</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; font-family: tahoma, arial, verdana !important; font-size: 12px; ">Please note that it can take 3-5 days for any refund given to be shown in your PayPal account.</p></span></span> </div><hr class="tt"> <!-- terms #4 --><div id="tab4"><span class="content"><span class="Apple-style-span" style="color: rgb(0, 0, 0); font-family: tahoma, arial, verdana; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 700; letter-spacing: normal; line-height: normal; orphans: 2; text-align: justify; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><p style="font-family: tahoma, arial, verdana; font-size: 12px; border: 0px initial initial; margin: 0px; padding-left: 0px; padding-right: 10px; padding-top: 10px; padding-bottom: 10px">Order By Phone</p></span><span class="Apple-style-span" style="color: rgb(0, 0, 0); font-family: tahoma, arial, verdana; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: justify; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; "><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; font-family: tahoma, arial, verdana !important; font-size: 12px; ">To place a telephone order call <b>01495 758937 </b>with your eBay item number.</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; font-family: tahoma, arial, verdana !important; font-size: 12px; ">Our Orders line are open<span class="Apple-style-span" style="color: rgb(0, 0, 0); font-family: tahoma, arial, verdana; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: justify; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; ">from 10am until 4pm Monday to Friday (excludes bank holidays)</span><span style="color: rgb(0, 0, 0); font-family: tahoma, arial, verdana; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal; orphans: 2; text-align: justify; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">.</span></p></span></span> </div><hr class="tt"> <!-- terms #4 --><div id="tab5"><span class="content"><span class="Apple-style-span" style="color: rgb(0, 0, 0); font-family: tahoma, arial, verdana; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: justify; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; "><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; font-family: tahoma, arial, verdana !important; font-size: 12px; "><b style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; font-family: tahoma, arial, verdana !important; font-size: 12px; ">Contact Us</b></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; font-family: tahoma, arial, verdana !important; font-size: 12px; ">Our branch stores are not able to assist with online Concord Extra queries but our dedicated online Concord Extra team have been specially trained to assist with any enquiries you may have.</p><span class="Apple-style-span" style="color: rgb(0, 0, 0); font-family: tahoma, arial, verdana; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: justify; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; "><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; font-family: tahoma, arial, verdana !important; font-size: 12px; ">Please contact us via the link "my eBay".</span></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; font-family: tahoma, arial, verdana !important; font-size: 12px; ">We will respond to most emails within one working day and we aim to reply to all queries within two working days.</p></span></span></div></div><p> <!-- _______________________________________ End of tab content editing _______________________________________--><!-- tab and corner scripts below indexcards --><style> td.tabgap {border-bottom:2px solid #777777;} td.corLt{position:relative; width:8px; vertical-align:top; border:2px solid #777777; border-right: 0px;} td.corRt{position:relative; width:8px; vertical-align:top; border:2px solid #777777; border-left: 0px ;} div.corLt{position:relative; left:-2px; top:-2px; width:8px;} div.corRt{position:relative; right:-2px; top:-2px; width:8px;} td.tabtop {border-top:2px solid #777777; border-bottom:2px solid #777777; background-color:transparent ; } div#tabterms {overflow:auto; border:2px solid #777777; border-top:0px;}</style><script>/* HTMLdraw script from ISDNtek.com makes corners*/var CornerShape ="1,1,1,1,1,0,0,0,1,1,1,0,0,0,0,0,1,1,0,0,0,0,2,2,1,0,0,0,2,2,2,2,1,0,0,2,2,2,2,2,0,0,0,2,2,2,2,2,0,0,2,2,2,2,2,2,0,0,2,2,2,2,2,2"; function ttCor(which){var a; switch(which){case 'TL':a=cor[0];break; case 'TR':a=cor[1];break; case 'BL':a=cor[2];break; case 'BR':a=cor[3];break; }return(a)} document.write('<style>#corgrid div {height:1px; width:1px; line-height:1px; font-size:1px;}</style>'); var co=new Array(borderColor,pageBgColor,"transparent");var cc=CornerShape.split(','), cnt=Math.ceil(Math.sqrt(cc.length)), cor=new Array(); for (var i=0;i<4; i++){ var x="";x=x+'<div id="corgrid" style="width:'+cnt+'px; height:'+cnt+'px;">';for (var trow=0; trow<cnt; trow++){for (var tcol=0; tcol<cnt; tcol++){switch(i){case 0:cbg=co[cc[(trow*cnt)+(tcol)]]; break;case 1:cbg=co[cc[(trow*cnt)+(cnt-tcol-1)]]; break;case 2:cbg=co[cc[(cnt*cnt-1)-(trow*cnt)-(cnt-tcol-1)]]; break;case 3:cbg=co[cc[(cnt*cnt-1)-(trow*cnt)-(tcol)]]; break;}x=x+'<div style="float:left; background-color:'+cbg+'" ><br clear="both"></div>'; }}x=x+'</div>';cor=x}function $(v){return(document.getElementById(v))} function makeTabs(){ document.write('<style> hr.tt{display:none;}'+ 'td.tabgap,td.corLt,td.corRt,td.tabtop,div#tabterms '+ '{border-color:'+ borderColor +'} a.tabtop, a.tabtop:link {color:'+ tabTextLink+'; } a.tabtop:hover {color:'+ tabTextHover +';}'+ 'div#tabterms {background-color:'+ cardBgColor+'; color:'+cardTextColor+';}</style>'); var tbspc='<table width="100%" cellspacing="0" cellpadding="0" border="0"><tr>'; var sp=false; for (var i=1; i<=20; i++) { if ($('tt'+i)){if(sp==false){ var gp=''}else{var gp='<td class="tabgap"><br></td>'} sp=true; tbspc=tbspc+gp+ '<td id="ts'+i+'" class="corLt"></td><td id="tt'+i+'" class="tabtop" >'+ '<a class="tabtop" href="javascript:showTab('+i+')">'+$('tt'+i).innerHTML+ '</a></td><td id="tu'+i+'" class="corRt"></td>'}} $('tabtops').innerHTML=tbspc+'</tr></table>'; for (var i=1; i<=20; i++) {if ($('tt'+i)){ $('ts'+i).innerHTML='<div class="corLt">'+ttCor('TL')+'</div>'; $('tu'+i).innerHTML='<div class="corRt">'+ttCor('TR')+'</div>';}} }function showTab(num) { for (var i=1; i<=20; i++) { if ($('tt'+i)){ $('tab'+i).style.display='none'; $('ts'+i).style.backgroundColor= $('tt'+i).style.backgroundColor= $('tu'+i).style.backgroundColor=backtabColor; $('ts'+i).style.borderBottomColor= $('tt'+i).style.borderBottomColor= $('tu'+i).style.borderBottomColor=borderColor; }} $('tab'+num).style.display='block'; $('ts'+num).style.backgroundColor= $('tu'+num).style.backgroundColor= $('tt'+num).style.backgroundColor= $('ts'+num).style.borderBottomColor= $('tu'+num).style.borderBottomColor= $('tt'+num).style.borderBottomColor=cardBgColor; $('tabterms').scrollTop=0;}makeTabs();showTab(1);</script></div><div style="font-family:arial; font-size:10px; color:silver">I</div></td></tr></table> </div> <!-- ===============================End IndexCardFlexTabs http://www.isdntek.com ===============================--> </body> </html>

Share this post


Link to post
Share on other sites

Can I ask one question? Why are you not using a .css to style your td's, p's, etc?

Share this post


Link to post
Share on other sites

You should learn CSS. It's essential to make any website properly. W3Schools has a very good CSS tutorial

  • Like 1

Share this post


Link to post
Share on other sites

It can be done in any html editor dreamweaver, crappy frontpage, and even notepad, as long as you learn css to bring it altogether into the design layout you desire.

  • Like 1

Share this post


Link to post
Share on other sites

It can be done in FrontPage, but have in mind: FrontPage won't do it for you, you have to do it yourself by manipulating the code.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...