[SOLUCIONADO] Div's bloqueados !!!

[pako1707]

Buenas tardes colegas, hoy vengo con el siguiente problema:

Tengo 3 contenedores en un sitio, quise dejar el primero visible y los otros 2 contenedores agrupados en pestañas... Pero, mis divs aparecen bloqueados sin que puedan realizar su acción... Alguien puede decirme cómo desbloquearlo???



UTILIZO:

Código HTML:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

Código:

	ul.tabs{height:30px;width:100%;margin:0;padding:0;list-style:none}
		.tabs li{float:left;height:30px;background:#f5f5f5;border-radius:6px 6px 0 0}
		.tabs li.selected{background:#fff;border:solid #f5f5f5;border-width:1px 1px 0 1px}
			
			.tabs li a:link,.tabs li a:active,.tabs li a:visited,.tabs li a:hover{line-height:30px;font-size:1.1em;text-decoration:none;display:block;color:#000;padding:0 30px}
			.tabs li.selected a:link,.tabs li.selected a:active,.tabs li.selected a:visited,.tabs li.selected a:hover{font-weight:bold}
			
		div.pestana{width:100%;margin:0;padding:0;border:1px solid #f5f5f5;padding:20px;position:relative;top:-1px;z-index:-1;border-radius:0 0 6px 6px}
			.pestana p{font-size:1em;line-height:100%;margin:0;}

Código HTML:

 <ul class="tabs">
		<li class="selected"><a href="#tab-1">Pesta&ntilde;a 1</a></li>
		<li><a href="#tab-2">Pesta&ntilde;a 2</a></li>
		<li><a href="#tab-3">Pesta&ntilde;a 3</a></li>
	</ul>
	<div class="pestana" id="tab-1">
		<h2>Soy la pesta&ntilde;a 1</h2>
		<p>Lorem ipsum dolor sit amet, impossibile. Elige ipsa quod tamen adnuente rediens eam sed eu fides Concordi fabricata ait. Christus eum ego illum decidat quam dicentes quod eam est in. Eis fictas fundatur sicut in modo cavendum es! Modum cognoscibilis ad quia illum in deinde duas recitare ex auxilium tolle auri eos vero rex in.</p>
	</div>
	<div class="pestana" id="tab-2">
		<h2>Soy la pesta&ntilde;a 2</h2>
		<p>Lorem ipsum dolor sit amet, impossibile. Elige ipsa quod tamen adnuente rediens eam sed eu fides Concordi fabricata ait. Christus eum ego illum decidat quam dicentes quod eam est in. Eis fictas fundatur sicut in modo cavendum es! Modum cognoscibilis ad quia illum in deinde duas recitare ex auxilium tolle auri eos vero rex in.</p>
	</div>
	<div class="pestana" id="tab-3">
		<h2>Soy la pesta&ntilde;a 3</h2>
		<p>Lorem ipsum dolor sit amet, impossibile. Elige ipsa quod tamen adnuente rediens eam sed eu fides Concordi fabricata ait. Christus eum ego illum decidat quam dicentes quod eam est in. Eis fictas fundatur sicut in modo cavendum es! Modum cognoscibilis ad quia illum in deinde duas recitare ex auxilium tolle auri eos vero rex in.</p>
	</div> 

y

Código HTML:

<script>
$(document).ready(function() 
	{
		$('.pestana').hide().eq(0).show();
		$('.tabs li').click(function(e)
		{
			e.preventDefault();
			$('.pestana').hide();
			$('.tabs li').removeClass("selected");
			var id = $(this).find("a").attr("href");
			$(id).fadeToggle();
			$(this).addClass("selected");
		});
	});
</script> 

El código para hacer las pestañas (TABS) lo tomé de:

[URL="http://www.martiniglesias.eu/demos/tabs.html"]http://www.martiniglesias.eu/demos/tabs.html[/URL]

[pako1707]

En div.pestana del CSS eliminé la posición relative y ¡Voalá!, yo mismo solucioné el tema jaja, pensé que era más conflicto con el Jquery, a ver si les sirve esa información para hacer pestañas con div adentro!! Saludos!!