Foros del Web » Creando para Internet » CSS »

Mostar/Ocutar DIV

Estas en el tema de Mostar/Ocutar DIV en el foro de CSS en Foros del Web. Wenas, Toy con una pagina web, y voy sobre la marcha programandola. Una de las cosas que estoy intentando es la de ocultar, mostar capas. ...
  #1 (permalink)  
Antiguo 12/11/2009, 16:00
 
Fecha de Ingreso: octubre-2009
Mensajes: 19
Antigüedad: 8 años, 2 meses
Puntos: 0
Mostar/Ocutar DIV

Wenas,

Toy con una pagina web, y voy sobre la marcha programandola. Una de las cosas que estoy intentando es la de ocultar, mostar capas.

Es algo igualito a lo de marca, pero el unico problema que tengo son.

1 que tengo repeticiones de codigo, sobre todo en javascritp, como evitarlo?

2, que cuando se entra en el dreamweaver, la capa esta desplazada de su sitio, pero en el navegador, se ve bien, y funciona correctamente.

Aqui el codigo.

Código HTML:
#bordeA{ border-right:2px solid #000000;
	border-bottom: 2px solid #000000;
	padding:5px;
}

#bordeB{	border-bottom: 2px solid #000000;
	padding: 5px;	
}

#bordeC{ border-right:2px solid #000000;
	padding: 5px;
}

#bordeD{ padding: 5px;
}


.bordemarcado{ font-weight: bold;
	color: #FF0000;
}

.sepatxt{	font-size: 12px;}

#agendanotis
{
	position:relative;
	background-color:#F2EFD6;
	width: 242px; 
	height: 260px;
}

.capaprin{
	visibility:visible;
	position:absolute;
	width:98%;
}
.capaocul{
	visibility:hidden;
	position:absolute;
	width:98%;
}

