Tema: Dos grandes dudas
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 13/12/2010, 03:03
heko
 
Fecha de Ingreso: diciembre-2010
Mensajes: 1
Antigüedad: 13 años, 4 meses
Puntos: 0
Dos grandes dudas
Buenas,
os comento:
Estoy haciendo una web para subir imágenes y votarlas. El problema es que no consigo que las tres columnas (izquierda, centro y derecha) crezcan a medida que vaya creciendo el contenido. Y tampoco consigo situar el Pie de página debajo de estas tres columnas (el pie no debe estar siempre visible en pantalla, irá bajando con el resto de las columnas)
He tocado todo lo que he podido el css pero no he encontrado la solución. Llevo más de una semana sin poder avanzar por éste motivo.
Os paso el html:


[COLOR="blue"]
Código HTML: 
Ver original
  1. <link rel="stylesheet" href="css/ie8.css" type="text/css">
  2.  
  3. <body>
  4. <div id="superior">
  5.  
  6.             <div id="menu">
  7.  
  8.                 <div id="logo"></div> <!-- logo -->
  9.  
  10.         <div id="tuayer">logo</div> <!-- tuayer -->
  11.  
  12. <div id="aviso"><img src="img/offaviso.png" width="22" height="22"></div> <!-- aviso -->
  13.  
  14.                 <div id="Botonera"><a href="index.html" class="botoncss1">Inicio</a><a href="index.html" class="botoncss1">Subir Archivos</a><a href="index.html" class="botoncss1">Buscar</a> </div> <!-- botonera -->
  15.  
  16.               <div id="botoncuenta">Cuenta<span class="botoncuenta"> ▼</span></div> <!-- botoneracuenta -->
  17.  
  18.             </div> <!-- menu -->
  19.  
  20.         </div> <!-- superior -->
  21.             <div id="izquierda"> </div> <!-- izquierda -->
  22.             <div id="centro">
  23.                 <div id="cajafoto">
  24.                     <div class="titulo" id="tituloslide"> Presentación de fotografías: </div> <!-- tituloslide -->
  25.                     <div class="titulox" id="slide"> Cuérigo </div> <!-- slide -->
  26.  
  27.                     
  28.  
  29.                   <div class="sombraslide" id="fotosuperior">
  30.  
  31.                         <p>&nbsp; </p>
  32.  
  33.                         <p><center>
  34.  
  35.                         <input name="porcentaje" type="text" id="porcentaje" value="0" maxlength="3">
  36.  
  37.                         <input title="Porcentaje" name="boton" id="boton" type="button" height="10">
  38.  
  39.                         </p>
  40.  
  41.                   </div> <!-- fotosuperior --><!-- titulo -->
  42.  
  43.                     
  44.  
  45. <div id="fotocentro">
  46.  
  47.                         <div class="sombrafoto" id="foto"><img src="img/PruebaFoto.jpg" width="562" height="372"></div> <!-- foto --><!-- botonfoto --><!-- marco --><!-- fotoporciento -->
  48.  
  49.                   </div> <!-- fotocentro --><!-- fotoinferior -->
  50.  
  51.                 <div id="comentariofoto" class="titulo">Comentario de
  52.  
  53.                 <div class="titulox">Fotografíaa tomada el dia x y en el pueblo x, de un familiar lasdfasldfk</div>
  54.  
  55.             </div>
  56.  
  57.             
  58.  
  59.             <div id="restocomentariosfoto" class="titulo">Resto de comentarios (por otros usuarios)
  60.  
  61.                 <div class="titulox">Comprobado que crece bien</div> <!-- titulox -->
  62.  
  63.             </div> <!-- restocomentariosfoto -->
  64.  
  65.             </div> <!-- cajafoto -->
  66.  
  67.   
  68.  
  69.           </div> <!-- centro -->
  70.  
  71.  
  72.  
  73.             <div id="derecha">
  74.  
  75.                 <div id="votos">
  76.  
  77.                     <div class="titulo"> Votos </div> <!-- class titulo -->
  78.  
  79.                     <div id="tabvotos"> </div>
  80.  
  81.                 </div> <!-- votos -->
  82.  
  83.                 
  84.  
  85.                 <div id="etiquetas">
  86.  
  87.                     <div class="titulo"> Etiquetas </div> <!-- class titulo -->
  88.  
  89.                     <div id="tabetiquetas"> </div>
  90.  
  91.               </div> <!-- etiquetas -->
  92.  
  93.                 
  94.  
  95.                 <div id="publicidad">
  96.  
  97.                     <div class="titulo"> Publicidad </div> <!-- class titulo -->
  98.  
  99.                     <div id="tabpublicidad" class="titulox"> Comprobado que crece bien </div>
  100.  
  101.               </div> <!-- publicidad -->
  102.  
  103.           </div> <!-- derecha -->
  104.  
  105.         <div id="pie"> Colocar aquí el contenido del pie </div> <!-- pie -->
  106.  
  107. </body> </html>

