Foros del Web » Creando para Internet » CSS »

Ayuda: meter en tabla....este css

Estas en el tema de Ayuda: meter en tabla....este css en el foro de CSS en Foros del Web. Hola foristas, tengo un problemilla. Encontré este maravilloso código en www.lawebdelrpogramador.com que es un scritp con css para hacer el efecto de pestañas en un ...
  #1 (permalink)  
Antiguo 03/10/2007, 10:02
Avatar de admoro  
Fecha de Ingreso: agosto-2005
Ubicación: Prov. de Bs As. Argentina
Mensajes: 435
Antigüedad: 18 años, 6 meses
Puntos: 3
Ayuda: meter en tabla....este css

Hola foristas, tengo un problemilla. Encontré este maravilloso código en www.lawebdelrpogramador.com que es un scritp con css para hacer el efecto de pestañas en un página, pero al colocarlo me desarme el resto de la página.
¿Cómo puedo hacer para que quede dentro de una tabla de, por ejempplo, 540px de ancho? es decir, lo que busco es colocarlo en un lugar y que quede fijo, sin que me desarme el resto....es que no sé hacerlo.
Muchas gracas como siempre!!!
Sdos
Admoro

<style type="text/css">
div {clear:both;display:table;border:1px solid}
span {float:left;padding:0 5px 0 5px;}
</style>

<script type="text/javascript">
<!--
function seleccion(opc)
{
//escondemos todos los contenidos
document.getElementById("op1").style.display="none ";
document.getElementById("op2").style.display="none ";
document.getElementById("op3").style.display="none ";
switch(opc)
{
case 1:
//mostramos elcontenido de la primera opcion
document.getElementById("op1").style.display="bloc k";
break;
case 2:
//mostramos elcontenido de la segunda opcion
document.getElementById("op2").style.display="bloc k";
break;
case 3:
//mostramos elcontenido de la tercera opcion
document.getElementById("op3").style.display="bloc k";
break;
}
}
//-->
</script>

</head>

<body>
<h1>Pestañas con CSS y JavaScript</h1>
<h5>Ejemplo de la utilización de pestañas sin recargar la web, utilizando capas y javascript</h5>

<!-- pestañas -->
<div>
<span style="border-right:1px solid;"><a href='javascript:seleccion(1);'>Opción 1</a></span>
<span style="border-right:1px solid;"><a href='javascript:seleccion(2);'>Opción 2</a></span>
<span><a href='javascript:seleccion(3);'>Opción 3</a></span>
</div>

<!-- contenido de las pestañas -->
<div id="op1" style="display:block;width:400px;height:200px;">
Texto opción 1
</div>
<div id="op2" style="display:none;width:400px;height:200px;">
Texto opción 2
</div>
<div id="op3" style="display:none;width:400px;height:200px;">
Texto opción 3
</div>

<br /><p style='clear:both;text-align:center'><a href="http://www.lawebdelprogramador.com"> http://www.lawebdelprogramador.com</a></p>
</body>
  #2 (permalink)  
Antiguo 03/10/2007, 10:36
 
Fecha de Ingreso: abril-2005
Ubicación: chihuahua Mexico
Mensajes: 49
Antigüedad: 18 años, 11 meses
Puntos: 0
Re: Ayuda: meter en tabla....este css

Ps si lo metes en una columna todo funiona creo

<table>
<tr>
<td>

<span style="border-right:1px solid;"><a href='javascript:seleccion(1);'>Opción 1</a></span>
<span style="border-right:1px solid;"><a href='javascript:seleccion(2);'>Opción 2</a></span>
<span><a href='javascript:seleccion(3);'>Opción 3</a></span>
</div>

<!-- contenido de las pestañas -->
<div id="op1" style="display:block;width:400px;height:200px;">
Texto opción 1
</div>
<div id="op2" style="display:none;width:400px;height:200px;">
Texto opción 2
</div>
<div id="op3" style="display:none;width:400px;height:200px;">
Texto opción 3
</div>
</td>
</tr>
</table>
  #3 (permalink)  
Antiguo 03/10/2007, 11:01
Avatar de admoro  
Fecha de Ingreso: agosto-2005
Ubicación: Prov. de Bs As. Argentina
Mensajes: 435
Antigüedad: 18 años, 6 meses
Puntos: 3
Re: Ayuda: meter en tabla....este css

No sé porqué, pero si meto el script más el css en una tabla se me desborda todo....no logro hacerlo correr.
Gracias
  #4 (permalink)  
Antiguo 04/10/2007, 18:18
 
Fecha de Ingreso: abril-2005
Ubicación: chihuahua Mexico
Mensajes: 49
Antigüedad: 18 años, 11 meses
Puntos: 0
Re: Ayuda: meter en tabla....este css

Haber pasate mas codigo pk a mi si me jala
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:34.