Foros del Web » Creando para Internet » CSS »

Se puede esto con un div ?

Estas en el tema de Se puede esto con un div ? en el foro de CSS en Foros del Web. Buenas, El siguiente código funciona perfectamente, seguramente a alguien le ayude: hay tres divs horizontales, y al redimensionar la ventana y mediante javaScript fuerza a ...
  #1 (permalink)  
Antiguo 30/01/2007, 14:27
 
Fecha de Ingreso: abril-2002
Mensajes: 1.013
Antigüedad: 15 años, 7 meses
Puntos: 8
Se puede esto con un div ?

Buenas,

El siguiente código funciona perfectamente, seguramente a alguien le ayude: hay tres divs horizontales, y al redimensionar la ventana y mediante javaScript fuerza a que el superior y el inferior tengan siempre el mismo alto, cambiando el tamaño del central sólamente y mostrando scroll cuando es necesario.

La duda que tengo es si se puede hacer esto sólo con CSS, dando un porcentaje a los divs superior e inferior, y que se adapte el central.

Gracias

Código:
<html> 
	
	<head>
			<script language="javaScript">
				
				window.onload = function() {
					resize();
				}
				
				//--------------------------------------------------
				
				window.onresize = function() {
					resize();
				}
				
				//--------------------------------------------------

				function resize() 
				{
					
					// alto del documento, menos los altos de los otros div
					alto = document.body.clientHeight - 80 - 80;
					if( alto <= 0 )
						alto = 10;
					
					//alert(alto);
					
					document.getElementById("central").style.height = alto;
					
				}

			</script>
	</head>
	
	
	
	<body style="margin:0;overflow:hidden;">
		
      <div style="height:80px;background-color:yellow;">
      	<span style="font-size:9px;">SUPERIOR</span>
      	<input type="text" value="arriba"/>
      </div>
			
      <div id="central" style="background-color:blue;overflow:auto;">
				central<br/>central<br/>central<br/>central<br/>central<br/>central<br/>central<br/>central<br/>central<br/>central<br/>
				central<br/>central<br/>central<br/>central<br/>central<br/>central<br/>central<br/>central<br/>central<br/>central<br/>
				central<br/>central<br/>central<br/>central<br/>central<br/>central<br/>central<br/>central<br/>central<br/>central<br/>
				central<br/>central<br/>central<br/>central<br/>central<br/>central<br/>central<br/>central<br/>central<br/>central<br/>
			</div>			
			
			<div style="height:80px;background-color:yellow;">
				<span style="font-size:9px;">INFERIOR</span>
				<input type="text" value="abajo"/>
			</div>
						
		</body>
		
</html>
  #2 (permalink)  
Antiguo 30/01/2007, 16:54
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Se puede esto con un div ?

Se puede, y además de forma sencillísima:

Código:
<!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>
  <title>Con CSS</title>
  <style type="text/css">
  #superior, #inferior { height: 80px;
    background-color: rgb(255, 255, 0);
    font-size: 9px;
    }
  #central { background-color: rgb(51, 51, 255);
    }
  </style>
</head>
<body style="margin: 0pt;">
<div id="superior">
SUPERIOR
<input value="arriba" type="text" /></div>
<div id="central">
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
</div>
<div id="inferior">
INFERIOR
<input value="abajo" type="text" /></div>
</body>
</html>
Mikel.
  #3 (permalink)  
Antiguo 30/01/2007, 17:10
 
Fecha de Ingreso: abril-2002
Mensajes: 1.013
Antigüedad: 15 años, 7 meses
Puntos: 8
Re: Se puede esto con un div ?

Mmmm gracias pero no va en FF ni en IE, se ve una buena franja blanca bajo el DIV amarillo inferior, no aparecen las barras de scroll SÓLO en el div azul (el central, no quiero las de la ventana).

Quizás no me expliqué bien, lo que hace el javascript es mostrar siempre visible los DIV amarillos aunque se redimensione la ventana, modificándose SÓLO el alto del DIV azul


Gracias de nuevo
  #4 (permalink)  
Antiguo 30/01/2007, 19:06
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Se puede esto con un div ?

Ah, pues no, no había entendido eso. Disculpa. Creo que este código puede parecerse a lo que buscabas.

Código:
<!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>
  <title>Con CSS</title>
  <style type="text/css">
body { height: 100%;
overflow: hidden;
margin: 0pt;
}
#superior { background-color: rgb(255, 255, 0);
font-size: 9px;
position: relative;
height: 80px;
}
#inferior { background-color: rgb(255, 255, 0);
font-size: 9px;
width: 100%;
height: 80px;
position: absolute;
bottom: 0pt;
}
#central { background-color: rgb(51, 51, 255);
overflow: auto;
position: absolute;
width: 100%;
top: 80px;
bottom: 80px;
}
  </style>
