Altura variable de divs y capas posteriores

franxo31 · 21 Nov 2011, 15:26 · Solicitar retirada

Saludos a todos compañeros, tengo un problemilla que no puedo resolver, el caso es que he creado una web con varios Divs y el principal o donde va el contenido lo he dejado sin un hight determinado para que se ajuste automáticamente al tamaño del contenido lo he dejado con un min-height para que tenga un mínimo y ya está, hasta ahí bien, pero ahora viene el lio;

Justo debajo quiero que aparezca el Div con el PIÉ de la página, pero no se como hacerlo para que se ajuste en cada caso al tamaño del Div del contenido, no se si se puede automatizar con la hoja de estilos o tengo que hacerlo manualmente cada vez.

Agradezco la ayuda de antemano.

Un saludo.

Fran.

toti · 21 Nov 2011, 15:30 · Solicitar retirada

Hola franxo31,

El div con el pie de página debes colocarlo fuero del div del contenido, y para que se ajuste todo como tu quieres tienen que darle stylo al "<body>".

Saludos.

franxo31 · 21 Nov 2011, 15:36 · Solicitar retirada

Hola toti, gracias por contestar, si vieras mi cara después de leerte te echarías unas risas seguro, jajajaja.

Bueno el caso es que el pié está como div independiente del de contenido, eso creo que lo tengo bien, ¿pero como le doy stylo al body para que el pié se mueva hacia arriba y hacia abajo con el contenido?

toti · 21 Nov 2011, 15:50 · Solicitar retirada

Normalmente todas las paginas tienen sus div principales y todos con una anchura determinada (si has seguido el curso paso a paso se recomienda una anchura de 800px).
Por ejemplo los siguientes: cabecera, navegacion, contenido y pie, todos ellos con un width:800px y sin poner altura (hight) para que el texto se ajuste automaticamente y sin float.
Luego si pones al body : body {text-align:center}, todas las capas se colocaran una debajo de la otra y totalmente centradas y contenidos centrados.

Si tienes algun problema con esto mandanos el codigo que es mas sencillo pillarte el hilo!!!

Saludos.

franxo31 · 21 Nov 2011, 16:11 · Solicitar retirada

Buenas aqui te dejo dos txt, con los códigos de la página, por que no se ponerlos con scroll enla respuesta y te puedes hinchar a leer entonces, a ver si así es más cómodo.

toti · 21 Nov 2011, 16:14 · Solicitar retirada

Tienes un problema con los archivos que has mandado, no se pueden abrir.

franxo31 · 21 Nov 2011, 16:22 · Solicitar retirada

A mi me los abre bien, pero bueno lo haremos a las bravas, siento tener que mandarte el tocho, gracias por tu paciencia:

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Setas y trufas: Página de inicio</title>
<link href="estilo.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
</head>

<body>

<div id="cabecera">

<div id="logotipo"><a href="index.html"><img alt= "Pulsa aquí para volver al inicio" src="imagen/logotipo.gif" width="89px" height="99px" /></a>
</div>
<div id="presentacion" style="color:#FFFFFF; font-size:40px; padding-bottom:60px;" >
<p class="titulo">Setas y trufas</p>
</div>

</div>


<div id="contenido">
<h1>Bienvenidos a cultivo de setas y trufas.</h1>
<p>Bienvenidos a mi página web, en ella vamos a tratar el cultivo casero de varias especies de setas de interés general, desde su inicio, con la obtención de los ejemplares, hasta el final con la obtención de nuestras propias setas.</p>
<p> </p>
<p>Esta página está dedicada a personas con interés por el cultivo casero de sus propias variedades de setas, para aquellos que quieren aprender algo más e incluso para iniciar a los neófitos en la materia. Por tanto si entre algunas de tus motivaciones para vistitar esta página están la de:</p>
<p> </p>
<p>Satisfacer tu curiosidad científica o,</p>
<p> </p>
<p>Eres un amante de las setas y quieres aprender como cultivarlas sin conocimientos previos o,</p>
<p> </p>
<p>Tienes espacio sin utilizar y quieres aprender un nuevo pasatiempo o,</p>
<p> </p>
<p>Estás planteándote un nuevo emprendimiento y no sabes cual o,</p>
<p> </p>
<p>Simplemente quieres tener un nuevo motivo de conversación con tus amistades.</p>
<p> </p>
<p><b>Quédate y échale un vistazo</b>, te prometo que no te arrepentirás.</p>
<p> </p>

