Converting jscript tabs to pure html and css

[hantaah]

I have some tabs that I now see are changeable via javascript however I need them to be pure html / css

I have some code so is it possible and how is it done to convert these tabs into html and css only…

Here are the working tabs: http://muslimahwebdesign.co.uk/deals/ukdesignbay/#

and here is my finished code without any javascript:

<style>table#maintable {
	background:#F7F6F6;
    text-align:center; 
    margin-left:auto; 
    margin-right: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 { border-style:none }
td { border-style:none }
img { border:none }
  


#tabtable {
	margin: 0;
	padding: 0;
}
#tabs {
	
	margin: 0px 0;
}
#tabs > ul {
	cursor:pointer;
	float: left;
	background: #F7F6F6;
	width:850px;
	
}
#tabs li {
	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;

}
* html #tabs li {
	display: inline;
}
#tabs li, #tabs li a {
	float: left;
	
}
#tabs ul li.active {
	background-image: url(http://ukdesignbay.co.uk/template1/wp-content/themes/maestro/assets/images/tabactive.png); background-repeat: no-repeat;
}
#tabs ul li.active a {
	background-image: url(http://ukdesignbay.co.uk/template1/wp-content/themes/maestro/assets/images/tabactive.png); background-repeat: no-repeat;
}
#tabs div {
	background: #FFFFCC;
	clear: both;
	display:block; height:323px; overflow:auto; background: url(http://ukdesignbay.co.uk/template1/wp-content/themes/maestro/assets/images/tabpanel3.png); background-position: center; background-repeat: no-repeat; padding-left:10px; padding-right:10px;
	min-height:323px;
}
#tabs ul li a {
	text-decoration: none;
	padding: 8px;
	color: #676767;
	font-weight: bold;
	font-family:tahoma,verdana,arial,sans serif;
	font-size:12px;
	
}
.thumbs {
	float:left;
	border:#000 solid 1px;
	margin-bottom:20px;
	margin-right:20px;
}

#tabcontent1 {
 font-family:tahoma,arial,sans serif; font-size:12px; color:#777777; height:300px; text-align:left;
  }
#tabcontent1 ul li { background:transparent; display:list-item; float:none; margin:auto; padding:auto; height:auto; width:auto; cursor:auto; list-style:disc outside none; background-image:none;   }
#tabcontent1 ol li { background:transparent; display:list-item; float:none; margin:auto; padding:auto; height:auto; width:auto; cursor:auto; list-style:decimal outside none; background-image:none;  }

#tabcontent2 {
 font-family:arial,sans serif; font-size:12px; color:#777777; height:300px; text-align:left;
  }
#tabcontent2 ul li { background:transparent; display:list-item; float:none; margin:auto; padding:auto; height:auto; width:auto; cursor:auto; list-style:disc outside none; background-image:none;   }
#tabcontent2 ol li { background:transparent; display:list-item; float:none; margin:auto; padding:auto; height:auto; width:auto; cursor:auto; list-style:decimal outside none; background-image:none;  }

#tabcontent3 {
 font-family:arial,sans serif; font-size:12px; color:#777777; height:300px; text-align:left;
  }
#tabcontent3 ul li { background:transparent; display:list-item; float:none; margin:auto; padding:auto; height:auto; width:auto; cursor:auto; list-style:disc outside none; background-image:none;   }
#tabcontent3 ol li { background:transparent; display:list-item; float:none; margin:auto; padding:auto; height:auto; width:auto; cursor:auto; list-style:decimal outside none; background-image:none;  }

#tabcontent4 {
 font-family:arial,sans serif; font-size:12px; color:#777777; height:300px; text-align:left;
  }
#tabcontent4 ul li { background:transparent; display:list-item; float:none; margin:auto; padding:auto; height:auto; width:auto; cursor:auto; list-style:disc outside none; background-image:none;   }
#tabcontent4 ol li { background:transparent; display:list-item; float:none; margin:auto; padding:auto; height:auto; width:auto; cursor:auto; list-style:decimal outside none; background-image:none;  }

#tabcontent5 {
 font-family:arial,sans serif; font-size:12px; color:#777777; height:300px; text-align:left;
  }