Código HTML:
 <div id="agendanotis">
						   <div id="capa1" class="capaprin">
						  <table width="100%"  border="0" cellspacing="0" cellpadding="0" class="sepatxt">
						  <tr>
                              <td width="28%" valign="middle" id="bordeA">11/09/2009 </td>
                              <td width="72%" align="left" valign="top" id="bordeB">Impos</td>
                            </tr>
							<tr>
                              <td valign="middle" id="bordeA">12/09/2009 </td>
                              <td align="left" valign="top" id="bordeB">Impo</td>
                            </tr>
                            <tr>
                              <td valign="middle" id="bordeA">19/09/2009 </td>
                              <td align="left" valign="top" id="bordeB">Prese</td>
                            </tr>
                            <tr>
                              <td valign="middle" id="bordeA">26/09/2009 </td>
                              <td align="left" valign="top" id="bordeB">Pr</td>
                            </tr>
                            <tr>
                              <td valign="middle" id="bordeA">03/10/2009</td>
                              <td align="left" valign="top" id="bordeB">Pre</td>
                            </tr>
                            <tr>
                              <td valign="middle" id="bordeA">10/10/2009</td>
                              <td align="left" valign="top" id="bordeB">Pr</td>
                            </tr>
                            <tr>
                              <td valign="middle" id="bordeA">17/10/2009</td>
                              <td align="left" valign="top" id="bordeB">P</td>
                            </tr>
							<tr>
                              <td valign="middle" id="bordeA">24/10/2009</td>
                              <td align="left" valign="top" id="bordeB">P</td>
                            </tr>
                            <tr>
                              <td valign="middle" id="bordeC">31/10/2009</td>
                              <td align="left" valign="top" id="bordeD">P</td>
                            </tr>
							</table>
							</div>
							<!-- Fin Capa 1, Inicio Capa 2-->
							<div id="capa2" class="capaocul">
							<table width="100%"  border="0" cellspacing="0" cellpadding="0" class="sepatxt">
							<tr>
                              <td width="28%" valign="middle" id="bordeA">06/11/2009</td>
                              <td width="72%" align="left" valign="top" id="bordeB">Pr</td>
                            </tr>
							<tr>
                              <td valign="middle" id="bordeA">07/11/2009</td>
                              <td align="left" valign="top" id="bordeB">Pr</td>
                            </tr>
                            <tr>
                              <td valign="middle" id="bordeA">14/11/2009</td>
                              <td align="left" valign="top" id="bordeB">Pr</td>
                            </tr>
                            <tr>
                              <td valign="middle" id="bordeA">21/11/2009 </td>
                              <td align="left" valign="top" id="bordeB">Pr</td>
                            </tr>
                            <tr>
                              <td valign="middle" id="bordeA">28/11/2009</td>
                              <td align="left" valign="top" id="bordeB">P</td>
                            </tr>
                            <tr>
                              <td valign="middle" id="bordeA">05/12/2009 </td>
                              <td align="left" valign="top" id="bordeB">P</td>
                            </tr>
                            <tr>
                              <td valign="middle" id="bordeA">12/12/2009 </td>
                              <td align="left" valign="top" id="bordeB">P</td>
                            </tr>
							<tr>
                              <td  valign="middle" id="bordeA">19/12/2009</td>
                              <td align="left" valign="top" id="bordeB">P</td>
                            </tr>
                            <tr>
                              <td valign="middle" id="bordeC">09/01/2010</td>
                              <td align="left" valign="top" id="bordeD">P</td>
                            </tr>
							</table>
							</div>
							<!--Fin capa 2, inicio Capa 3 -->
							<div id="capa3" class="capaocul"> 
						   <table width="100%"  border="0" cellspacing="0" cellpadding="0" class="sepatxt">
						    <tr>
                              <td width="28%"  valign="middle" id="bordeA">16/01/2010</td>
                              <td width="72%" align="left" valign="top" id="bordeB">Pre</td>
                            </tr>
							<tr>
                              <td valign="middle" id="bordeA">21/01/2010</td>
                              <td align="left" valign="top" id="bordeB">En</td>
                            </tr>
							 <tr class="bordemarcado">
                              <td valign="middle" id="bordeA">23/01/2010</td>
                              <td align="left" valign="top" id="bordeB">Presentaci&oacute;n Gaiata 13</td>
                            </tr>
							 <tr>
                              <td valign="middle" id="bordeA">30/01/2010</td>
                              <td align="left" valign="top" id="bordeB">Pr</td>
                            </tr>
							 <tr>
                              <td valign="middle" id="bordeA">06/02/2010</td>
                              <td align="left" valign="top" id="bordeB">P</td>
                            </tr>
							<tr>
                              <td valign="middle" id="bordeA">13/02/2010</td>
                              <td align="left" valign="top" id="bordeB">Pr</td>
                            </tr>
							<tr>
                              <td valign="middle" id="bordeA">17/02/2010?</td>
                              <td align="left" valign="top" id="bordeB">E</td>
                            </tr>
							<tr>
                              <td valign="middle" id="bordeC">20/02/2010</td>
                              <td align="left" valign="top" id="bordeD">Hom</td>
                            </tr>
							</table>
							</div>
							<!-- Fin capa 3, Inicio capa 4-->
							<div id="capa4" class="capaocul"> 
						   <table width="100%"  border="0" cellspacing="0" cellpadding="0" class="sepatxt">
						    <tr>
							  <td width="28%" valign="middle" id="bordeA">21/02/2010</td>
                              <td width="72%" align="left" valign="top" id="bordeB">Hom</td>
                            </tr>
							<tr>
                              <td valign="middle" id="bordeA">24/01/2010?</td>
                              <td align="left" valign="top" id="bordeB">En</td>
                            </tr>
							 <tr>
                              <td valign="middle" id="bordeA">27/02/2010</td>
                              <td align="left" valign="top" id="bordeB">Ga</td>
                            </tr>
							 <tr>
                              <td valign="middle" id="bordeA">28/02/2010</td>
                              <td align="left" valign="top" id="bordeB">Gal</td>
                            </tr>
							 <tr>
                              <td valign="middle" id="bordeC">06/02/2010</td>
                              <td align="left" valign="top" id="bordeD">In</td>
                            </tr>
							<tr>
								<td id="bordeD">&nbsp;</td>
								<td id="bordeD">&nbsp;</td>
							</tr>
							<tr>
								<td id="bordeD">&nbsp;</td>
								<td id="bordeD">&nbsp;</td>
							</tr>
							<tr>
								<td id="bordeD">&nbsp;</td>
								<td id="bordeD">&nbsp;</td>
							</tr>
							<tr>
								<td id="bordeD">&nbsp;</td>
								<td id="bordeD">&nbsp;</td>
							</tr>
							</table>
							</div>
				         </div>						 
						</td>
                      <td width="6%">&nbsp;</td>
                    </tr>
                </table></td>
              </tr>
			  <tr>
			  <td background="img/sub_menu3.PNG">
			    <table width="99%"  border="0" cellspacing="0" cellpadding="0" class="sepatxt">
                  <tr>
                    <td width="95%">
					<!-- Sacan las capas, numeraciones -->
					<div align="right"><a href="#" onclick="muestra1()" class="bordemarcado">1</a> - <a href="#" onclick="muestra2()">2</a> - <a href="#" onclick="muestra3()">3</a> - <a href="#" onclick="muestra4()">4</a></div>
					</td> 
  #2 (permalink)  
Antiguo 12/11/2009, 16:00
 
Fecha de Ingreso: octubre-2009
Mensajes: 19
Antigüedad: 8 años, 2 meses
Puntos: 0
Respuesta: Mostar/Ocutar DIV

Código PHP:
function muestra1(){
 
document.getElementById('capa1').style.visibility "visible";
 
document.getElementById('capa2').style.visibility "hidden";
 
document.getElementById('capa3').style.visibility "hidden";
 
document.getElementById('capa4').style.visibility "hidden";
}
function 
muestra2(){
 
document.getElementById('capa1').style.visibility "hidden";
 
document.getElementById('capa2').style.visibility "visible";
 
document.getElementById('capa3').style.visibility "hidden";
 
document.getElementById('capa4').style.visibility "hidden";
}
function 
muestra3(){
 
document.getElementById('capa1').style.visibility "hidden";
 
document.getElementById('capa2').style.visibility "hidden";
 
document.getElementById('capa3').style.visibility "visible";
 
document.getElementById('capa4').style.visibility "hidden";
}
function 
muestra4(){
 
document.getElementById('capa1').style.visibility "hidden";
 
document.getElementById('capa2').style.visibility "hidden";
 
document.getElementById('capa3').style.visibility "hidden";
 
document.getElementById('capa4').style.visibility "visible";

Funcionar, me funciona a la perfeccion, las repeticiones seria algo facil de solucionar, pero el posicionamiento dentro de dreamwaver, sera lo mas dificil de consegir.
La intencion seria realizarlo, sin javascript, pero usando el siguiente codigo,

Código HTML:
#agendanotis{
	background-color:#F2EFD6;
	width: 242px; 
	height: 260px;
  	position: absolute; 
  	overflow: hidden;
}

##agendanotis div { width: 100%;
	height: 100%; 
	overflow: auto; 
}
Tiene un error, grafico. Que a la hora de refrescar la pagina, muestra parte del contenido anterior, pero solo unas milesimas se segundo. Solo sucede cuando vas en el sentido contrario, de la capa 4 a la capa 1.
  #3 (permalink)  
Antiguo 12/11/2009, 16:13
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 9 años, 3 meses
Puntos: 20
Respuesta: Mostar/Ocutar DIV

¿Has dicho dreamweaver? Eso es como blasmefar en este foro¡¡¡¡¡

Además, no es recomendable maquetar una página con tablas...

Saludos¡¡
  #4 (permalink)  
Antiguo 13/11/2009, 03:39
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Mostar/Ocutar DIV

Cita:
Iniciado por fdrfdr Ver Mensaje
1 que tengo repeticiones de codigo, sobre todo en javascritp, como evitarlo?
Existe un foro específico para problemas con javascript
Cita:
Iniciado por fdrfdr Ver Mensaje
2, que cuando se entra en el dreamweaver, la capa esta desplazada de su sitio, pero en el navegador, se ve bien, y funciona correctamente.
El modo diseño de dreamweaver deja mucho que desear, puedes usar F12 e ir viendo los cambios que realizas directamente en el navegador.
Cita:
Iniciado por fdrfdr Ver Mensaje
...pero el posicionamiento dentro de dreamwaver, sera lo mas dificil de consegir...
pasa por http://www.librosweb.es/css/capitulo5.html, aquí te explican al detalle como posicionar tus cajas css, con css y no con DW, la sugerencia es que uses DW en modo código y vallas jugando con F12.
Cita:
Iniciado por Impostor Ver Mensaje
Eso es como blasmefar en este foro¡¡¡¡¡
Saludos¡¡
¿Será para tanto? .
Hay un subforo de editores donde se puede debatir este tema.
Cita:
Iniciado por Impostor Ver Mensaje
Además, no es recomendable maquetar una página con tablas...
Supongo que las tablas que muestra fdrfdr fueron creadas por dreamweaver. Pero por si acaso, fdrfdr puedes pasar por http://www.forosdelweb.com/f53/aport...ml-css-648073/ y ver la guia de migración de mikel.

Nos vemos.
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 19:58.