Mostar/Ocutar DIV

fdrfdr · #1 (**permalink**) 12/11/2009, 16:00

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>

fdrfdr · #2 (**permalink**) 12/11/2009, 16:00

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.

Impostor · #3 (**permalink**) 12/11/2009, 16:13

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

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

Saludos¡¡

cristian_cena · #4 (**permalink**) 13/11/2009, 03:39

Cita:

Iniciado por fdrfdr

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

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

...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

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

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.