Foros del Web » Creando para Internet » CSS »

capa escondida mueve todo

Estas en el tema de capa escondida mueve todo en el foro de CSS en Foros del Web. hola a todos queria preguntarles como hacer para que no se mueva todo lo que esta debajo de un div que esta escondido (DISPLAY EN ...
  #1 (permalink)  
Antiguo 14/10/2010, 13:43
 
Fecha de Ingreso: septiembre-2010
Mensajes: 19
Antigüedad: 7 años, 3 meses
Puntos: 0
capa escondida mueve todo

hola a todos queria preguntarles como hacer para que no se mueva todo lo que esta debajo de un div que esta escondido (DISPLAY EN NONE) y al pasar el mouse por arriba de un enlace aparece(DISPLAY EN BLOCK) este DIV seria un DIV de login donde hay un formulario y adentro una tabla cuyas filas son :la primera con dos campos
a) USUARIO
b)INPUT TEXT

y la segunda fila con los campos:
a) CONTRASEÑA
b) INPUT PASSWORD

aca el codigo:


#flecha{
position:relative;
top:8px;
}
#enlacelogin:hover{
text-decoration:underline;
}

#escondido{
width:200px;
height:100px;
background:steelblue;
color:#fff;
display:none;
}

#lineausuario{
position:relative;
left:-80px;
}




</style>
<script type="text/javascript">
var color = 0;
var suma = 10;
function aparecer(){
var obj = document.getElementById('escondido');
obj.style.display = "block";
color += suma;
if (!(color>=110)){
obj.style.filter = 'alpha(opacity='+color+')';
obj.style.opacity = color /100;
obj.style.MozOpacity = color /100;
obj.style.KHTMLOpacity = color /100;
window.setTimeout ("aparecer();", 100);
}
}
function desvanecer() {
var obj2 = document.getElementById('escondido');
color -= suma;
if (!(color <=-10)){
obj2.style.filter = 'alpha(opacity='+color+')';
obj2.style.opacity = color /100;
obj2.style.MozOpacity = color /100;
obj2.style.KHTMLOpacity = color /100;
window.setTimeout ("desvanecer();", 100);
}
}

function llama(){
if (color<=0){
aparecer();
}
else {
desvanecer();
}
}
</script>

(aqui la llamada)

<span id="lineausuario"><img src="iconousuario.gif"/>&nbsp&nbsp <a id="enlacelogin" href="" target="_blank" onmouseover="llama()">Iniciar Sesion<img id="flecha" src="flechaAbajo.gif" /> </a></span>
<div id="escondido">
<form method="post" name="flogin" action="">
<table>
<tr>
<td>Usuario</td>&nbsp;<td><input type="text" /></td>
</tr>

</table>


</form>
</div>


(aqui hay otro div con posicion relativa, que se baja tb cuando aparece el div escondido)


espero sus respuestas como siempre
  #2 (permalink)  
Antiguo 15/10/2010, 03:32
 
Fecha de Ingreso: septiembre-2010
Ubicación: http://nomenrecordo.blogspot.com/
Mensajes: 111
Antigüedad: 7 años, 2 meses
Puntos: 1
Respuesta: capa escondida mueve todo

Instalate el firebug en Firefox y ve probando combinaciones, la verdad es que no le se ver una solución :S
  #3 (permalink)  
Antiguo 15/10/2010, 04:02
 
Fecha de Ingreso: enero-2002
Mensajes: 182
Antigüedad: 15 años, 10 meses
Puntos: 0
Respuesta: capa escondida mueve todo

Al tener posición relativa se desplaza pq depende de la posición de las demas capas en la presentación, dale una posición absoluta y dale también un z-index menor que la capa "escondido". Un saludo.

Etiquetas: mueve, todo, capas
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 03:45.