SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: making tabs

  1. #1
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    making tabs

    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?

    http://muslimahwebdesign.co.uk/deals/ukdesignbay/

  2. #2
    SitePoint Zealot moretea's Avatar
    Join Date
    Jun 2004
    Location
    Texas, USA
    Posts
    118
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Normally you'd use JS for that. Here is a way to do it with jQuery: http://pageaffairs.com/notebook/jquery-tabbed-menu

  4. #4
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code:
    <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;">&pound;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;">&nbsp;&pound;69.99&nbsp;</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;">
    				&nbsp;</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%">		
    						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img style="border:0; cursor:pointer" src="http://ukdesignbay.co.uk/template1/wp-content/themes/maestro/assets/images/sharedeal.png" >&nbsp;&nbsp;
    						<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>&nbsp;&nbsp;
    						<a class="sharepopup" href="http://www.facebook.com/sharer.php?s=100&amp;p[title]=Amazing+Deal%21&amp;p[summary]=Check+Out+This+Deal+%3A+ukdesignbay&amp;p[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/facebook.png"></a>&nbsp;&nbsp;
    						<a class="sharepopup" id="pin" href="http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fmuslimahwebdesign.co.uk%2Fdeals%2Fukdesignbay&amp;media=http://ukdesignbay.co.uk/template1/wp-content/themes/maestro/assets/images/deal.jpg&amp;" 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>&nbsp;&nbsp;
    						<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>&nbsp;&nbsp;
    						<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>&nbsp;&nbsp;
    					</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>

  5. #5
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    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?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •