Foros del Web » Creando para Internet » CSS »

Dos grandes dudas

 Estas en el tema de Dos grandes dudas en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 13/12/2010, 03:03
 
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.

Etiquetas: dos, grandes
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 15:29.