Foros del Web » Creando para Internet » CSS »

Cómo Ocultar y Mostrar capas Usando un Menú?

Estas en el tema de Cómo Ocultar y Mostrar capas Usando un Menú? en el foro de CSS en Foros del Web. Hola soy nuevo en este foro. Estuve tratando de hacer una caja que contenga información y que se maneje con un Menú que al presionar ...
  #1 (permalink)  
Antiguo 18/09/2008, 21:39
 
Fecha de Ingreso: septiembre-2008
Mensajes: 3
Antigüedad: 15 años, 6 meses
Puntos: 0
Sonrisa Cómo Ocultar y Mostrar capas Usando un Menú?

Hola soy nuevo en este foro.
Estuve tratando de hacer una caja que contenga información y que se maneje con un Menú que al presionar un botón nos muestre información dentro de ella.
No hay un tutorial en Internet con CSS pero si varios en JavaScript.
Les muestro el código para que vean lo que estoy haciendo. El que sabe me puede ayudar.



Puede tener Errores

Código HTML:
<html>
<head>
<link href="tabcontent.css" rel="stylesheet" type="text/css">
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" width="560">
<tr>
	<td align="left">
		<div>
		<ul id="navi">
			<li><a class="selected" rel="tcontent1" style="cursor:pointer;"><span>Datos</span></a></li>
			<li><a class="" rel="tcontent2" style="cursor:pointer;"><span>Plan de Estudios</span></a></li>
			<li><a class="" rel="tcontent3" style="cursor:pointer;"><span>Calendarios</span></a></li>
			<li><a class="" rel="tcontent4" style="cursor:pointer;"><span>Promos</span></a></li>
		</ul>
		</div>
		<div style="border-style: solid; border-color: rgb(30, 89, 133); border-width: 10px 2px 2px; clear: left; width: 559px;">
		
			<div style="visibility:visible;" id="tcontent1" class="tabcontent">
			<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
			<tr>
		  	<td align="center" height="300" valign="top">
		    <p>datos</p>
		    </td>
			</tr>
			</table>
			</div>
			<div style="visibility:hidden;" id="tcontent2" class="tabcontent">
			<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
			<tr><td align="center" height="300" valign="top">Plan de Estudios</td></tr>
			</table>
			</div>
			<div style="visibility:hidden;" id="tcontent3" class="tabcontent">
			<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
			<tr><td align="center" height="300" valign="top"><span class="Estilo1">calendarios</span></td>
			</tr>
			</table>
			</div>
			<div style="visibility:hidden;" id="tcontent4" class="tabcontent">
			<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
			<tr><td align="center" height="300" valign="top">Promos</td></tr>
			</table>
			</div>
	</td>
</tr>
</table>
</body>
</html> 
Y el archivo tabcontent.css

Código:
#navi {
	list-style-type:none;/*sin biñeta*/
	margin: 0;/*margen*/
	padding: 0;/*espacio*/
}
/* luego a los elementos de la lista */
#navi li {
	margin: 0px;
	padding:2px;/*Espacio entre objetos*/
	/*border: 1px solid#cccccc;El Borde y Color del Boton*/
	float: left;/*para eliminar el comportamiento de elemento de bloque(salto de linea)*/
	/*NOTA: al aplicar el float, los elementos de la lista se reduciran al minimo tamaño necesario para el texto que contengan.*/

}
#navi li a {
	display:block; /*Convertimos el vínculo en un bloque.*/
	width:100px;
	padding:3px 0;
	text-decoration:none;
	text-align:center;
	font-size:12px;
	color:rgb(30, 89, 133);
	background-image:url('btngris.gif');
	background-position:top center;
	background-repeat:no-repeat;
}
/*Ahora vamos con el hover:*/
#navi li a:hover {
	color: white;
	background-image:url('btnazul.gif');
	background-position:top center;
	background-repeat:no-repeat;
}	
#navi li a.selected {
	color: white;
	background-image:url('btnazul.gif');
	background-position:top center;
	background-repeat:no-repeat;
}

#tcontent1 {
	top: 100px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: red;
	z-index: 1;
	visibility:hidden; /*La capa tcontent1 se muestra al principio*/
}
#tcontent2.tabcontent {
	top: 100px;
	color: red;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	z-index: 2;
	visibility:hidden; /*Queda oculta la capa tcontent2*/
}
#tcontent3.tabcontent {
	top: 100px;
	color: red;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	z-index: 3;
	visibility:hidden; /*Queda oculta la capa tcontent3*/
}
#tcontent4 {
	top: 100px;
	color: red;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	z-index: 4;
	visibility:hidden; /*Queda oculta la capa tcontent4*/
}
.tabcontent {
	display: block;
	text-align: left;
	width: 554px;
	margin: 15px;
}
También con varios errores. No me manejo muy bien con CSS.
La duda que tengo es sobre como al hacer Click sobre un botón nos muestre la capa correspondiente y permanezca en ese estado y al hacer click en otro nos muestre otra información cambiando la anterior en la misma caja.
Pueden corregirlo y hacerme saber sobre los errores que contiene. Espero que se puedan compartir conocimientos y solucionar este ejercicio, ya que nos puede ser útil.
Desde ya muchas gracias.
  #2 (permalink)  
Antiguo 19/09/2008, 10:07
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 16 años
Puntos: 142
Respuesta: Cómo Ocultar y Mostrar capas Usando un Menú?

En las FAQ ya se había visto algo similar de menús desplegables, pero en conclusión se ha dicho que no es recomendado por los extraños efectos que tienen en algunos exploradores.

Si en verdad deseas hacerlo con clic sobre el botón, creo que la solución más óptima es con JavaScript...
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #3 (permalink)  
Antiguo 19/09/2008, 10:17
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Cómo Ocultar y Mostrar capas Usando un Menú?

Si no necesitas que el interior de los bloques tenga texto seleccionable ni enlaces clickables, este ejemplo te puede servir:

http://www.araudi.net/forosdelweb/solapas.html

Si neceitas poder clickar o seleccionar el texto, es ya más complicado por, como dice daPhyre, la diferencia entre navegadores.
__________________
Visita mi nueva web idplus.org
  #4 (permalink)  
Antiguo 21/09/2008, 23:08
 
Fecha de Ingreso: septiembre-2008
Mensajes: 3
Antigüedad: 15 años, 6 meses
Puntos: 0
Respuesta: Cómo Ocultar y Mostrar capas Usando un Menú?

El link que me paso Mikmoro me fue muy útil, me pude fijar en los códigos de fuente de esa página y lo hice a esa manera solucionando el problema que tenia.
Muchisimas GRACIAS por la ayuda.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:09.