wayzways Posted October 25, 2011 Share Posted October 25, 2011 Would like to know how to create tabs like argos . They have got tabs like Description, Reviews and so on. Thanks. Link to comment Share on other sites More sharing options...
thescientist Posted October 26, 2011 Share Posted October 26, 2011 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. Link to comment Share on other sites More sharing options...
wayzways Posted October 26, 2011 Author Share Posted October 26, 2011 Thanks. Please find pic of the tabs with this link I am just interested on creating various tabs. Thanks a lot. Link to comment Share on other sites More sharing options...
Synook Posted October 27, 2011 Share Posted October 27, 2011 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? Link to comment Share on other sites More sharing options...
dsonesuk Posted October 27, 2011 Share Posted October 27, 2011 check this out http://icant.co.uk/articles/flexible-css-menu/index.html Link to comment Share on other sites More sharing options...
wayzways Posted October 27, 2011 Author Share Posted October 27, 2011 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> Link to comment Share on other sites More sharing options...
Krewe Posted October 27, 2011 Share Posted October 27, 2011 Can I ask one question? Why are you not using a .css to style your td's, p's, etc? Link to comment Share on other sites More sharing options...
wayzways Posted October 29, 2011 Author Share Posted October 29, 2011 Hi Krewe To be honest I am not familiar with CSS. I just used the template available and worked around it in front page. P Link to comment Share on other sites More sharing options...
Ingolme Posted October 29, 2011 Share Posted October 29, 2011 You should learn CSS. It's essential to make any website properly. W3Schools has a very good CSS tutorial Link to comment Share on other sites More sharing options...
wayzways Posted October 30, 2011 Author Share Posted October 30, 2011 Is there any way this can be done with Front Page ? Link to comment Share on other sites More sharing options...
eTianbun Posted October 30, 2011 Share Posted October 30, 2011 If you want your site to be in good shape, then you need to learn CSS! Goto: w3schools and locate 'CSS tutorial'. With the 'Tryit yoursef' editor, you will find the whole process easier. Link to comment Share on other sites More sharing options...
dsonesuk Posted October 30, 2011 Share Posted October 30, 2011 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. Link to comment Share on other sites More sharing options...
Ingolme Posted October 30, 2011 Share Posted October 30, 2011 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. Link to comment Share on other sites More sharing options...
wayzways Posted October 31, 2011 Author Share Posted October 31, 2011 Thanks a lot Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.