How do I create tabs like in this page? Can I do them with pure html and css or do they need some jscript etc?
Normally you’d use JS for that. Here is a way to do it with jQuery: http://pageaffairs.com/notebook/jquery-tabbed-menu
both good links
I have this page: http://muslimahwebdesign.co.uk/deals/ukdesignbay/ and I want to try and convert it into an ebay listing so I’m having to place all styles as inline styles so I am now at the tabs bit and getting a little stuck.
how do I do inline slyle for active tabs?
here is what I have so far:
<table id="maintable" style="background: #F7F6F6; text-align: center; margin-left:auto; margin-left:auto; width: 960px; border-color: #BDBDBD; border-width: 1px 1px 1px 1px; border-style: solid; -moz-box-shadow: 0 0 5px #888; -webkit-box-shadow: 0 0 5px#888; box-shadow: 0 0 15px #888;">
<tr>
<td colspan="2"> </td>
</tr><tr><td width="460px">
<table id="countergrid">
<tr>
<td colspan="6">
<a href="getdeal.php"><img src='http://ukdesignbay.co.uk/template1/wp-content/themes/maestro/assets/images/bluegetitnow.png' style="border:none"></a>
</td>
</tr> <tr style="font-weight:bold; color:#000000; font-size:13px;">
<td>DEAL PRICE<br><span style="color:#7C8C91; font-weight:bold; font-size:24px;">£29.99</span></td>
<td><img src="http://ukdesignbay.co.uk/template1/wp-content/themes/maestro/assets/images/divide.gif"></td>
<td>REG. PRICE<br><span style="text-decoration:line-through; color:#97A3A6; font-weight:bold; font-size:24px;"> £69.99 </span></td>
<td><img src="http://ukdesignbay.co.uk/template1/wp-content/themes/maestro/assets/images/divide.gif"></td>
<td>YOU SAVE<br><span style="color:#EB4B1C; font-weight:bold; font-size:24px;">57%</span></td>
</tr>
<tr>
<td colspan="6" style="font-weight:bold; font-size:10px; color:#383838;">
</td>
</tr>
<tr>
<td id="qtycounter" colspan="6" style="vertical-align: bottom; height:100px; width:375px; background: url(http://ukdesignbay.co.uk/template1/wp-content/themes/maestro/assets/images/qtyframe.png); background-position: center; background-repeat: no-repeat;">
<img src='http://ukdesignbay.co.uk/template1/wp-content/themes/maestro/assets/images/4.jpg' style='border:none;'><img src='http://ukdesignbay.co.uk/template1/wp-content/themes/maestro/assets/images/9.jpg' style='border:none;'>
</td>
</table>
</td>
<td style="text-align:right; padding-right:8px;"><div style="text-align:center; width: 480px; height:270px; margin-left:auto; margin-right:auto;"><img style=" border:none; max-height:100%; max-width:100%;" src="http://ukdesignbay.co.uk/template1/wp-content/themes/maestro/assets/images/deal.jpg"></div></td>
</tr>
<tr >
<td colspan="2" style="vertical-align:middle; text-align:left; height:74px; width:931px; background: url(http://ukdesignbay.co.uk/template1/wp-content/themes/maestro/assets/images/socialpanel.png); background-position: center; background-repeat: no-repeat;" align="center">
<table cellpadding="0" style="width:931px; position: relative; top: 54%; margin-top: -6%; ">
<tr>
<td style="width:50%">
<img style="border:0; cursor:pointer" src="http://ukdesignbay.co.uk/template1/wp-content/themes/maestro/assets/images/sharedeal.png" >
<a class="sharepopup" href="http://twitter.com/share?text=Just%20Picked%20Up%20A%20Great%20Deal:%20ukdesignbay%20-%20http%3A%2F%2Fmuslimahwebdesign.co.uk%2Fdeals%2Fukdesignbay"><img style="border:0; cursor:pointer" src="http://ukdesignbay.co.uk/template1/wp-content/themes/maestro/assets/images/twitter.png"></a>
<a class="sharepopup" href="http://www.facebook.com/sharer.php?s=100&p[title]=Amazing+Deal%21&p[summary]=Check+Out+This+Deal+%3A+ukdesignbay&p=http%3A%2F%2Fmuslimahwebdesign.co.uk%2Fdeals%2Fukdesignbay"><img style="border:0; cursor:pointer" src="http://ukdesignbay.co.uk/template1/wp-content/themes/maestro/assets/images/facebook.png"></a>
<a class="sharepopup" id="pin" href="http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fmuslimahwebdesign.co.uk%2Fdeals%2Fukdesignbay&media=http://ukdesignbay.co.uk/template1/wp-content/themes/maestro/assets/images/deal.jpg&" target="_blank" count-layout="none" ><img border="0" src="http://ukdesignbay.co.uk/template1/wp-content/themes/maestro/assets/images/pinterest.png" title="Pin It"></a>
<a class="sharepopup" href="https://plus.google.com/share?url=http%3A%2F%2Fmuslimahwebdesign.co.uk%2Fdeals%2Fukdesignbay"><img style="border:0; cursor:pointer" src="http://ukdesignbay.co.uk/template1/wp-content/themes/maestro/assets/images/gplus.png" ></a>
<a class="sharepopup" id="su" href="https://www.stumbleupon.com/submit?url=http%3A%2F%2Fmuslimahwebdesign.co.uk%2Fdeals%2Fukdesignbay"><img style="border:0; cursor:pointer" src="http://ukdesignbay.co.uk/template1/wp-content/themes/maestro/assets/images/stumble.png" ></a>
</td><td></td> </tr>
</table>
</td></tr>
<tr >
<td colspan="2">
<table style="width:928px; text-align:left; margin-left:auto; margin-right:auto;">
<tr>
<td style="max-width:926px; overflow:none;">
<div id="tabs" style="margin: 0px 0;">
<ul id="tabtable" style="margin: 0; padding: 0;"> <li style="cursor:pointer; float: left; background: #F7F6F6; width: 850px;"><a class="tabtops" href="#tab-1"><table style="width:125px; float: left;"><tr><td style="padding-top:7px; text-align:center">Template</td></tr></table></a></li> <li style="width: 139px; height: 45px; list-style: none; background-image: url(http://ukdesignbay.co.uk/template1/wp-content/themes/maestro/assets/images/tabinactive.png); background-repeat: no-repeat; display: inline;"><a class="tabtops" href="#tab-2" style="idth:125px; float: left;"><table style="width:125px;"><tr><td style="padding-top:7px; text-align:center">Customise</td></tr></table></a></a></li> <li style="width: 139px; height: 45px; list-style: none; background-image: url(http://ukdesignbay.co.uk/template1/wp-content/themes/maestro/assets/images/tabinactive.png); background-repeat: no-repeat; display: inline;"><a class="tabtops" href="#tab-3"><table style="width:125px;"><tr><td style="padding-top:7px; text-align:center">Hosting £0</td></tr></table></a></a></li></ul> <div style="height:300px; max-width:900px; overflow:auto; " id="tab-1"><span id="tabcontent1" >You get your professional template that will increase your sales</span></div> <div style="height:300px; max-width:900px; overflow:auto; " id="tab-2"><span id="tabcontent2" >Easily update and customise your template with your own free editing account</span></div> <div style="height:300px; max-width:900px; overflow:auto; " id="tab-3"><span id="tabcontent3" ></span></div> </div>
</td>
</tr>
</table>
</td>
</tr>
so are the tabs in this page css or javascript? http://muslimahwebdesign.co.uk/deals/ukdesignbay/
if they are javascript how can I tranfer them to pure css and how do I do inline style for active tabs and links?