problema con menu dinamico (checkboxs)

rufus · #1 (**permalink**) 04/07/2010, 05:10

hola estoy haciendo la seccion de proveedores de una web que estoy haciendo. Esta consta de un menu con opciones checkbox que al pulsar sobre una opcion muestra una capa (un div) mostrando la informacion de esa opcion seleccionada pero no se que pasa, que no puedo quitar la opcion ni volverla a activar.

Es como sise bloquease la opcion, otra cosa que me hace es que se me selecciona el encabezado <h2> al darle al checkbox pero no cambia de estado. os pongo el codigo completo para ver si alguno me podeis ayudar....

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>abc erotica</title>
<link href="seccionproveedor.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
	background-color:#ffd68e;
 	
}

-->
</style>

<script type='text/javascript' src='formexp.js'></script>
<script>
function expandir_formulario(){
 if (document.f1.expandir.checked){
	xDisplay('capaexpansion', 'block')
 }else{
	xDisplay('capaexpansion', 'none')
 }

}

</script>

</head>

<body>

<div id="contenedor">
<div id="logo">
</div>
<div id="menu">
<ul>
<li><a href="index.php">Inicio</a></li>
<li><a href="index.php">Proveedores</a></li>
<li><a href="index.php">Presupuestos</a></li>
<li><a href="index.php">Distribuidores</a></li>
<li><a href="index.php">Gastos</a></li>
<li><a href="index.php">Beneficios</a></li>
</ul>
</div>
<div id="contenido">
<div id="menucheck">
<form name=f1>
<ul>
<li>Proveedor(insertar):<input type="checkbox" name="expandir" value="1" onClick="expandir_formulario()"></li>
<li>Proveedor(Buscar):<input type="checkbox" name="expandir2" value="1" onClick="expandir_formulario2()"></li>
<li>Proveedor(Modificar):<input type="checkbox" name="expandir3" value="1" onClick="expandir_formulario3()"></li>
<li>Proveedor(Borrar):<input type="checkbox" name="expandir4" value="1" onClick="expandir_formulario4()"></li>
</ul>
</form>
</div>
<div id=capaexpansion>
<h2>Añadir proveedor</h2>
<form method="post" action="insertarprove.php">
<ul>

<li>	Nombre: <input type="text" name="nombre"></li>
	
	<li>email <input type="text" name="email"></li>
	
	
	<li>telefono: <input type="text" name="telefono"></li>


<li>Comentarios:

<textarea cols="40" rows="10" name="comentarios"> </textarea>	
</li>


<li>

<input type="submit" name="enviar">
</li>
</ul>
</form>

</div>
</div>
</div>


</body>
</html>

css:

Código:

@charset "utf-8";
/* CSS Document */
#contenedor {margin:0 auto; width:960px; height:auto;}
#logo{width:960px; height:120px; float:left;}
#menu{width:960px; height:40px; float:left; background-color:#000000; }

#menu ul li {display:inline; font-family:"Courier New", Courier, monospace; font-size:12px; padding-top:-8px; padding-left:54px;}

#menu a {color:#FFFFFF; text-decoration:none; padding-bottom:10px;}

#menu a:hover{color:#ffd68e; text-decoration:underline;}
#contenido{width:960px; height:900px; float:left; background-color:#FFFFFF}

#contenido h2 { margin-left:37px; margin-top:15px;}

#menucheck{width:900px; height:35px; float:left;}

#menucheck ul li {display:inline; }


/*.....capas ke se muestran y ocultan segun checkboxes*/

#capainicio{
	position:relative;
}
#capaexpansion{
	position:relative;
	display:none;

}
#capafinal{
	position:relative;

}

Adler · #2 (**permalink**) 04/07/2010, 07:27

Hola

Ya que no has imprimido la función xDisplay, lo que hecho con document.getElementById('capaexpansion').style.dis play = (document.f1.expandir.checked) ? 'block' : 'none'; y se demostraba que no es un error en el JS por lo que tenía que ser en CSS, si quitas la propiedad float:left; funcionará

Suerte

rufus · #3 (**permalink**) 07/07/2010, 01:21

ya he encontrao el fallo era un </div> esta etiqueta de la capa expansion tenia que ponerla en otro lado

Adler · #4 (**permalink**) 07/07/2010, 07:11

Hola

Cita:

Iniciado por rufus

ya he encontrao el fallo era un </div> esta etiqueta de la capa expansion tenia que ponerla en otro lado

Por curiosidad, ¿donde habría que colocarla?

Suerte