Hola Foristas, postee este mensaje en otro subtema, pero no sé si lo hice en el lugar indicado, por eso lo vuelvo a poner en este nuevo espacio. Desde ya, gracias por la constante paciencia y si cometo algún error por favor háganmelo saber. Cordiales. Admoro
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>
