Portada | Monotemáticos | Secciones | Desarrolladores | Comunidad | Servicios | Servicios profesionales
Desde 0 | HTML | CSS | ASP | PHP | AJAX | Javascript | Promoción de webs | Rentabilidad de webs
Directorio | Manuales | Scripts | FAQs | Programas | Artículos Copyleft | Actualidad | La Cosecha | Colabora
Registrarse | Vuestras páginas | Foros del web | Lista de correo | Boletín de novedades
Generador METAs | Compras | Busca cursos
Alojamiento | Dominios.es | Micropagos SMS | Buscadores | Patentes, marcas | Creación web | Multimedia | Videos
Desarrollo Freelance | Buscar proyectos | Buscar profesionales | Solicitar desarrollo
ARTICULO: Maquetación de un recuadro con pestañas con CSS

 Se muestran 3 comentarios sin revisar

Anonimo  22/3/08 
Ya que usáis la propiedad left en la listas, deberéis añadir la propiedad

<strong>overflow:hidden;</strong> para englobar cualquier elemento flotante de dentro ;)

1 salu2!

Hernán  27/3/08 
No funciona en Mozilla Firefox 2.0.0.8

Carles  28/3/08 
He añadido un javaScript para controlar la navegación entre las distintas pestañas y no tener que recargar.

<html>
<head>
<style type="text/css">
.pestanas{
width: 350px;
}
.pestanas ul{
margin:0px;
padding:0px;
list-style: none;
}
.pestanas li{
float:left;
margin:0px 6px 0px 0px;
padding:4px 6px 4px 6px;
background-color: #999999;
color: #eeeeee;
font-size:8pt;
}
li.pestanaseleccionada{
background-color: #333366;
color: #ffffff;
font-weight: bold;
}
.cuerpopestanas{
background-color: #333366;
color: ffffff;
clear:both;
margin:0px;
padding:4px;
height: 300px;
overflow: auto;
}
</style>
<script language="JavaScript">
function cambioPestana(idPestana, visible)
{
if (visible)
{
this.document.getElementById('pest'+idPestana).style.display = 'block';
this.document.getElementById('tit'+idPestana).className = 'pestanaseleccionada';
}
else
{
this.document.getElementById('pest'+idPestana).style.display = 'none';
this.document.getElementById('tit'+idPestana).className = '';
}
}

function actualizarPestanas(idPest)
{
cambioPestana(idPest, true);

var lstTags = this.document.getElementsByTagName('div');
for(i=0;i<lstTags.length;i++)
{
var nomPestAux = lstTags[i].id;

if (nomPestAux.substring(0, 4) == 'pest' && nomPestAux != 'pest'+idPest)
{
var idPestAux = nomPestAux.substring(4, nomPestAux.length);
cambioPestana(idPestAux, false);
}
}
}


</script>
</head>
<body>

<div class="interfazpestanas">
<div class="pestanas">
<ul>
<li id="tit1" onClick="JavaScript: actualizarPestanas('1');">Opción 1</li>
<li id="tit2" onClick="JavaScript: actualizarPestanas('2');">Opción 2</a></li>
<li id="tit3" onClick="JavaScript: actualizarPestanas('3');">Opción 3</li>
</ul>
<div class="cuerpopestanas" id="pest1" >
Esto es el cuerpo de las pestañas?1
</div>
<div class="cuerpopestanas" id="pest2">
Esto es el cuerpo de las pestañas?2
</div>
<div class="cuerpopestanas" id="pest3">
Esto es el cuerpo de las pestañas?3
</div>
</div>
</div>

<script language="JavaScript">
actualizarPestanas('1');
</script>

</body>
</html>
Saludos

Ver el articulo / faq completoVer el articulo y todos sus comentarios
Añadir un comentario al artículo Añadir un comentario del artículo
  Ir arriba

Comentarios no revisados de:

+ Maquetación de un recuadro con pestañas con CSS
DesarrolloWeb.com | Copyright | Anunciese | Acerca de | Datos legales | Contacta | Por GuiarteMultimedia