Foros del Web » Creando para Internet » CSS »

Capas ocultas desplazan las demás capas

Estas en el tema de Capas ocultas desplazan las demás capas en el foro de CSS en Foros del Web. Estoy practicando con ocultar y mostrar capas, el problema es que las capas, que tengo ocultas cuando paso el ratón sobre ellas para que me ...
  #1 (permalink)  
Antiguo 26/08/2014, 10:22
Avatar de bichomen  
Fecha de Ingreso: junio-2003
Ubicación: Barcelona y alrededores, España
Mensajes: 877
Antigüedad: 20 años, 9 meses
Puntos: 2
Capas ocultas desplazan las demás capas

Estoy practicando con ocultar y mostrar capas, el problema es que las capas, que tengo ocultas cuando paso el ratón sobre ellas para que me las muestre, en vez mostrármelas en el sitio, me desplaza todas las capas hacía abajo, ?existe alguna propiedad para fijar las capas? Gracias.


bichomen
__________________
"Se sabe con exactitud, con cuanta imprecisión, se sabe algo"
Linux Registered User #320332
  #2 (permalink)  
Antiguo 26/08/2014, 12:27
 
Fecha de Ingreso: mayo-2013
Mensajes: 207
Antigüedad: 10 años, 10 meses
Puntos: 31
Respuesta: Capas ocultas desplazan las demás capas

Creo que para saber lo que dices mejor pon un ejemplo sencillito, porque no me entero.
  #3 (permalink)  
Antiguo 27/08/2014, 03:47
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.725
Antigüedad: 22 años, 1 mes
Puntos: 998
Respuesta: Capas ocultas desplazan las demás capas

supongo que las capas que muestras/ocultas deben de estar posicionadas de forma relativa. PAra que esas capas no te afecten la posición del resto de las capas, usa position:absolute para sacarlas del flujo del documento
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #4 (permalink)  
Antiguo 27/08/2014, 05:08
 
Fecha de Ingreso: marzo-2007
Mensajes: 28
Antigüedad: 17 años
Puntos: 7
Respuesta: Capas ocultas desplazan las demás capas

Hola,

Supongo que el problema que tienes es que quieres superposicionar capas, deberías hacerlo usando posiciones relativas como te comentaban.
Luego es ir cambiado display para que se muestren, o z-index si lo que quieres es que se superposicionen mostrandose siempre. si pones algo de código te podemos ayudar mejor.
Te pongo un ejemplo de superposición usando z-index:

Código:
<style>
    .capa1{
		position:relative;
		background:red;
		width:100px;
		height:100px;
		z-index:10;
	 }
	 
	 .capa2{
		position:relative;
		background:blue;
		width:100px;
		height:100px;
		bottom:50px;
		left:50px;
		z-index:10;
	 }
	 
	 .capa3{
		position:relative;
		background:yellow;
		width:100px;
		height:100px;
		bottom:120px;
		z-index:10;
	 }
	 
	 .capa4{
		position:relative;
		background:black;
		width:100px;
		height:100px;
		bottom:180px;
		left:50px;
		z-index:10;
	 }
	 
	 .capa1:hover, .capa2:hover, .capa3:hover, .capa4:hover{
		z-index:100;
	 }
</style>

    <div class='capa1'></div>
    <div class='capa2'></div>
    <div class='capa3'></div>
    <div class='capa4'></div>
Un saludo.
  #5 (permalink)  
Antiguo 27/08/2014, 05:12
Avatar de bichomen  
Fecha de Ingreso: junio-2003
Ubicación: Barcelona y alrededores, España
Mensajes: 877
Antigüedad: 20 años, 9 meses
Puntos: 2
Respuesta: Capas ocultas desplazan las demás capas

Gracias por las respuestas a ver si esta tarde os subo el código para que entendáis lo que me pasa, hay capas relativas dentro de otras para centrar el texto verticalmente y también hay una capa flotante que tiene que aparecer cuando pasas el ratón por un texto y aparte quiero meter un menú vertical escondido que aparezca al apretar un link o botón.


bichomen
__________________
"Se sabe con exactitud, con cuanta imprecisión, se sabe algo"
Linux Registered User #320332
  #6 (permalink)  
Antiguo 27/08/2014, 12:20
Avatar de bichomen  
Fecha de Ingreso: junio-2003
Ubicación: Barcelona y alrededores, España
Mensajes: 877
Antigüedad: 20 años, 9 meses
Puntos: 2
Respuesta: Capas ocultas desplazan las demás capas