<p>Las especies que trataremos son la seta de chopo (<span class="idesp">Agrocybe aegerita</span>), seta de cardo (<span class="idesp">Pleurotus eryngii</span>), seta ostra (<span class="idesp">Pleurotus ostreatus</span>), champiñón (<span class="idesp">Agaricus bisporus</span>) y en menor medida la trufa negra (<span class="idesp">Tuber melanosporum</span>), a esta especie le dedicaremos una web completa por las diferencias que existe sobre su cultivo con el resto, aun que trataremos sus aspectos fundamentales para que podáis entender estas desigualdades intentando arrojar luz así a dudas muy comunes entre muchos aficionados al cultivo.</p>
<p> </p>

<p>Quiero destacar que nace, por parte del autor, como un medio claramente divulgativo sobre la materia, intentando hacer de ella el nexo de unión entre gente diferente con un interés común, de resolver las dudas de los aficionados y de, quien sabe, ideas de emprendimiento posteriores, eso ya depende de vosotros.</p>
<p> </p>
<p>Por último solo quiero explicarte que esta web está estrucurada siguiendo un orden cronológico de todo el proceso de producción para que puedas aprenderlo por completo o centrarte únicamente en la parte del proceso que más te interesa.</p>
<p> </p>
<p>Espero que te sea de utilidad que le saques el máximo partido.</p>
<p> </p>
<p>Recibe un cordial saludo. Y ánimo.</p>
<p class="centrado"><a href="introduccion/introduccion.html"> <img src="imagen/flechaadelante.gif" /></a></p>
</div>

<div id="foto">
foto</div>

<div id="texto">
pie de foto</div>

<div id="textos">
Últimas noticias</div>

<div id="pie">
<div id="pieuno">
<ul>
<li><a href="#">Enlaza esta página</a></li>
<li><a href="#">Contactos</a></li>
<li style="color:#FFFFFF"> Actualizado el
11/21/2011 3:29 PM
</li>
</ul>
</div>
<div id="piedos">Pie dos</div>
<div id="pietres">
<ul>
<li><a href="#">Directorio</a></li>
<li><a href="#">TopSite</a></li>
<li><a href="#">Mapa de la Web</a></li>
</ul>
</div>
</div>

<div id="menu">

<div id="navegacion">

<ul>

<li><a href="index.html">Inicio</a>

</li>
</ul>
<ul>
<li><a href="introduccion/introduccion.html">Introducción</a>

<ul>

<li><a href="introduccion/biologia/biologia.html">Biología de hongos</a>
<li><a href="introduccion/girgola/girgola.html">Gírgola</a>
<li><a href="introduccion/cardo/cardo.html">Seta de cardo</a>
<li><a href="introduccion/chopo/chopo.html">Seta de chopo</a>
<li><a href="introduccion/champi/champi.html">Champiñón</a>
<li><a href="introduccion/trufa/trufa.html">Trufa negra</a>
<li><a href="introduccion/material/material.html">Material necesario</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="propagacion/propagacion.html">Propagación</a>

<ul>

<li><a href="propagacion/material/material.html">Material necesario</a>
<li><a href="propagacion/medio/medio.html">Medios de cultivo</a>
<li><a href="propagacion/preparacion/preparacion.html">Preparación MC</a>
<li><a href="propagacion/espora/espora.html">Impresión de esporas</a>
<li><a href="propagacion/clonar/clonar.html">Clonar una seta</a>
<li><a href="propagacion/incubacion/incubacion.html">Incubación del micelio</a>
</ul>
</li>
</ul>
<ul>
<li><a href="inoculo/inoculo.html">Inóculo</a>

<ul>

<li><a href="inoculo/material/material.html">Material necesario</a>
<li><a href="inoculo/envases/envases.html">Preparación de envases</a>
<li><a href="inoculo/esteriliza/esteriliza.html">Esterilización</a>
<li><a href="inoculo/inocula/inocula.html">Inoculación</a>
<li><a href="inoculo/incuba/incuba.html">Incubación</a>
</li>
</ul>
</li>
</ul>
<ul>
<li><a href="sustrato/sustrato.html">Sustrato en masa</a>

<ul>

<li><a href="sustrato/material/material.html">Material necesario</a>
<li><a href="sustrato/paja/paja.html">Paja</a>
<li><a href="sustrato/serrin/serrin.html">Serrín</a>
<li><a href="sustrato/tronco/tronco.html">Troncos</a>
<li><a href="sustrato/otro/otro.html">Otros materiales</a>
</li>
</ul>
</li>
</ul>
<ul>
<li><a href="crecimiento/crecimiento.html">Crecimiento</a>

<ul>

