SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 30
  1. #1
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    549
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    converting jscript tabs to pure html and css

    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:

    Code:
    <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[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 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>

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,596
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    I need them to be pure html / css
    Why? This is really a job for JS.

  3. #3
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    549
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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?

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

    Code:
    <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>

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,596
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by hantaah View Post
    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.

    Quote Originally Posted by hantaah View Post
    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.

  6. #6
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    549
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    yes, I think that seems the only option

    why is ebay so boring?

  7. #7
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by hantaah View Post
    yes, I think that seems the only option

    why is ebay so boring?
    Its to prevent malicious code from running in the users browser.
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  8. #8
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    549
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    ahh I see, do you know of a place that teaches step by step design for ebay?

  9. #9
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    549
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by chris.upjohn View Post
    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?

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

    Code:
    <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[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 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>

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,596
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    There's a cleaner way to do tabs just with CSS, as shown here: http://www.sitepoint.com/css3-tabs-u...rget-selector/

    Not sure how compatible each method is with older browsers.

    Off Topic:

    BTW, have a look at this post for the proper way to post a code sample:
    http://www.sitepoint.com/forums/show...=1#post5406274

  12. #12
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    549
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    There's a cleaner way to do tabs just with CSS, as shown here: http://www.sitepoint.com/css3-tabs-u...rget-selector/

    Not sure how compatible each method is with older browsers.

    Off Topic:

    BTW, have a look at this post for the proper way to post a code sample:
    http://www.sitepoint.com/forums/show...=1#post5406274
    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:

    http://codepen.io/hantaah/pen/BLlja

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

  13. #13
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    549
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    also seems to be some issue withthe tabs swtching?

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,596
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Seems to work OK to me. Where are you seeing the problem?

  15. #15
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    549
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Seems to work OK to me. Where are you seeing the problem?
    the tabs don't swtich between each other

  16. #16
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,596
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    It's working for me in chrome and safari, so what are you viewing it in?

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

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

  19. #19
    SitePoint Member
    Join Date
    Aug 2013
    Location
    Fpolis - SC
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  20. #20
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,222
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by hantaah View Post
    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.

  21. #21
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    549
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    Same here. Please be sure to post if you find the probem. I'd like to know, too.
    @ronpat ; are you seeing the issue too with the tabs? I also posted on a different question on a different forum and they replied with this url, the wiered thing is that the tabs there work:

    http://codepen.io/jiri/full/kHJDe

    but as soon as I place the code from above into my codepen and ebay account I still get the same problem with the tabs not working.

    what's up with that?

  22. #22
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    549
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rinaldo123 View Post
    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!
    None there to my taste. What I want to know is how to make professional designs for ebay and sell them or become an ebay designer

  23. #23
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,596
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by hantaah View Post
    as soon as I place the code from above into my codepen and ebay account I still get the same problem with the tabs not working.
    Does it work for you in this form?

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <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 }
    
    article.newtabs {
    	position: relative;
    	display: block;
    	width: 960px;  
    	height: 15em;
    	margin-top:3em;
    }
    article.newtabs section {  
      width:900px;
    	position: absolute;
    	display: block;		
    	height: 14em;	
    	background-color: #ddd;
    	border-radius: 5px;
    	box-shadow: 0 3px 3px rgba(0,0,0,0.1);
    	background: url(http://ukdesignbay.co.uk/template1/wp-content/themes/maestro/assets/images/tabpanel3.png); 
      background-position: center; 
      background-repeat: no-repeat; 
    	z-index: 0;
    	margin: 0 0 0 14px;
    }
    .tab-content {overflow:auto;height:13em;padding:0 1em;}
    article.newtabs section:first-child{z-index: 1;}
    article.newtabs section h2 {
    	position: absolute;
    	font-size: 18px;
    	font-weight: normal;
    	width: 240px;
    	height: 1.8em;
    	top: -1.8em;
    	left: -2px;
    	padding: 0;
    	margin: 0;
    	color: #999;
    	background-color: #f1f2f3;
    	border-left:2px solid #C6CBD0;
    	border-top:1px solid #C6CBD0;
    	border-right:2px solid #C6CBD0;
    	border-radius: 5px 5px 0 0;
    }
    article.newtabs section:nth-child(2) h2 {left: 248px;}
    article.newtabs section:nth-child(3) h2 {left: 498px;}
    article.newtabs section h2 a {
    	display: block;
    	width: 100%;
    	line-height: 1.8em;
    	text-align: center;
    	text-decoration: none;
    	color: inherit;
    	outline: 0 none;
    }
    article.newtabs section:target,
    article.newtabs section:target h2 {
    	color: #333;
    	background-color: #fff;
    	z-index: 2;
    }
    
    article.newtabs section,
    article.newtabs section h2 {
    	-webkit-transition: all 500ms ease;
    	-moz-transition: all 500ms ease;
    	-ms-transition: all 500ms ease;
    	-o-transition: all 500ms ease;
    	transition: all 500ms ease;
    }
    
    </style>
    </head>
    <body>
    
    <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[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 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;">
    						<article class="newtabs">
    	                                                
                  <section id="newtab1">
    		<h2><a href="#newtab1">1 - Choose A Template</a></h2>
        <div class="tab-content">
    <p>Pick the super modern design that will make you stand out from the crowd and will increase your sales by 33% Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
      Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.                                             </div>        
                                                        
    </p>
    	                                                </section>
    	                                                <section id="newtab2">
    		                                                <h2><a href="#newtab2">2 - Easily Customise It</a></h2>
    	<div class="tab-content">	                                                
        <p>Sign into your very own website to manage, edit and view your template. Simply copy and paste the code generated into ebay to add your listing with your super professional template</p></div>
                  </section>
    	                                                <section id="newtab3">
    		                                                <h2><a href="#newtab3">3 - Enjoy Your Free Hosting</a></h2>
     <div class="tab-content">	
    		                                                <p>Have as many photos or videos to your listing as you want, no extra charge, all hosted by you!</p>
                                                        </div>
    	                                                </section>
                                                    </article>
    					</td>
    				</tr>
    			        </tbody></table>
    		</td>
    	</tr>
    </tbody></table>
    			
    </body>
    </html>

  24. #24
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    549
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Does it work for you in this form?
    Do you mean with the head and body etc included?

    I've tried it but no, it's still the same. If I use the code in komodo edit, it works fine. If I then use the file extention ( ie file:///C:/Users/hantaah/Documents/ukdesignbay/templates/ebay_listing_ukdb2.html#newtab1 ) and open it in my browser it works.

    When I copy and paste it into code pen or ebay listing it doesn't work.

    If I view the codepen or ebay urls's in browseemall ( crossbrowser tester ) still they don't work

    I've listed a test listing on ebay. Is it working for you as it isn't for me?

    http://www.ebay.co.uk/itm/1908881483...84.m1555.l2649

    ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

    Update
    ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

    After re checking the ebay test listing the tabs are working but the style which centres things is not.
    I also have another question about styling.

    I want to put this:

    Code:
    article.newtabs section { min-height: 323px; }
    but when I do it takes the tabs section out of the containing area like this:

    http://codepen.io/hantaah/pen/BLlja

    How is that fixed?

  25. #25
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,596
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by hantaah View Post
    the style which centres things is not...

    it takes the tabs section out of the containing area ... How is that fixed?
    You've lost me on both questions. The layout looks centered to me, and the min-height code seems to work fine to me.


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
  •