Página principal:

Código PHP:
<html>
<Head>
</head>

<body>

<div id="pagina">
<header>
<div id="cabecera">

        <?php include("extructura/cabecera.php"); ?>        

</div>
</header>

<nav>
<div id="menu">

    <?php include("extructura/menu.php"); ?>

</div>
</nav>

<main>
<article>
<div id="contenido">
    <div id="contenido1">

        <?php include("extructura/contenido.php"); ?>
        
    </div>
</div>
</article>
</main>

<footer>
<div id="pie">
    <div id="pie1">    
        
        <?php include("extructura/pie.php"); ?>

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

</body>
</html>
Pie, donde se muestra la capa flotante al pasar le ratón:
Código PHP:
<div id="condiciones"></div>
<
div onmouseover="showdiv(event, 'Se permite cualquier explotación de la obra, incluyendo una finalidad comercial, así como la creación de obras derivadas, la distribución de las cuales también está permitida sin ninguna restricción.<br><br>En cualquier explotación de la obra autorizada por la licencia hará falta reconocer la autoría.');" onMouseOut="hiddenDiv()">

    <
span class="licencia">b<br>
    
C</span><br>

</
div
El menú que aparecerá al darle a un texto o o imagen, me gustaría que saliera de izquierda a derecha en el lateral izquierdo, como en las apps de android

Código PHP:
<div class="menu">
  <
ul>
    <
li>
      <
a href="example.html">Menu</a>
      <
ul>
        <
li>
          <
a href="example.html">Link</a>
        </
li>
        <
li>
          <
class="menu-nav" href="example.html">Submenu</a>
          <
ul>
            <
li>
              <
class="menu-nav" href="example.html">Submenu</a>
              <
ul>
                <
li><a href="example.html">Link</a></li>
                <
li><a href="example.html">Link</a></li>
                <
li><a href="example.html">Link</a></li>
                <
li><a href="example.html">Link</a></li>
              </
ul>
            </
li>
            <
li><a href="example.html">Link</a></li>
          </
ul>
        </
li>
      </
ul>
    </
li>
  </
ul>
</
div
Javascript para mostrar la capa flotante:

Código HTML:
	function showdiv(event, text)
	{
		//determina un margen de pixels del div al raton
		var margin = 50;

		//La variable IE determina si estamos utilizando IE
		var IE = document.all?true:false;

		var tempX = 0;
		var tempY = 0;

		//document.body.clientHeight = devuelve la altura del body
		if(IE)
		{ //para IE
			IE6=navigator.userAgent.toLowerCase().indexOf('msie 6');
			IE7=navigator.userAgent.toLowerCase().indexOf('msie 7');
			//event.y|event.clientY = devuelve la posicion en relacion a la parte superior visible del navegador
			//event.screenY = devuelve la posicion del cursor en relaciona la parte superior de la pantalla
			//event.offsetY = devuelve la posicion del mouse en relacion a la posicion superior de la caja donde se ha pulsado

			if(IE6>0 || IE7>0)
			{
				tempX = event.x
				tempY = event.y
				if(window.pageYOffset)
				{
					tempY=(tempY+window.pageYOffset);
					tempX=(tempX+window.pageXOffset);
				}
				else
				{
					tempY=(tempY+Math.max(document.body.scrollTop,document.documentElement.scrollTop));
					tempX=(tempX+Math.max(document.body.scrollLeft,document.documentElement.scrollLeft));
				}
			
			}
			else
			{
		
				IE8
				tempX = event.x
				tempY = event.y
			}
		}
		else
		{ //para netscape
			//window.pageYOffset = devuelve el tamaño en pixels de la parte superior no visible (scroll) de la pagina
			document.captureEvents(Event.MOUSEMOVE);
			//tempX = event.pageX;
			//tempY = event.pageY;
			
			var x = event.pageX;
			var y = event.pageY;

		}

		if (x < 0){x = 0;}
		if (y < 0){y = 0;}

		// Modificamos el contenido de la capa
		document.getElementById('condiciones').innerHTML=text;

		// Posicionamos la capa condiciones
		var tope = parseInt(y) + parseInt(margin); 
		var izquierda = parseInt(x) + parseInt(margin); 
		document.getElementById('condiciones').style.top = (tope)+"px";
		document.getElementById('condiciones').style.left = (izquierda)+"px";
		document.getElementById('condiciones').style.display='block';
		return;
	}

	/*
		Funcion para esconder el div
	*/
	
	function hiddenDiv()
	{
		document.getElementById('condicines').style.display='none';
		return;
	}