<li><a href="crecimiento/material/material.html">Material necesario</a>
<li><a href="crecimiento/optimo/optimo.html">Óptimos ambientales</a>
<li><a href="crecimiento/camara/camara.html">Cámaras de cultivo</a>
<li><a href="crecimiento/primordio/primordio.html">Primeros primordios</a>
<li><a href="crecimiento/cosecha/cosecha.html">Cosecha</a>
</li>
</ul>
</li>
</ul>
<ul>
<li><a href="biblio/biblio.html">Bibliografía</a>

<ul>

<li><a href="biblio/libro/libro.html">Libros</a>
<li><a href="biblio/e/e.html">e-Libros</a>
<li><a href="biblio/articulo/articulo.html">Artículos</a>
<li><a href="biblio/enlace/enlace.html">Enlaces</a>
</li>
</ul>
</li>
</ul>
<ul>
<li><a href="foro/foro.html">Foro</a>
</li>
</ul>

<br class="clearFloat" />
</div>


</div>

</body>
</html>

Código CSS:

@charset "utf-8";
/* CSS Document */
body {background: url(imagen/bn.gif);}

#cabecera {position:absolute;width:900px;height:100px;top:10px;margin-left:45px; border-left:#000000 1px solid; border-right:#000000 1px solid; border-top:#000000 1px solid; background:white;}

#logotipo{width:89px; height:99px; float:left;}
#presentacion { width:810px; height:100px; background:url(imagen/untitled.bmp); float:right; text-align:center; font-weight:bold; font-size:36px;}

#menu {
position:absolute;
width:900px;
height:32px;
background: #FF33FF;
top:111px;
margin-left:45px;
visibility: visible;
border:#000000 1px solid;
color: #FF33FF;
left: 8px;
}

h1 { text-align: center;}

#navegacion {margin:0;padding:0;}

#navegacion ul {margin:0;padding:0; line-height:30px;}

#navegacion li {margin:0;padding:0;list-style:none;float:left;position:relative; color:#999; background:#666666}

#navegacion ul li a {
text-align:center;
font-family:"Times New Roman", Times, serif;
width:110.5px;
height:30px;
display:block;
text-decoration:none;
color: #FFFFFF;
border:1px solid #FFF;
}

#navegacion ul ul { position:absolute; visibility:hidden; top:32px; display: inline;}

#navegacion ul li:hover ul { visibility:visible;}

/***************************************************************/

#navegacion li:hover { background:#09F; font-size:11px;}

#navegacion ul li:hover ul li a:hover { background:#CCC; color:#000000;}

#navegacion a:hover { color:#000000;}

.clearFloat {clear:both; margin:0; padding:0; }

#contenido {
position:absolute;
width:698px;
min-height:650px;
background: #FFE4CA;
top:145px;
margin-left:247px;
border-left:#000000 1px solid;
border-right:#000000 1px solid;
}

#pie {position:absolute;width:900px;height:80px; margin-left:45px; border:#000000 1px solid; top: 1028px; background: url(imagen/imagesCAVC2CJ3.jpg);}

#pie li {text-align:center; list-style:none;}

#pieuno { width:324px; float:left; height:80px; }
#piedos { width:248px; float:left;height:80px;}
#pietres { width:324px; float:left;height:80px; }

#pie a {color: white; text-decoration:none ; display: block;}
#pie a:link {}
#pie a:visited {}
#pie a:hover {color:black ; text-decoration:underline ; background-color: white }
#pie a:active {color:red;}

#foto {
position:absolute;
width:201px;
height:200px;
background: #990000;
top:145px;
margin-left:45px;
border-left: 1px solid #000000;
border-bottom:1px solid #000000;
}

#texto {
position:absolute;
width:201px;
height:200px;
background: #CC6600;
top:345px;
margin-left:45px;
border-left: 1px solid #000000;
border-bottom:1px solid #000000;}

#textos {
position:absolute;
width:201px;
height:200px;
background: #FF9900;
top:545px;
margin-left:45px;
border-left: 1px solid #000000;
border-bottom:1px solid #000000;
}

#flechauno {position:absolute; margin-left: 356px;}

#flechados {position:absolute;margin-left: 276px;}

img { border:0;}

.idesp { font-style:italic;}

p {text-align:justify; text-indent:20px; margin: 0px 10px 0px 10px; }

.centrado {text-align:center;}
.titulo { text-align:center; padding:25px;}

toti · 21 Nov 2011, 16:57 · Solicitar retirada

Por el vistazo rápido que he dado tienes esta estructura:

1ª: cabecera , 2ª: contenido , 3ª: foto , 4ª:texto , 5ª:textos , 6ª: pie y 7ª: menu. Todas son independientes la una con la otra.
Una pregunta: tu intención es hacer una capa central con tres columnas ?, si es así, aquí está el problema.
Debes crear otra capa (DIV) que contenga estas tres columnas cada una con un "float" y su "width" correspondiente.

Saludos.