Vereis estoy intentando crear una web liquida , para que se adapte a la resolución de cada uno y poder aprovechar al maximo el espacio, poniendo los anchos y altos de las capas ( y los margins tambien) en % .
Poniendo solo los anchos funciona a la perfección , si pongo una capa contenedora al 90% me la pone bien en 800x600, en 1024x768 y en otras mas altas.
Pero si intento poner la altura en porcentajes ( para que la proporción en la altura de las capas se mantega igual y no afecte al esquema de la web) me descoloca varias capas ( concretamente la de contenido y las dos columnas que tengo a los estremos para enlaces,...)
imagen :
http://www.mundosombrio.com/capas.jpg
Utilizo margin-top en negativo para posicionar las columnas y la capa de contenido. En % en 1024 lo muestra bien , pero si cambio de resolución lo desorganiza todo. Usando px no pasa eso en ningun momento.
¿ a que se puede deber ? ¿estoy usando mal los margins ? .
Cualquier otro consejo o error o defecto que veais decidlo.
El codigo valida tanto css como xhtml.
Mi codigo css es este :
#contenedor /* capa que contiene a todas las demas. */
{
position:absolute;
width:97%;
height:195%;
left:2%;
top:2%;
}
#header /* Cabecera para poner el Titulo y Logo de la web*/
{
height:14.6%;
width: 98.7%;
margin-bottom:0.4%;
margin-left:0.6%;
margin-right:0.6%;
margin-top:0.4%;
font-size:0.7em;
border-style: solid;
border-color: #0000ff;
border-width:thin;
}
#barnav /* Barra de navegación Horizontal*/
{
margin-top:0.4%;
height:2%;
width:98.7%;
margin-left:0.6%;
margin-right:0.6%;
border-style: solid;
border-color: #0000ff;
border-width:thin;
}
#Catlinks
{
text-align:center;
text-decoration:underline;
text-shadow:none;
padding-left:3%;
padding-right:3%;
vertical-align:middle;
font-size:0.7em;
}
#Colderch /* Menu de navegación Vertical derecho*/
{
height:80%;
width:16.8%;
margin-right:0.7%;
margin-left:82.5%;
margin-top:-88.6%;
margin-bottom:0.4%;
border-style: solid;
border-color: #0000ff;
border-width:thin;
}
#Colizqda /* Menu de navegación Vertical para poner enlaces destacados */
{
height:80%;
width:26.7%;
margin-left:0.6%;
margin-bottom:0.4%;
margin-top:0.4%;
border-style: solid;
border-color: #0000ff;
border-width:thin;
}
#contenido /* Capa donde ira el contenido.*/
{
width: 54%;
height:80%;
margin-top:-88.6%;
margin-left:27.9%;
margin-bottom:0.4%;
border-style: solid;
border-color: #0000ff;
border-width:thin;
}
#pie /* Capa para poner el Copyleft,... */
{
height:1.5%;
width: 98.8%;
margin-bottom:0.4%;
margin-left:0.6%;
margin-right:0.6%;
border-style: solid;
border-color: #0000ff;
border-width:thin;
font-size:0.7em;
}
y el xhtml :
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="contenedor">
<div id="header">imagen Web</div>
<div id="barnav"><div id="Catlinks">aquí va el contenido del header</div></div>
<div id="Colizqda"></div>
<div id="contenido"></div>
<div id="Colderch"></div>
<div id="pie"> aquí va el contenido del pie de página </div>
</div>
</body>
</html>