Estilos:

Código HTML:
html, body
	{
		margin:0px;
		width:100%;
		font-family: "Roboto-Regular";
	}
	
#pagina
	{
	}
	
#cabecera 
	{		
		text-align: left;
		line-height: 200px;
		background-color: #5677fc;
	}
	
.logo
	{
		font-family: "Roboto-Italic";
		font-size:76px;
		color:#FFF;
	}

.version
	{
		font-family: "Roboto-BoldItalic";
		font-size:18px;
		color:#FFF;
	}
	
#menu
	 {
		background-color:#757575; 
		line-height: 30px;		
	 }
	 
.menu
	{
		color:#FFF; 
		font-family: "Roboto-Bold";
		font-size:12px
	}

#contenido
	{
		text-align: center;       	 
		position: relative;
		height:auto;
		width:auto;
	}
	
#contenido1
	{
		text-align: center;  
		position: relative; 
		width: 80%; 
		height: 80%; 
		top: 10%; 
		left: 10%;
	}
	
#pie
	{
		text-align: center;       	 
		position: relative;	
		background-color: #5677fc;
		height: 200px;
	}
		
#pie1
	{
	text-align: center;
	height: 50px;
	width: 50%;
	top: 25px;
	left: 25%;
	position: relative;
	background-color: #5677fc;
	}
	
.pie
	{
		font-family: "Roboto-Bold";
		font-size: 14px;
		color:#FFF;
	}

.licencia
	{
		font-family: "Licencia-Creative-Commons";
		font-size: 48px;
		color:#FFF;
	}
	
.condiciones
	{
		font-family: "Roboto-Regular";
		font-size: 14px;
		color:#FFF;
	}
	
#condiciones
	{
		position:absolute;
		display:none;
		font-family:Roboto-Regular;
		text-align:center;
		font-size: 14px;
		/*font-size:0.8em;*/
		width:280px;
		border:1px solid #808080;
		background-color:#f1f1f1;
		padding:5px;
	}
	
.menu ul ul 
	{
  		display: none;
	}

.menu li:hover > ul 
	{
  		display: block;
	}

bichomen
__________________
"Se sabe con exactitud, con cuanta imprecisión, se sabe algo"
Linux Registered User #320332
  #7 (permalink)  
Antiguo 27/08/2014, 17:49
 
Fecha de Ingreso: marzo-2011
Ubicación: Oaxaca
Mensajes: 252
Antigüedad: 13 años
Puntos: 17
Respuesta: Capas ocultas desplazan las demás capas

amigo, no me lo tomes a mal, pero ¿no hay alguna idea mejor para hacer ese menu de otra forma?, algo mas sencillo, mas intuitivo para el usuario que mover el raton y se muestre ese menu de esa manera, piensa en tus usuarios que estan visitando tu web desde un dispositivo movil y no tienen hover por que para ellos, eso no existe, replantealo y veras que mas adelante, tus usuarios te lo agradeceran
  #8 (permalink)  
Antiguo 28/08/2014, 00:27
Avatar de bichomen  
Fecha de Ingreso: junio-2003
Ubicación: Barcelona y alrededores, España
Mensajes: 877
Antigüedad: 20 años, 9 meses
Puntos: 2
Respuesta: Capas ocultas desplazan las demás capas

Cita:
Iniciado por juangemelo01 Ver Mensaje
amigo, no me lo tomes a mal, pero ¿no hay alguna idea mejor para hacer ese menu de otra forma?, algo mas sencillo, mas intuitivo para el usuario que mover el raton y se muestre ese menu de esa manera, piensa en tus usuarios que estan visitando tu web desde un dispositivo movil y no tienen hover por que para ellos, eso no existe, replantealo y veras que mas adelante, tus usuarios te lo agradeceran
El menú no tiene por que ser ese, ni de esa forma, como ya he dicho me gustaría que se abriera de forma como se abren los menús laterales en los móviles, por otro lado la web es una web personal sin mucha ambición, si no se ve en móviles, no me preocupa mucho, si se puede ver mejor, pero creo que eso ya implica tecnologías como Java. Mi problema, es como hacer que las capas no se desplacen como lo hacen ahora, también me gustaría que la capa del pie, la de abajo, siempre quedara anclada al margen inferior del navegador siendo la capa de contenido la que rediminsionarse según el tamaño de la ventana, no pido nada del otro mundo, muchas webs funcionan de esta manera, simplemente que no se como trabajar con capas.


