Foros del Web » Creando para Internet » CSS »

Es posible hacer esto?

Estas en el tema de Es posible hacer esto? en el foro de CSS en Foros del Web. Es posible establecer un div al borde inferior de la pantalla sin importar la resolucion de la misma? Es decir que este div no se ...
  #1 (permalink)  
Antiguo 05/09/2008, 08:56
 
Fecha de Ingreso: septiembre-2008
Mensajes: 14
Antigüedad: 9 años, 3 meses
Puntos: 0
Es posible hacer esto?

Es posible establecer un div al borde inferior de la pantalla sin importar la resolucion de la misma?

Es decir que este div no se mueva y siempre quede al final de la pagina sin importar la resolucion...
  #2 (permalink)  
Antiguo 05/09/2008, 09:59
Avatar de rene-silva  
Fecha de Ingreso: agosto-2008
Ubicación: La Paz, Bolivia
Mensajes: 12
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: Es posible hacer esto?

Si, si es posible. No recuerdo la página de donde obtuve el código pero acá a está a grandes rasgos. La clave es entender la propiedad position y bottom.
Código HTML:
<!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=utf-8" />
		<title>GNexis</title>
		<link href="css/main.css" rel="stylesheet" type="text/css"/>
		<style type="text/css">
			*{
				margin:0px;
				padding:0px;
			}
			html, body, #contents {
				min-height: 100%;
				width: 100%;
				height: 100%;
			}
			
			/*
			 * The "height" above is a hack for IE5+/Win.  Below we adjust
			 * it using the child selector to hide from IE5+/Win
			 */
			
			html>body, html>body #contents {
				height: auto;
			}
			
			/*
			 * Without this, Moz1.0 adds a vertical scrollbar
			 */
			
			body {
				font-family: sans-serif,Arial;
				font-size:12px;
				color:#fff;
				background:#1B1D1E;
			}
			
			#contents {
				position: absolute;
				top: 0;
			   left: 0;
				background:#333;
			/*  Use the following to center this at 50% width, or this for 750px: width: 700px, margin-left: -350px: */
			/*
				left: 50%;
			    width: 50%;
			    margin-left: -25%;
			*/
			}
			#content{
				background:#ffffff;
				color:#333;
			}
			#footer {
				position: absolute;
				bottom: 0;
				background:#123;
				width: 70%; /* See note below */
				text-align: center;
				padding: 1.5em 15%;
			}
			
			/* SBMH -- see http://css-discuss.incutio.com/?page=BoxModelHack 
			 * Stupid hack lets IE see 100%, others see 70%. 
			 */
			#footer {
			    \width: 100%;
			    w\idth: 70%;
			}
			#textFooter{
				padding-top:15px;
			}
		</style>
	</head>
	<body id="bodyHTML">
		<div id="contents">
	      <div id="main">
	      	<div id="content">
	      		asdf
	      	</div>
		      <div id="footer">
		      	<div id="textFooter">
		    	    <p>GNexis.com</p>
				</div>
	      </div>
	    </div>
	</body> 
</html> 
  #3 (permalink)  
Antiguo 05/09/2008, 11:39
 
Fecha de Ingreso: septiembre-2008
Mensajes: 14
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: Es posible hacer esto?

ya lo aplique y funciono perfecto muchas gracias por el dato :)
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 09:39.