#tabcontent5 ul li { background:transparent; display:list-item; float:none; margin:auto; padding:auto; height:auto; width:auto; cursor:auto; list-style:disc outside none; background-image:none;   }
#tabcontent5 ol li { background:transparent; display:list-item; float:none; margin:auto; padding:auto; height:auto; width:auto; cursor:auto; list-style:decimal outside none; background-image:none;  }

#tab-1 h1 { font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:36px; }
#tab-1 h2 { font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:24px; }
#tab-1 h3 { font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:18px;  }
#tab-1 h4 { font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:14px; }
#tab-1 p { font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:12px; }

#tab-2 h1 { font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:36px; }
#tab-2 h2 { font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:24px; }
#tab-2 h3 { font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:18px;  }
#tab-2 h4 { font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:14px; }
#tab-2 p { font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:12px; }

#tab-3 h1 { font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:36px; }
#tab-3 h2 { font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:24px; }
#tab-3 h3 { font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:18px;  }
#tab-3 h4 { font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:14px; }
#tab-3 p { font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:12px; }

#tab-4 h1 { font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:36px; }
#tab-4 h2 { font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:24px; }
#tab-4 h3 { font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:18px;  }
#tab-4 h4 { font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:14px; }
#tab-4 p { font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:12px; }

#tab-5 h1 { font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:36px; }
#tab-5 h2 { font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:24px; }
#tab-5 h3 { font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:18px;  }
#tab-5 h4 { font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:14px; }
#tab-5 p { font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:12px; }
</style><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;">
<tbody><tr>
	<td colspan="2">	</td>
</tr><tr><td width="460px">
	<table id="countergrid">
		<tbody><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;">&nbsp;£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>
			
		
	</tr></tbody></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 style="width:931px; position: relative; top: 54%; margin-top: -6%; " cellpadding="0">
				<tbody><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=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 src="http://ukdesignbay.co.uk/template1/wp-content/themes/maestro/assets/images/pinterest.png" title="Pin It" border="0"></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>
			</tbody></table>
		</td></tr>
<tr>
		<td colspan="2">
			<table style="width:928px; text-align:left; margin-left:auto; margin-right:auto;">
				<tbody><tr>
					<td style="max-width:926px; overflow:none;">
						<div id="tabs">
							<ul id="tabtable">								<li style=""><a class="tabtops" href="#tab-1"><table style="width:125px;"><tbody><tr><td style="padding-top:7px; text-align:center">Template</td></tr></tbody></table></a></li>								<li style=""><a class="tabtops" href="#tab-2"><table style="width:125px;"><tbody><tr><td style="padding-top:7px; text-align:center">Customise</td></tr></tbody></table></a></li>								<li style=""><a class="tabtops" href="#tab-3"><table style="width:125px;"><tbody><tr><td style="padding-top:7px; text-align:center">Hosting £0</td></tr></tbody></table></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>
			</tbody></table>
		</td>
	</tr>
</tbody></table>
	

[ralphm]

I need them to be pure html / css

Why? This is really a job for JS.

[hantaah]

@ralph_m

Why? This is really a job for JS.

Because ebay won’t allow javascript. Do you mean I should post this in the js section?

[hantaah]

I’ve found this code ( for a photo galolery ) and it seems that it works in ebay. Can something similar be done for the tabs? and how? And is this code javascript or not?

<table width="500" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td style="width: 400px; vertical-align: top;">

<img src="1_large.jpg" width="398" height="299" alt="Large Photo" style="border: 1px solid #000000;" name="swap">

    </td>
    <td style="width: 6px;"></td>
    <td style="width: 94px; vertical-align: top;">

<img src="1_small.jpg" width="92" height="69" alt="Small Photo" style="border: 1px solid #000000; margin-bottom: 3px;" onmousedown="document.swap.src='1_large.jpg';"><br>

<img src="2_small.jpg" width="92" height="69" alt="Small Photo" style="border: 1px solid #000000; margin-bottom: 3px;" onmousedown="document.swap.src='2_large.jpg';"><br>