bichomen
__________________
"Se sabe con exactitud, con cuanta imprecisión, se sabe algo"
Linux Registered User #320332
  #9 (permalink)  
Antiguo 28/08/2014, 03:38
 
Fecha de Ingreso: marzo-2007
Mensajes: 28
Antigüedad: 17 años
Puntos: 7
Respuesta: Capas ocultas desplazan las demás capas

Hola,

No tienes porque utilizar javascript para eso, no te compliques tanto la vida. Puedes hacer todo con CSS. A ver si te sirve esto como ejemplo:

Código:
<style>

	.mensaje_oculto{
		background:red;
		height:50px;
	}
	
	.texto_aviso:hover .texto_oculto{
		display:block;
	}
	
	.texto_oculto{
		background-color: #F1F1F1;
		border: 1px solid #808080;
		display: none;
		font-family: Roboto-Regular;
		font-size: 14px;
		padding: 5px;
		position: relative;
		left:50px;
		text-align: center;
		width: 280px;
	}
	
</style>


</head>

<body>

<div class="mensaje_oculto">
	<div class='texto_aviso'>
		<p>Ver texto oculto</p>
		<p class='texto_oculto'>Se permite cualquier explotación de la obra, incluyendo una finalidad comercial, así como la creación de obras derivadas, la distribución de las cuales también está permitida sin ninguna restricción.<br><br>En cualquier explotación de la obra autorizada por la licencia hará falta reconocer la autoría.</p>
	</div>
	
</div>
La clave está en meter el aviso oculto dentro de otro div, que cuando hagas hover se muestre (.texto_aviso:hover .texto_oculto)

Un saludo.
  #10 (permalink)  
Antiguo 28/08/2014, 11:28
Avatar de bichomen  
Fecha de Ingreso: junio-2003
Ubicación: Barcelona y alrededores, España
Mensajes: 877
Antigüedad: 20 años, 9 meses
Puntos: 2
Respuesta: Capas ocultas desplazan las demás capas

Muchas gracias djsampe, con eso soluciono uno de los problemas que tenía de mostrar u ocultar una capa, pero continuo teniendo el problema con el menú, pero supongo que es aplicar este efecto al menú.

Mi otro problema es como hacer que el footer se mantenga siempre abajo pegado al margen inferior, independientemente de las dimensiones de la ventana.


bichomen
__________________
"Se sabe con exactitud, con cuanta imprecisión, se sabe algo"
Linux Registered User #320332
  #11 (permalink)  
Antiguo 28/08/2014, 13:41
 
Fecha de Ingreso: marzo-2007
Mensajes: 28
Antigüedad: 17 años
Puntos: 7
Respuesta: Capas ocultas desplazan las demás capas

Ponle al footer position:fixed y bottom:0;
De esta forma te aseguras que quede siempre fijo en la parte baja.

Un saludo.
  #12 (permalink)  
Antiguo 11/09/2014, 09:51
Avatar de bichomen  
Fecha de Ingreso: junio-2003
Ubicación: Barcelona y alrededores, España
Mensajes: 877
Antigüedad: 20 años, 9 meses
Puntos: 2
Respuesta: Capas ocultas desplazan las demás capas

Hola, poniendo footer position:fixed y bottom:0, se queda el footer pegado abajo, pero hace un efecto raro, quiero decir, cuando la parte correspondiente al article, junto con el header, el nav y el footer, supera el alto del navegador aparece la barra vertical a la derecha y todo se va desplazando (el article, el header, y el nav) pero el footer, se queda fijo, estático siempre mostrándose, no se desplaza la parte de article va apareciendo de debajo del footer y es un efecto que no me gusta, si el article es muy largo el footer no tendría que verse, hasta que llegase hasta el final del article.

No se si me he explicado.


bichomen
__________________
"Se sabe con exactitud, con cuanta imprecisión, se sabe algo"
Linux Registered User #320332

Etiquetas: capas, ocultas
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 07:32.