<!--[if IE]>
<style>
#superior {
height: 14%;
}
#inferior {
position: relative;
height: 14%;
}
#central { position: relative;
height: 72%;
top: 0px;
bottom: 0px;
}
</style>
<![endif]-->
</head>
<body>
<div id="contenedor">
<div id="superior">SUPERIOR
<input value="arriba" type="text" /></div>
<div id="central">
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
</div>
<div id="inferior">
INFERIOR
<input value="abajo" type="text" /></div>
</div>
</body>
</html>
Mikel.

Última edición por Mikmoro; 30/01/2007 a las 19:21
  #5 (permalink)  
Antiguo 31/01/2007, 02:16
 
Fecha de Ingreso: abril-2002
Mensajes: 1.013
Antigüedad: 15 años, 7 meses
Puntos: 8
Re: Se puede esto con un div ?

Funciona perfectísimamente, muchas gracias
  #6 (permalink)  
Antiguo 31/01/2007, 02:19
 
Fecha de Ingreso: abril-2002
Mensajes: 1.013
Antigüedad: 15 años, 7 meses
Puntos: 8
Re: Se puede esto con un div ?

Me acabo de dar cuenta de que en IE se ve también la barra de scroll del navegador a pesar del "overflow:hidden", hay alguna forma de quitarla (con CSS)? . Gracias de nuevo

Última edición por MikiBroki; 31/01/2007 a las 02:28
  #7 (permalink)  
Antiguo 31/01/2007, 02:28
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Se puede esto con un div ?

Sí. Añade html, al selector de body:

html, body { height: 100%;
overflow: hidden;
margin: 0pt;
}

Mikel.
  #8 (permalink)  
Antiguo 31/01/2007, 02:49
 
Fecha de Ingreso: abril-2002
Mensajes: 1.013
Antigüedad: 15 años, 7 meses
Puntos: 8
Re: Se puede esto con un div ?

Sí, simplemente añadiendo "html" al estilo han desaparecido en IE.

Me ayudaría mucha para futuras ocasiones que me explicaras si no es mucha molestia ya, y cuando puedas, el por qué de ello... y también por qué para FF usas 'position:absolute' y para IE 'position:relative', aparate de si hay alguna razón para que especifiques los altos en 'px' para FF y en '%' en IE.

Impagable tu ayuda, gracias.
  #9 (permalink)  
Antiguo 31/01/2007, 03:27
 
Fecha de Ingreso: enero-2007
Ubicación: Madrid
Mensajes: 1
Antigüedad: 10 años, 10 meses
Puntos: 0
Re: Se puede esto con un div ?

Hola, acabo de llegar al foro y he visto este hilo. A la pregunta de position:relative o absolute creo que puedo contestar yo...

El tema es que mientras FF es perfectamente compatible con CSS, y acepta el absolute como lo mas normal, el IExplorer NO es totalmente compatible con CSS, ni siquiera el IE7 (aunque algo ha mejorado). Y entre las cosas que no funcionan en IE está el famoso absolute. Puedes probar con una página cualquiera a poner algo con absolute y abrirla en el explorer a ver que pasa. Se coloca donde le sale de las narices básicamente...

Espero que sirva la respuesta.

Un saludo
  #10 (permalink)  
Antiguo 31/01/2007, 03:50
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Se puede esto con un div ?

Cita:
Iniciado por MikiBroki Ver Mensaje
Me ayudaría mucha para futuras ocasiones que me explicaras si no es mucha molestia ya, y cuando puedas, el por qué de ello... y también por qué para FF usas 'position:absolute' y para IE 'position:relative', aparate de si hay alguna razón para que especifiques los altos en 'px' para FF y en '%' en IE.

Impagable tu ayuda, gracias.
Pues como de costumbre, por la extrañas (y estúpidas) manías de IE y Micro$oft. La mayoría de las cosas no conozco bien la razón técnica interna (el layout y eso del explorer), pero lo conozco por pura experiencia.

Lo del html es que a IE no le basta con que el body tenga ocultado el scroll; para él, el body es sólo una parte del html (???) y por eso necesita ocultarlo para el html para poder hacerlo.

Lo de relative, absolute, pixels y porcentajes es lo siguiente:
hay una cosa (otra) que desgraciadamente IE no sabe hacer: es dar tamaño a las capas absolutas en base a coordenadas. Si en Firefox dices que una capa está a 0px de arriba y 0px de abajo, ocupará todo el alto de la página. Bien, pues IE no sabe hacerlo. Sólo puede usar 2 coordenadas para colocar una capa (top y left, bottom y right, etc.), pero no para darle tamaño.
Por eso, en FF ves las capas absolutas completando su zona sin que tengan tamaño de alto asignado (height).