<img src="3_small.jpg" width="92" height="69" alt="Small Photo" style="border: 1px solid #000000; margin-bottom: 3px;" onmousedown="document.swap.src='3_large.jpg';">

     </td>
  </tr>
</table>

[ralphm]

@hantaah

Do you mean I should post this in the js section?

If you want a JS solution, yes, though it sounds like JS isn’t really an option.

@hantaah

is this code javascript or not?

There is a small bit of old fashioned JS in there, so if it works, then Ebay allows at least some antiquated JS. It would have to be a little more sophisticated than that to do tabs, but I would be looking at something different if Ebay is that out of date—such as stacking the content normally with clear headings.

[hantaah]

yes, I think that seems the only option

why is ebay so boring?

[chris_upjohn]

@hantaah

yes, I think that seems the only option

why is ebay so boring?

Its to prevent malicious code from running in the users browser.

[hantaah]

ahh I see, do you know of a place that teaches step by step design for ebay?

[hantaah]

@chris_upjohn

Its to prevent malicious code from running in the users browser.

ahh I see, do you know of a place that teaches step by step design for ebay?

[hantaah]

@ralph_m ;

Hey great news! I found a source that allows you to do the tabs with pure css! and it works pretty well. Only thing is I’ve added extra classes and so the content of the tabs is outside the box it should be in. How can I sort that out?

here is how I’d like the tabs and content of the tabs to look: http://muslimahwebdesign.co.uk/deals/ukdesignbay/#
Here is the new code with the css tabs: ( although I quite like the new blue tabs but I’s just need the content to stay in the content area )

<style>table#maintable {
	background:#F7F6F6;
    text-align:center; 
    margin-left:auto; 
    margin-right: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 { border-style:none }
td { border-style:none }
img { border:none }
  


#tabtable {
	margin: 0;
	padding: 0;
}
#tabs {
	
	margin: 0px 0;
}
#tabs > ul {
	cursor:pointer;
	float: left;
	background: #F7F6F6;
	width:850px;
	
}
#tabs li {
	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;

}
* html #tabs li {
	display: inline;
}
#tabs li, #tabs li a {
	float: left;
	
}
#tabs ul li.active {
	background-image: url(http://ukdesignbay.co.uk/template1/wp-content/themes/maestro/assets/images/tabactive.png); background-repeat: no-repeat;
}
#tabs ul li.active a {
	background-image: url(http://ukdesignbay.co.uk/template1/wp-content/themes/maestro/assets/images/tabactive.png); background-repeat: no-repeat;
}
#tabs div {
	background: #FFFFCC;
	clear: both;
	display:block; height:323px; overflow:auto; background: url(http://ukdesignbay.co.uk/template1/wp-content/themes/maestro/assets/images/tabpanel3.png); background-position: center; background-repeat: no-repeat; padding-left:10px; padding-right:10px;
	min-height:323px;
}
#tabs ul li a {
	text-decoration: none;
	padding: 8px;
	color: #676767;
	font-weight: bold;
	font-family:tahoma,verdana,arial,sans serif;
	font-size:12px;
	
}
.thumbs {
	float:left;
	border:#000 solid 1px;
	margin-bottom:20px;
	margin-right:20px;
}

#tabcontent1 {
 font-family:tahoma,arial,sans serif; font-size:12px; color:#777777; height:300px; text-align:left;
  }
#tabcontent1 ul li { background:transparent; display:list-item; float:none; margin:auto; padding:auto; height:auto; width:auto; cursor:auto; list-style:disc outside none; background-image:none;   }
#tabcontent1 ol li { background:transparent; display:list-item; float:none; margin:auto; padding:auto; height:auto; width:auto; cursor:auto; list-style:decimal outside none; background-image:none;  }

#tabcontent2 {
 font-family:arial,sans serif; font-size:12px; color:#777777; height:300px; text-align:left;
  }
#tabcontent2 ul li { background:transparent; display:list-item; float:none; margin:auto; padding:auto; height:auto; width:auto; cursor:auto; list-style:disc outside none; background-image:none;   }
#tabcontent2 ol li { background:transparent; display:list-item; float:none; margin:auto; padding:auto; height:auto; width:auto; cursor:auto; list-style:decimal outside none; background-image:none;  }