Y el CSS:
Código CSS: 
Ver original
  1. @charset "utf-8";
  2.  
  3. html, body { 
  4. margin: 0pt;
  5. outline: 0;
  6. height: auto;
  7. padding: 0;
  8. }
  9. #superior {
  10.     background-color: #960;
  11.     height: 40px;
  12.     width: 100%;
  13.     margin-top: 0px;
  14.     margin-right: 0px;
  15.     margin-left: 0px;
  16.     left: 0px;
  17.     top: 0px;
  18.     right: 0px;
  19.     position: absolute;
  20.     z-index: 5;
  21.     margin-top: 0;
  22. }
  23. #menu {
  24.     background-color: #960;
  25.     float: none;
  26.     height: 40px;
  27.     width: 900px;
  28.     margin-top: 0px;
  29.     left: 10%;
  30.     top: 0px;
  31.     position: absolute;
  32.     overflow: hidden;
  33.     visibility: visible;
  34.     margin-top: 0;
  35. }
  36. #izquierda {
  37.     background-color: #FFF;
  38.     height: auto;
  39.     width: 200px;
  40.     margin-top: 0px;
  41.     left: 10%;
  42.     position: absolute;
  43.     top: 0px;
  44.     border-right: thin solid #FFF;
  45.     border-bottom: thin solid #FFD571;
  46.     bottom: 0px;
  47.     margin-bottom: 0px;
  48.     margin-top: 0;
  49. }
  50. #centro {
  51.     background-color: #fff;
  52.     height: auto;
  53.     width: 480px;
  54.     margin-left: 201px;
  55.     left: 10%;
  56.     position: absolute;
  57.     border-bottom: solid thin #FFD571;
  58.     top: 0px;
  59.     z-index: 1;
  60.     bottom: 0px;
  61.     margin-bottom: 0px;
  62.     margin-top: 0;
  63. }
  64. #derecha {
  65.     background-color: #FFF;
  66.     padding: 8px;
  67.     height: auto;
  68.     width: 205px;
  69.     margin-left: 680px;
  70.     left: 10%;
  71.     position: absolute;
  72.     top: 0px;
  73.     border-bottom: solid thin #FFD571;
  74.     bottom: 0px;
  75.     margin-bottom: 0px;
  76.     margin-top: 0;
  77.  
  78. }
  79. #pie {
  80.     background-color: #FF00FF;
  81.     height: 100px;
  82.     width: 100%;
  83.     position: absolute;
  84.     clear: both;
  85.     float: right;
  86.     right: 0px;
  87.     left: 0px;
  88.     margin-bottom: 0px;
  89. }
  90. #logo {
  91.     position: absolute;
  92.     height: auto;
  93.     width: auto;
  94.     left: 0px;
  95.     top: 6px;
  96. }
  97. #tuayer {
  98.     font-family: Arial, Arial, Helvetica, sans-serif;
  99.     font-size: 28px;
  100.     position: absolute;
  101.     height: 32px;
  102.     color: #FFF;
  103.     top: 4px;
  104.     background-color: #996600;
  105.     left: 36px;
  106. }
  107. #aviso {
  108.     height: 22px;
  109.     width: 22px;
  110.     position: absolute;
  111.     top: 12px;
  112.     left: 150px;
  113. }
  114. #Botonera {
  115.     position: absolute;
  116.     top: 15px;
  117.     visibility: visible;
  118.     margin-left: 200px;
  119.     left: 0;
  120.     float: left;
  121.     height: 40px;
  122.     background-color: #960;
  123.     width: 453px;
  124. }
  125. .botoncss1 {
  126.    border-top: 2px solid #960;
  127.    border-bottom: 2px solid #960;
  128.    background: #960;
  129.    padding: 15px 20px;
  130.    height: 40px;
  131.    color: #FFF;
  132.    font-size: 13px;
  133.    font-family: Arial, Arial, Helvetica, sans-serif;
  134.    vertical-align: middle;
  135.    text-decoration: none;
  136.    }
  137. .botoncss1:hover {
  138.     border-top-color: #5E3F02;
  139.     background: #5E3F02;
  140.    }
  141. #botoncuenta {
  142.     position: absolute;
  143.     cursor: pointer;
  144.     top: 15px;
  145.     margin-left: 743px;
  146.     left: 0;
  147.     color: #FFF;
  148.     font-size: 13px;
  149.     font-family: Arial, Arial, Helvetica, sans-serif;
  150.     float: left;
  151.     height: 40px;
  152.     background-color: #960;
  153.     width: 67px;
  154. }
  155. #botoncuenta:hover {
  156.     text-decoration: underline;
  157. }
  158. .botoncuenta {
  159.     font-size: 8px;
  160. }
  161. #pie {
  162.     float: none;
  163.     clear: both;
  164.     position: absolute;
  165.     height: auto;
  166.     width: auto;
  167.     bottom: -100px;
  168.     display:inline;
  169. }
  170. #cajafoto {
  171.     position: absolute;
  172.     z-index: 5;
  173.     top: 80px;
  174.     width: 650px;
  175.     height: auto;
  176.     color: #FFF;
  177.     visibility: visible;
  178.     left: -198px;
  179. }
  180. #fotosuperior {
  181.     background-color: #FFF;
  182.     height: 103px;
  183.     width: 100%;
  184.     position: absolute;
  185.     z-index: 2;
  186.     top: 0px;
  187. }
  188. #fotoinferior {
  189.     position: absolute;
  190.     height: auto;
  191.     float: none;
  192.     width: 605px;
  193.     top: 508px;
  194.     font-family: Arial, Arial, Helvetica, sans-serif;
  195.     font-size: 11px;
  196.     color: #FFF;
  197.     background-color: #960;
  198.     text-align: center;
  199.     text-decoration: none;
  200.     -moz-border-radius: 10px;
  201. }
  202. .inferior a {
  203.     color: #fff;
  204.     font-family: Arial, Arial, Helvetica, sans-serif;
  205.     font-size: 11px;
  206.     text-decoration: none;
  207. }
  208. #fotocentro {
  209.     top: 71px;
  210.     position: absolute;
  211.     height: auto;
  212.     width: 100%;
  213.     margin-top: 0px;
  214.     margin-bottom: 0px;
  215.     left: 0px;
  216.     font-style: normal;
  217. }
  218. #foto {
  219.     width: 603px;
  220.     height: 372px;
  221.     color: #FFF;
  222.     background-position: center center;
  223.     vertical-align: central;
  224.     text-align: center;
  225.     position: absolute;
  226.     border-width: thin;
  227.     border-style: solid;
  228.     z-index: 1;
  229.     left: 0px;
  230.     top: 60px;
  231.     cursor: auto;
  232. }
  233. #botonfoto {
  234.     left: 617px;
  235.     float: right;
  236.     height: auto;
  237.     width: 28px;
  238.     position: absolute;
  239.     z-index: 2;
  240.     top: 61px;
  241. }
  242. #comentariofoto {
  243.     position: absolute;
  244.     height: auto;
  245.     float: none;
  246.     width: 100%;
  247.     top: 540px;
  248.     border-color: #FFD571;
  249.     border-style: solid;
  250.     border-width: thin;
  251. }
  252. #restocomentariosfoto {
  253.     position: absolute;
  254.     height: auto;
  255.     float: none;
  256.     width: 100%;
  257.     border-color: #FFD571;
  258.     border-style: solid;
  259.     border-width: thin;
  260.     top: 595px;
  261. }
  262. #votos {
  263.     height: auto;
  264.     width: 190px;
  265.     top: 60px;
  266.     position: absolute;
  267. }
  268. #tabvotos {
  269.     height: 95px;
  270.     width: 160px;
  271.     top: 20px;
  272.     position: absolute;
  273.     border-color: #FFD571;
  274.     border-style: solid;
  275.     border-width: thin;
  276. }
  277. #tabetiquetas {
  278.     height: 150px;
  279.     width: 160px;
  280.     top: 20px;
  281.     position: absolute;
  282.     border-color: #FFD571;
  283.     border-style: solid;
  284.     border-width: thin;
  285. }
  286. #tabpublicidad {
  287.     height: auto;
  288.     width: 160px;
  289.     top: 20px;
  290.     position: absolute;
  291.     border-color: #FFD571;
  292.     border-style: solid;
  293.     border-width: thin;
  294. }
  295. #etiquetas {
  296.     background-color: #FFF;
  297.     height: auto;
  298.     width: 190px;
  299.     top: 192px;
  300.     position: absolute;
  301. }
  302. #publicidad {
  303.     height: auto;
  304.     width: 190px;
  305.     top: 380px;
  306.     position: absolute;
  307. }
  308. .titulo{
  309.     font-family: Arial, Arial, Helvetica, sans-serif;
  310.     color: #312101;
  311.     font-size: 12px;
  312.     text-decoration: none;
  313. }
  314. .titulox{
  315.     font-family: Arial, Arial, Helvetica, sans-serif;
  316.     color: #960;
  317.     font-size: 12px;
  318.     text-decoration: none;
  319.     font-weight: normal;
  320. }
  321. #fototitulo {
  322.     position: absolute;
  323.     height: 10px;
  324.     width: 100%;
  325.     left: -1px;
  326.     top: 115px;
  327.     right: 0px;
  328.     z-index: 4;
  329. }
  330. #fototitulo2 {
  331.     position: absolute;
  332.     height: 10px;
  333.     width: 566px;
  334.     left: 42px;
  335.     right: 0px;
  336.     z-index: 4;
  337.     top: 0px;
  338. }
  339. #tituloslide {
  340.     height: auto;
  341.     width: auto;
  342.     position: absolute;
  343.     visibility: visible;
  344.     z-index: 8;
  345.     margin-top: -17px;
  346. }
  347. #slide {
  348.     height: auto;
  349.     width: auto;
  350.     position: absolute;
  351.     visibility: visible;
  352.     z-index: 8;
  353.     margin-top: -17px;
  354.     margin-left: 160px;
  355. }
  356. a {
  357. outline:0;
  358. }


Como os comentaba, necesito que el pie esté debajo de todo lo demás. Que crezcan con el contenido las tres columnas y todos los demás divs (excepto los del menú).
Os agradecería mucho cualquier aportación.

Gracias y un saludo.