Ver Mensaje Individual
  #19 (permalink)  
Antiguo 13/01/2009, 08:25
Avatar de Aresillo
Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 16 años, 7 meses
Puntos: 53
Respuesta: ¿Como posiciono este DIV?

Aqui lo tienes mik...
Lo he juntado para que se vea en un solo archivo... el ponia otro con iframe... he peusto el de sin iframes...
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" lang="es">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Cabecera, menu izquierdo, menu derecho, subpie fijo y pie fijo. Contenido en divisor central</title>
<style type="text/css">
html, body {
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
	font-family :  Arial, sans-serif;
	font-size: 14px;
	background-color: #FFFFCC;
}
#cabecera {
	width: 100%;
	height: 10%;
	overflow: hidden;
	background-color: #CCCCCC;
}
#envolvente {
	position: relative;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 90.2%;
	overflow: hidden;
}
#izquierda {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 16%;
	height: 93%;
	overflow: hidden;
	background-color: #FFFFCC;
}
#derecha {
	position: absolute;
	left: 84%;
	top: 0px;
	width: 16%;
	height: 93%;
	overflow: hidden;
	background-color: #FFFFCC;
}
#pie {
	position: absolute;
	left: 0px;
	top: 93%;
	width: 100%;
	height: 7%;
	overflow: hidden;
	background-color: #CCFFFF;
}
#contenido {
	position: absolute;
	left: 16%;
	top: 0px;
	height: 87%;
	width: 68%;
	background-color: #999999;
}
#subcontenido {
	position: relative;
	left: 0px;
	top: 0px;
	height: 100%;
	width: 100%;
	background-color: #fff;
}
#subpie {
	position: relative;
	left: 0px;
	bottom: 0px;
	width: 100%;
	height: 7%;
	overflow: hidden;
	background-color: #800080;
}
.texto {
	margin: 6px;
}
</style>
</head>

<body>
<!-- diseño líquido: se adapta a cualquier resolución -->
<div id="cabecera"><span class="texto">Cabecera de página</span></div> <!-- cabecera fija siempre visible -->
	<div id="envolvente">

		<div id="izquierda"><span class="texto">Menu izquierdo</span></div> <!-- lateral izquierdo siempre visible -->
		<div id="contenido"> <!-- bloque central para contenido y subpie -->
			<div id="subcontenido"><span class="texto">Zona para contenidos</span></div> <!-- bloque para contenido -->
			<div id="subpie"><span class="texto">subpie fijo en la zona de contenidos</span></div> <!-- subpie fijo siempre visible -->
		</div>

		<div id="derecha"><span class="texto">Menu derecho</span></div> <!-- lateral derecho siempre visible -->
		<div id="pie"><span class="texto">Pie de página</span></div> <!-- pie fijo siempre visible -->
	</div>
</body>

</html> 
Ares
__________________
Las dudas son el alimento de la inteligencia. A. Einstein
Everything we are is the end result of our thoughts. Sidhartta Gautama