#tabcontent3 {
 font-family:arial,sans serif; font-size:12px; color:#777777; height:300px; text-align:left;
  }
#tabcontent3 ul li { background:transparent; display:list-item; float:none; margin:auto; padding:auto; height:auto; width:auto; cursor:auto; list-style:disc outside none; background-image:none;   }
#tabcontent3 ol li { background:transparent; display:list-item; float:none; margin:auto; padding:auto; height:auto; width:auto; cursor:auto; list-style:decimal outside none; background-image:none;  }

#tabcontent4 {
 font-family:arial,sans serif; font-size:12px; color:#777777; height:300px; text-align:left;
  }
#tabcontent4 ul li { background:transparent; display:list-item; float:none; margin:auto; padding:auto; height:auto; width:auto; cursor:auto; list-style:disc outside none; background-image:none;   }
#tabcontent4 ol li { background:transparent; display:list-item; float:none; margin:auto; padding:auto; height:auto; width:auto; cursor:auto; list-style:decimal outside none; background-image:none;  }

#tabcontent5 {
 font-family:arial,sans serif; font-size:12px; color:#777777; height:300px; text-align:left;
  }
#tabcontent5 ul li { background:transparent; display:list-item; float:none; margin:auto; padding:auto; height:auto; width:auto; cursor:auto; list-style:disc outside none; background-image:none;   }
#tabcontent5 ol li { background:transparent; display:list-item; float:none; margin:auto; padding:auto; height:auto; width:auto; cursor:auto; list-style:decimal outside none; background-image:none;  }

#tab-1 h1 { font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:36px; }
#tab-1 h2 { font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:24px; }
#tab-1 h3 { font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:18px;  }
#tab-1 h4 { font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:14px; }
#tab-1 p { font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:12px; }

#tab-2 h1 { font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:36px; }
#tab-2 h2 { font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:24px; }
#tab-2 h3 { font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:18px;  }
#tab-2 h4 { font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:14px; }
#tab-2 p { font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:12px; }

#tab-3 h1 { font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:36px; }
#tab-3 h2 { font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:24px; }
#tab-3 h3 { font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:18px;  }
#tab-3 h4 { font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:14px; }
#tab-3 p { font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:12px; }

#tab-4 h1 { font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:36px; }
#tab-4 h2 { font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:24px; }
#tab-4 h3 { font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:18px;  }
#tab-4 h4 { font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:14px; }
#tab-4 p { font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:12px; }

#tab-5 h1 { font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:36px; }
#tab-5 h2 { font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:24px; }
#tab-5 h3 { font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:18px;  }
#tab-5 h4 { font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:14px; }
#tab-5 p { font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:12px; }

.tabs2 input[type=radio] {
          position: absolute;
          top: -9999px;
          left: -9999px;
}
.tabs2 {
        width: 850px;
        float: none;
        list-style: none;
        position: relative;
        padding: 0;
        margin: 75px auto;
}
.tabs2 li{
        float: left;
}
.tabs2 label {
          display: block;
          padding: 10px 20px;
          border-radius: 2px 2px 0 0;
          color: #08C;
          font-size: 24px;
          font-weight: normal;
          font-family: 'Lily Script One', helveti;
          background: rgba(255,255,255,0.2);
          cursor: pointer;
          position: relative;
          top: 3px;
          -webkit-transition: all 0.2s ease-in-out;
          -moz-transition: all 0.2s ease-in-out;
          -o-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out;
}
.tabs2 label:hover {
        background: rgba(255,255,255,0.5);
        top: 0;
}
       
[id^=tab]:checked + label {
        background: #08C;
        color: white;
        top: 0;
}
       
[id^=tab]:checked ~ [id^=tab-content] {
          display: block;
}
.tab-content{
        z-index: 2;
        display: none;
        text-align: left;
        width: 100%;
        font-size: 20px;
        line-height: 140%;
        padding-top: 10px;
        background: #08C;
        padding: 15px;
        color: white;
        position: absolute;
        top: 53px;
        left: 0;
        box-sizing: border-box;
        -webkit-animation-duration: 0.5s;
        -o-animation-duration: 0.5s;
        -moz-animation-duration: 0.5s;
        animation-duration: 0.5s;
}
</style><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;">
<tbody><tr>
	<td colspan="2">	</td>
