Capas ocultas desplazan las demás capas

bichomen · #1 (**permalink**) 26/08/2014, 10:22

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

alzacon · #2 (**permalink**) 26/08/2014, 12:27

Creo que para saber lo que dices mejor pon un ejemplo sencillito, porque no me entero.

webosiris · #3 (**permalink**) 27/08/2014, 03:47

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

djsampe · #4 (**permalink**) 27/08/2014, 05:08

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.

bichomen · #5 (**permalink**) 27/08/2014, 05:12

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

bichomen · #6 (**permalink**) 27/08/2014, 12:20

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>

          <a class="menu-nav" href="example.html">Submenu</a>

          <ul>

            <li>

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

juangemelo01 · #7 (**permalink**) 27/08/2014, 17:49

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

bichomen · #8 (**permalink**) 28/08/2014, 00:27

Cita:

Iniciado por juangemelo01

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

djsampe · #9 (**permalink**) 28/08/2014, 03:38

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.

bichomen · #10 (**permalink**) 28/08/2014, 11:28

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

djsampe · #11 (**permalink**) 28/08/2014, 13:41

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

Un saludo.

bichomen · #12 (**permalink**) 11/09/2014, 09:51

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