Ver Mensaje Individual
  #4 (permalink)  
Antiguo 19/07/2004, 17:10
Avatar de PatomaS
PatomaS
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: En alguna otra parte
Mensajes: 4.656
Antigüedad: 20 años, 8 meses
Puntos: 63
Centrar vertical y horizontalmente

Hola

Bueno, pues poniéndome al día, he visto este mensaje y como no pude conseguir mediante las búsquedas los anteriores en los que he posteado un código que creo puede ayudar al problema del posicionamiento vertical y horizontal, lo pondré otra vez.

Código:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<style type="text/css" media="screen" title="Estilillo que tiene uno">
* {
	border: 0px;
	padding: 0px;
	margin: 0px;
}
.base {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: #ff0000;
}
.segunda {
	position: absolute;
	left: 10%;
	margin-right: 10%;
	top: 10%;
	padding-bottom: 10%;
	background-color: #00ff00;
	width: 80%;
}
</style>
<script type="text/javascript">
	function ajustar() {
		if (navigator.appName != "Microsoft Internet Explorer") {
			var altura = (window.innerHeight - 0);
			document.getElementById('base').style.height = altura+'px';
		} else {
			document.getElementById('base').style.height = "100%";
		}
	}
	function ajustar2() {
		if (navigator.appName != "Microsoft Internet Explorer") {
			var altura = (window.innerHeight - 200);
			// resto 200, porque el 20% de 1024 es más o menos 200.
			// este código aun debería mejorarse de manera que reste una cantidad adecuada a cada resolución
			document.getElementById('segunda').style.height = altura+'px';
		} else {
			document.getElementById('segunda').style.height = "80%";
		}
	}
</script>
<title>Centrar vertical y horizontalmente</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body onload="javascript:ajustar(); ajustar2()">
<div class="base" style="height: 1px;" id="base">
	<div class="segunda" style="height: 1px;" id="segunda">
	</div>
</div>
</body>
</html>
Felicidad
__________________
¡ hey, hou, hou, hey !