</tr><tr><td width="460px">
	<table id="countergrid">
		<tbody><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;">&nbsp;£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>
			
		
	</tr></tbody></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 style="width:931px; position: relative; top: 54%; margin-top: -6%; " cellpadding="0">
				<tbody><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=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 src="http://ukdesignbay.co.uk/template1/wp-content/themes/maestro/assets/images/pinterest.png" title="Pin It" border="0"></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>
			</tbody></table>
		</td></tr>
<tr>
		<td colspan="2">
			<table style="width:928px; text-align:left; margin-left:auto; margin-right:auto;">
				<tbody><tr>
					<td style="max-width:926px; overflow:none;">
						<div>
							<ul id="tabtable" class="tabs2">
								<li>
									<input type="radio" checked name="tabs" id="tab1">
                                                                        <label for="tab1">1 - Choose A Template</label>
									<div id="tab-content1" class="tab-content animated fadeIn">
                                                        Just decide what template you want to use to sell your stuff and buy it
									</div>
								</li>
								<li>
                                                                        <input type="radio" name="tabs" id="tab2">
                                                                        <label for="tab2">2 - Easily Customise It</label>
                                                                        <div id="tab-content2" class="tab-content animated fadeIn">
                                                        Your will receive information to sign into your new account where you can easily view, edit and manage your template -- No techy knowledge required!
                                                                         </div>
                                                                </li>
                                                                <li>
                                                                        <input type="radio" name="tabs" id="tab3">
                                                                        <label for="tab3">3 - Enjoy Your Free Hosting</label>
                                                                        <div id="tab-content3" class="tab-content animated fadeIn">
                                                        Just copy and paste the code generated into ebay. You can now host all your images free on your personal template account.
                                                                        </div>
                                                                </li>
						</div>
					</td>
				</tr>
			</tbody></table>
		</td>
	</tr>
</tbody></table>
		
	

[ralphm]

There’s a cleaner way to do tabs just with CSS, as shown here: http://www.sitepoint.com/css3-tabs-using-target-selector/

Not sure how compatible each method is with older browsers.

[ot]BTW, have a look at this post for the proper way to post a code sample:

Forum Posting Basics

[/ot]

[hantaah]

@ralph_m

There’s a cleaner way to do tabs just with CSS, as shown here: http://www.sitepoint.com/css3-tabs-using-target-selector/

Not sure how compatible each method is with older browsers.

[ot]BTW, have a look at this post for the proper way to post a code sample:
http://www.sitepoint.com/forums/showthread.php?1041498-Forum-Posting-Basics&p=5406274&viewfull=1#post5406274
[/ot]

Ok Lets give each one a go. I created some tabs fromthat link you gave and I created an account with codepen and I have this:

I’m having trouble styleing the content area and getting it to line up. What am I doing wrong?

[hantaah]

also seems to be some issue withthe tabs swtching?

[ralphm]

Seems to work OK to me. Where are you seeing the problem?

[hantaah]

@ralph_m

Seems to work OK to me. Where are you seeing the problem?

the tabs don’t swtich between each other

[ralphm]

It’s working for me in chrome and safari, so what are you viewing it in?

[hantaah]

that’s wiered! I’ve tried it in chrome and firefox. When I’m clicking on the tabs in codepen the preview panel just goes blank

[hantaah]

I see it works in my komodo edit. what could this be and what should I do to fix it? As far as I’m aware my browsers are up to date but does this mean it won’t work unless the persons browser is the latest?

[rinaldo123]

Hey, there are plenty links in Google that provide ebay layouts. Some are even free! Type “free ebay layout” and you fill find plenty sources with no JS!

[ronpat]

@hantaah

that’s wiered! I’ve tried it in chrome and firefox. When I’m clicking on the tabs in codepen the preview panel just goes blank

Same here. Please be sure to post if you find the probem. I’d like to know, too.