[SOLUCIONADO] contenedor no funciona al meter contenido

santi2892009 · #1 (**permalink**) 28/12/2013, 02:24

Código HTML:

Ver original<html>
<style>[HIGHLIGHT="CSS"]
/* CSS Tabs jQuery */.contenedor_tab{flo at:left;clear:both; width:600px;padding :0px;margin:0 auto;display:block; background:#ccc;bor der:1px solid #333;-moz-border-radius:0 0 7px 7px;-webkit-border-radius:0 0 7pc 7px;border-radius: 0 0 7px 7px;} ul.tabs{float:left; margin:0;padding:0; list-style:none;height:3 2px;width:600px;mar gin-top:-7px;} ul.tabs li{float:left;margi n:0;padding:0;heigh t:31px;line-height:31px;border: 1px solid #333;margin-bottom:-1px;background:#333 ;overflow:hidden;po sition:relative;bor der:1px solid #333;-moz-border-radius:7px 7px 0 0;-webkit-border-radius:7px 7px 0 0;border-radius: 7px 7px 0 0;} ul.tabs li a{text-decoration:none;col or:#fff;display:blo ck;font-size:13px;padding:0 20px;border:1px solid #fff;outline:none;-moz-border-radius:7px 7px 0 0;-webkit-border-radius:7px 7px 0 0;border-radius: 7px 7px 0 0;} ul.tabs li a:hover{background: #666;} ul.tabs li.activa,ul.tabs li.activa a,ul.tabs li.activa a:hover {color:#333;font-weight:bold;backgro und:#ccc;border-bottom:1px solid #ccc;} .contenido_tab{padd ing:10px;font-size:1.2em;width:58 0px;} .contenido_tab img{margin:0 20px 20px 0;border:1px solid #ddd;padding:5px}

</style>
<head>
<script src='http://ajax.googleapis.com /ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'>
</script>
<script type='text/javascript'>
$(document).ready(function() {
$(".contenido_tab") .hide(); //Ocultar capas
$("ul.tabs li:first").addClass ("activa").show(); //Activar primera pestaña
$(".contenido_tab:f irst").show(); //Mostrar contenido primera pestaña

// Sucesos al hacer click en una pestaña
$("ul.tabs li").click(function () {
$("ul.tabs li").removeClass("a ctiva"); //Borrar todas las clases "activa"
$(this).addClass("a ctiva"); //Añadir clase "activa" a la pestaña seleccionada
$(".contenido_tab") .hide(); //Ocultar todo el contenido de la pestaña
var activatab = $(this).find("a").a ttr("href"); //Leer el valor de href para identificar la pestaña activa $(activatab).fadeIn (); //Visibilidad con efecto fade del contenido activo return false;
});
});
</script>
</head>

<body>
<ul class="tabs"> <li><a href="#tab1">Opción 1</a></li> <li><a href="#tab2">Opción 2</a></li> <li><a href="#tab3">Opción 3</a></li> </ul> <div class="contenedor_t ab"> <div id="tab1" class="contenido_ta b"> CONTENIDO 1 </div> <div id="tab2" class="contenido_ta b"> CONTENIDO2 </div> <div id="tab3" class="contenido_ta b"> CONTENIDO3 </div> </div> <div style="clear:both;" > </div>
</body>
[/HIGHLIGHT]
---------------------
El tema q cuando meto algo de contenido en los contenedores como:

armario
<p><img src"" ...>
Tienda
<p><img src""...>
Tienda
<p><img src""...>
Esto lo poneis donde pone contenido1,contenido2,contenido3 ,no funciona el color,no funciona funciona en el primero y en segundo pero en el tercero no,

Alguna manera de q funcione bien,o en q estoy fallando en el codigo?,muchas gracias