Hola, soy nuevo en css y estoy diseñando una pagina donde se puedan realizar consultas en una base de datos. La forma de mi menu es la siguiente:

consulta por datos personales
cuadro para introducir el nombre
cuadro para introducir el apellido paterno
cuadro para introducir el apellido materno

consulta por numero de nomina
cuadro para introducir el numero de nomina

Y asi sucesivamente...

Me gustaria que al hacer click en el cuadro de consulta por datos personales, se desplegaran todas sus opciones(nombre,materno,paterno..) y asi con todos,y no se viera tan llena la pagina.

Lo he esta intentando con capas con la propiedad height, pero no logro hacer nada, no se si sea debido a que utilizo tablas.

Gracias..

masterboy6666 · #2 (**permalink**) 06/01/2005, 11:35

Hola
Revisando el foro, encontre que Tunait tenia algo parecido en su pagina web(menu contratil).

Gracias.

masterboy6666 · #3 (**permalink**) 06/01/2005, 12:53

He hecho lo siguiente:
Me podrian dar una sugerencias, por que repito yo soy super nuevo css

<html>
<head>
<style>
.abierto
{
width: 100%;
font-family: Tahoma, Verdana, Arial;
font-size: 12px;
font-weight: bold;
padding: 0;
}
.cerrado
{
display: none;
height: 0;
padding:0;
}

</style>
<script>

function mostrar_ocultar(id)
{
if(document.getElementById(id).className=='abierto ')
document.getElementById(id).className='cerrado';
else
document.getElementById(id).className='abierto';
}
function cursor(a)
{
a.style.cursor='hand';
}
function manita(a)
{
a.style.cursor='default';
}
</script>

</head>
<body>
<table border=1 width=230>
<tr>
<td onclick="mostrar_ocultar(10);" onMouseOut="manita(this);" onMouseOver="cursor(this);" align=center>Consulta</td>
</tr>
<tr>
<td>
<div class="cerrado" id=10>
<table border=1>
<tr>
<td align=center>Nombre:</td>
<td align=center><INPUT type="text" id=text1 name=text1></td>
</tr>
</table>
</div>
</table>
<br><br>

<table border=1 width=230>
<tr>
<td onclick="mostrar_ocultar(11);" onMouseOut="manita(this);" onMouseOver="cursor(this);" align=center>Consulta</td>
</tr>
<tr>
<td>
<div class="cerrado" id=11>
<table border=1>
<tr>
<td align=center>Nomina:</td>
<td align=center><INPUT type="text" id=text2 name=text2></td>
</tr>
</table>
</div>
</table>

Gracias a Tunait, por su codigo.

Menu