Foros del Web » Creando para Internet » Diseño web »

Situar DIV Flotante

Estas en el tema de Situar DIV Flotante en el foro de Diseño web en Foros del Web. Hola, uso el siguiente codigo para mostrar y ocultar un Div Flotante: JAVASCRIPT : Código PHP: function  mostrardiv ( dive ) {      div  =  document ...
  #1 (permalink)  
Antiguo 08/05/2009, 04:23
 
Fecha de Ingreso: enero-2005
Ubicación: Barcelona
Mensajes: 1.473
Antigüedad: 12 años, 11 meses
Puntos: 10
Situar DIV Flotante

Hola, uso el siguiente codigo para mostrar y ocultar un Div Flotante:
JAVASCRIPT:
Código PHP:
function mostrardiv(dive) {

    
div document.getElementById(dive);
    
    
div.style.display '';

}

function 
cerrar(dive) {

div document.getElementById(dive);

div.style.display='none';


HTML:

Código HTML:
<div id="mostrarDiv">
<a href="javascript:mostrardiv('divmostrar');">Mostrar</a>
</div>
<div id="divmostrar" style="display:none;">
...
<a href="javascript:cerrar('divmostrar');">Tancar</a>
</div> 
CSS:
Código:
#divmostrar{
	
	position: absolute;
	font-family:Arial;
	font-size:0.8em;
	border:1px solid #808080;
	background-color:#f1f1f1;
}
el caso q al mostrar el div me lo enseña justamente debajo de donde hay el link, me gustaria poder mostrarlo en mitad de la pantalla, es eso posible???

Saludos y gracias de antemano!
__________________
"Cada hombre es el hijo de su propio trabajo"
Miguel de Cervantes Saavedra
"La experiencia es algo que no consigues hasta justo depués de necesitarla"
Laurence Olivier
  #2 (permalink)  
Antiguo 08/05/2009, 04:45
 
Fecha de Ingreso: enero-2005
Ubicación: Barcelona
Mensajes: 1.473
Antigüedad: 12 años, 11 meses
Puntos: 10
Respuesta: Situar DIV Flotante

Bueno, me busque una solucion q me gusta más.

en el CSS le puse medidas y overflow.
Código:
divmostrar{
	
	position: absolute;
        width: 250px;
	height: 300px;
	overflow:auto;
	font-family:Arial;
	font-size:0.8em;
	border:1px solid #808080;
	background-color:#f1f1f1;
}
__________________
"Cada hombre es el hijo de su propio trabajo"
Miguel de Cervantes Saavedra
"La experiencia es algo que no consigues hasta justo depués de necesitarla"
Laurence Olivier
  #3 (permalink)  
Antiguo 08/05/2009, 19:46
 
Fecha de Ingreso: octubre-2004
Mensajes: 289
Antigüedad: 13 años, 2 meses
Puntos: 10
Respuesta: Situar DIV Flotante

Hola sergi_climent

Había entendido en tu primer mensaje de este hilo que querías que el div se abriera en el centro de la pantalla. Con tu segundo css no se consigue eso.

Si te interesa, o para cualquier otro interesado, dejo el código completo que abre una capa en el centro de la pantalla, independientemente de la resolución del monitor.

Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">

<
head>
<
meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<
title>Abrir capa en el centro de la pantalla</title>
<
script type="text/javascript">
function 
mostrardiv(post) { 
    
div document.getElementById(post); 
    
div.style.display ''


function 
cerrar(post) { 
    
div document.getElementById(post); 
    
div.style.display='none'
}
</script>
<style type="text/css">
#divmostrar {
    position: absolute;
    width: 250px;
    height: 300px;
    margin-left: -125px;
    margin-top: -150px;
    left: 50%;
    top: 50%;
    overflow: auto;
    font-family: Arial;
    font-size: 12px;
    border: 1px solid #808080;
    background-color: #f1f1f1;
    padding: 6px;
    text-align: left;
}
#close {
    position: absolute;
    bottom: 10px;
    left: 0px;
    width: 248px;
    text-align: center;
}
</style>
</head>

<body>

<p><a href="javascript:mostrardiv('divmostrar');">Mostrar</a></p>

<div id="divmostrar" style="display: none;">
    <p>Contenido de la capa</p>
    <span id="close"><a href="javascript:cerrar('divmostrar');">Cerrar</a></span>
</div>

</body>
</html> 
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 12:55.