Problemas con capas y porcentajes

Abelcoto17 · #1 (**permalink**) 12/11/2005, 19:26

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>

baccxus · #2 (**permalink**) 14/11/2005, 11:05

Si la web es "líquida", no creo que necesites un "tamaño" porcentual para el alto del contenedor, pues este será relativo a su contenido. (creo que ni yo me entendí), bueno, el caso es que no tienes porque usar un tamaño % de alto puesto que es relativo al contenido de tu página y lo que son tus divisiones internas como la barra de navegación y el encabezado usar medidas de píxeles para el alto (height), y las otras divisiones déjalas sin medidas de alto porque creceran a medida que crezca su contenido, también si se monta una capa encima de otra puedes usar clear:both.

Código:

body, td, tr {
margin: 0;
color: #000000;
}
#contenedor /* capa que contiene a todas las demas. */{
position:relative;
width:97%;
margin: 10px auto;
}
#header /* Cabecera para poner el Titulo y Logo de la web*/{
height:85px;
width: 100%;
font-size:0.7em;
border: 1px solid #0000ff;
}

#barnav /* Barra de navegación Horizontal*/{
margin: 3px 0;
height: 25px;
width: 100%;
border: 1px solid #0000ff;
}
.catlinks
{
text-align:center;
text-decoration:underline;
text-shadow:none; /*????*/
vertical-align:middle; /*????*/
font-size:0.7em;
}

.columnas 
/* Menu de navegación Vertical para poner enlaces destacados */
/* Menu de navegación Vertical derecho*/{
width: 15%;
border: 1px solid #0000ff;
float: left
}

#contenido /* Capa donde ira el contenido.*/{
width: 69%;
border: 1px solid #0000ff;
float: left;
}

#pie /* Capa para poner el Copyleft,... */
{
height: 50px;
width: 100%;
border: 1px solid #0000ff;
clear:both;
margin-top: 3px;
}

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.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&iacute;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" class="catlinks">aquí va el contenido del header</div>
<div class="columnas">mucho más texto</div>
<div id="contenido">mucho texto</div>
<div class="columnas">Texto</div>
<div id="pie"> aquí va el contenido del pie de página </div>
</div>
</body>
</html>