Por último, si a IE no le das un tamaño de alto a una capa, no consigues que saque scroll de ninguna manera. Como no le podemos dar un alto fijo en este caso, la mejor solución es en porcentajes. Si pones en porcentajes, Firefox no sacará el scroll si es auto, porque no lo puede usar; la capa mide ese porcentaje y no puede pasar de ahí y no lo entiende.

Espero haber aclarado tus dudas.

Mikel.

P.D.: para gavi: parece ser que IE7 tiene un paupérrimo 56% de compatibilidad con CSS3.
  #11 (permalink)  
Antiguo 31/01/2007, 05:07
 
Fecha de Ingreso: abril-2002
Mensajes: 1.013
Antigüedad: 15 años, 7 meses
Puntos: 8
Re: Se puede esto con un div ?

Pues muy aclarativa gracias. Lo que me lleva a la deducción de que para cosas como estas mejor usar javascript.

Gracias de nuevo
  #12 (permalink)  
Antiguo 31/01/2007, 05:50
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Se puede esto con un div ?

Una cosita: si tienes buen control sobre javascript y AJAX, ¿podrías por favor echar un vistazo a esta consulta que he hecho en el foro de AJAX a la que nadie responde ?

http://www.forosdelweb.com/f127/pasar-parametros-enlace-externo-460577/

No sé si es que no se entiende la consulta o es que nadie tiene la respuesta.

Mikel.
  #13 (permalink)  
Antiguo 01/02/2007, 05:21
 
Fecha de Ingreso: abril-2002
Mensajes: 1.013
Antigüedad: 15 años, 7 meses
Puntos: 8
Re: Se puede esto con un div ?

Siento el retraso, a veces no me llegan los mensajes de respuestas en los posts, voy a echarle un vistazo y te digo durante el día
  #14 (permalink)  
Antiguo 01/02/2007, 05:31
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Se puede esto con un div ?

Gracias. Ya lo he resuelto. No te preocupes. Gracias de todos modos.

Mikel.
  #15 (permalink)  
Antiguo 01/02/2007, 05:40
 
Fecha de Ingreso: abril-2002
Mensajes: 1.013
Antigüedad: 15 años, 7 meses
Puntos: 8
Re: Se puede esto con un div ?

Cargar un fichero .html en un DIV no le he hecho ni sé cómo, lo que hago es mediante innerHTML cargar código HTML en él, y así me ahorro problemas como ése:

Código:
<html>

    <head>

        <script language="javaScript">
            function rellenar() {
                var codigoHTML = "<span style='color:red;'>aquí el código HTML</span>";
                document.getElementById("midiv").innerHTML = codigoHTML;
            }
        </script>
    
    </head>

    <body>
        <div id="midiv"></div>
        <p/><input type="button" value="click" onclick="rellenar();" /> 
    </body>
    
</html>
En un proyecto yo tengo algo similar, un 'index.html' un iframe oculto, en el que cargues las demás páginas, y desde ellas accedas al DIV de "index.html" y modifiques su contenido, también con innerHTML de ése modo.

En tal caso, ¿cómo controlar si el usuario intenta acceder diréctamente a las demás páginas? pues haciendo una llamada mediante AJAX y comprobar EN EL SERVIDOR si el usuario ha iniciado sesión

Espero que te ayude, sino ya me cuentas

Salu2
  #16 (permalink)  
Antiguo 01/02/2007, 05:44
 
Fecha de Ingreso: abril-2002
Mensajes: 1.013
Antigüedad: 15 años, 7 meses
Puntos: 8
Re: Se puede esto con un div ?

De todos modos, haciéndolo de ese modo se me ocurre que lo que puedes hacer es, al cargarse una de las demás páginas, comprobar si han sido abiertas desde una ventana padre:

Código:
<head>
<script language="javaScript">
window.onload = function() {
    if( window.parent == null )
        document.location.href = "index.html";
}
</script>
</head>
  #17 (permalink)  
Antiguo 01/02/2007, 05:49
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Se puede esto con un div ?

Gracias por tu interés. Como decía ya está resuelto de una forma bastante sencilla, pero como no tengo mucho conocimiento de javascript, me ha costado lo mío.
El .html lo inserto con un XMLHttpRequest de AJAX, por eso lo puse en el foro de AJAX.

Mikel.
  #18 (permalink)  
Antiguo 01/02/2007, 05:52
 
Fecha de Ingreso: abril-2002
Mensajes: 1.013
Antigüedad: 15 años, 7 meses
Puntos: 8
Re: Se puede esto con un div ?

Bien me alegro... ya que el ejemplo lo he estado probando y no va, tendría que mirarlo con más detenimiento
  #19 (permalink)  
Antiguo 17/11/2008, 15:45
 
Fecha de Ingreso: julio-2008
Mensajes: 544
Antigüedad: 9 años, 4 meses
Puntos: 56
Respuesta: Se puede esto con un div ?

Muy buena! Me la apunto, que tenia un codigo css que hacia lo smismo pero funcionaba como el culo...
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 04:21.