Hola, he consultado algunos temas del foro, y he llegado hasta aquí en la página,
de los elementos del menú, quiero que aparezcan en la capa de la derecha a la hora de hacer click, ya todos se ocultan y sólo se muestra 1 al mismo tiempo, el problema es que los va mostrando abajo del que apareció.
dejo mi código agradezco la ayuda....
el archivo
estilos.css
#titulo {background-color: #CCCC66;
height : 100px;
width: 700px;
border:none;
}
#menu {
width: 100px;
height: 400px;
background-color:#006600;
float:left;
}
#contenedor{
width: 700px;
background-color : #ffffff;
margin: auto;
}
#navega {
list-style:none;
margin:0;
padding:0; }
#navega li { margin:2px;
padding:2px;
}
#navega li a {
display:block;
width:100px;
padding:4px 0;
text-decoration:none;
text-align:center;
font-size:11px; color:#FFFFFF;
background-color:#000000;
}
#navega li a:hover {
color:#99CC00;
background-color:#003366;
}
#cont1 {
visibility:visible;
width: 600px;
background-color:#009933;
height: 400px;
float: right;
}
#cont2 {
visibility:hidden;
width: 600px;
background-color:#009933;
height: 400px;
float: right;
}
#cont3 {
visibility:hidden;
width: 600px;
background-color:#009933;
height: 400px;
float: right;
}
#cont4 {
visibility:hidden;
width: 600px;
background-color:#009933;
height: 400px;
float: right;
}
y el archivo index.html
<!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>
<link rel="stylesheet" href="estilos.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Estilos Css</title>
<script type="text/javascript">
function MM_findObj(n, d) {
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_showHideLayers() {
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
</script>
</head>
<body onload="MM_showHideLayers('cont1','','show','cont2 ','','hide','cont3','','hide','cont4','','hide');" >
<div id="contenedor">
<div id="titulo">
Título de la Página
</div>
<div id="menu">
<ul id="navega">
<li><a href="#"onclick="MM_showHideLayers('cont1','','sho w','cont2','','hide','cont3','','hide','cont4','', 'hide');">Inicio</a>
</li>
<li><a href="#"onclick="MM_showHideLayers('cont1','','hid e','cont2','','show','cont3','','hide','cont4','', 'hide');">Opción 1</a>
</li>
<li><a href="#"onclick="MM_showHideLayers('cont1','','hid e','cont2','','hide','cont3','','show','cont4','', 'hide');">Opción 2</a>
</li>
<li><a href="#"onclick="MM_showHideLayers('cont1','','hid e','cont2','','hide','cont3','','hide','cont4','', 'show');">Opción 3</a>
</li>
</ul>
</div>
<div id="cont1">
Inicio
</div>
<div id="cont2">
Contenido 2
</div>
<div id="cont3">
Contenido 3
</div>
<div id="cont4">
Contenido 4
</div>
</div>
</body>
</html>