cansino escribió:Estoy teniendo un pequeño problema con las capas, os explico brevemente la estructura:
Una primera capa, digamos #div todo con un color de fondo,etc. y una longitud width:100%
Dentro de esta capa hay una segunda, llamada #contenido, con las propiedades particulares y una longitud width:95% y alineación centrada, para que me haga un borde lateral a cada lado del 2,5% del tamaño de la página.
Estas dos capas no tienen limitada la altura, para que crezcan según su contenido.
Dentro de #contenido(y por consiguiente de #todo) hay dos capas, un #menu con width:20% float:left y un #subcontenido widt:80% float right.
Yo suponíá que al crecer las capas #menu y #subcontenido con texto e imagenes, a su vez, las capas #contenido y #todo también lo harían, pero no ocurre así, y tengo que asignarle una altura a ambas con el riesgo de quedarme corto o pasarme, pues los datos que se muestran proceden de una base de datos y son cambiantes en cuanto a su altura total. He probado colocando la etiquetas min-height y max-height pero sin resultados.
A ver si alguien me puede echar una mano.
Gracias con antelación.
Hola:
Creo que para comenzar a trabajar de esa manera hay que embeberse un poco de como funcionan las capas o div con ciertas medidas y la visualización en los navegadores, por ejemplo el height (o alto) por defecto de una capa que está dentro de otra no es la altura de esa otra en la que está , es la altura del contenido de esa misma capa.
Ahora si el tamaño del contenido de esa capa es mas que la altura, eso ya debe tratarse con algún valor de la propiedad overflow.
Le daré un ejemplo con una hoja de estilo y una página con un par de div o cajas sin altura definida:
Esta es la hoja de estilo
body{text-align:center;}
div#todo{background-color:#ffff00;}
div#izquierdo{width:300px;padding:20px;border:5px solid #181e25;background-color:#c7f201;color:#627907;font:bold 12px arial;float:left;}
div#derecho{width:300px;padding:20px;border:5px solid #181e25;background-color:#E6E6FA;color:#627907;font:bold 12px arial;float:right;}
Y esta es la página
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Page title</title>
<link rel="stylesheet" href="estilos.css"type="text/css"
media="all">
</head>
<body>
<div id="todo">
<div id="izquierdo">Este es un modelo de div con las propiedades
en el que no se le da un alto definido
asdf</p>
asd</p>
asd</p>
asdf</p>
asdf</p>
asd</p>
asd</p>
asdf</p>
asdf</p>
asd</p>
asd</p>
asdf</p>
asdf</p>
asd</p>
asd</p>
asdf</p>
asdf</p>
asd</p>
asd</p>
asdf</p>
asdf</p>
asd</p>
asd</p>
asdf</p>
</div>
<div id="derecho">Este es otro div flotando a la derecha
Para ver como es mejor
dd</p>
</div>
</div>
</body>
</html>
Como ve no le hemos puesto ninguna altura a esas capas.
Ahora le daré otro ejemplo, aunque para no estar poniendole acá una hoja de estilo, le inserté el código de estilo en la misma página entre el <head> y el </head>, si no me equivoco lo único que hice fue agregarle una altura o height del 100%:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Page title</title>
<style type="text/css">
div{width:300px;height:100%;padding:20px;border:5px solid #181e25;background-color:#c7f201;color:#627907;font:bold 12px arial}</style>
</head>
<body>
<div>Este es un modelo de div con las propiedades
Este es un modelo con las mismas propiedades
</div>
</body>
</html>
Con esto se demuestra que el alto por defecto se adapta al contenido y no a lo que lo contiene.
Ahora le pondré un ejemplo con el min-height
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Page title</title>
<style type="text/css">
div{width:300px;padding:20px;border:5px solid #181e25;color:#627907;font:bold 12px arial;float:left;min-height:200px;}
</style>
</head>
<body>
<div>Este es un modelo de div con las propiedades
Este es un modelo con las mismas propiedades
para</p>
</div>
</body>
</html>
Esta propiedad permite establecer un ancho y alto mínimo para un elemento, el tamaño es fijo, pero si el contenido le supera, se estirará como lo haría un div o caja en el valor auto.
Este, no estoy seguro que funcione en todos los navegadores, por ahora creo (si no me equivoco) ,que funciona solo en Opera y en Mozilla.
La cuestión es que hay que practicar haciéndo y deshaciéndo hasta lograr algo que se acerque a lo que uno desea.
Bueno, no aburro más
Saludos
