Foros del Web » Creando para Internet » CSS »

Pie de pagina que baje a medida que crezca con la información

 Estas en el tema de Pie de pagina que baje a medida que crezca con la información en el foro de CSS en Foros del Web. Hola; bueno tengo el siguiente problema: Tengo una tabla en php que ve todos los registros que hay entonces cuando son muchos obviamente la tabla ...
  #1 (permalink)  
Antiguo 06/09/2010, 12:15
Avatar de ras_chalo  
Fecha de Ingreso: junio-2010
Mensajes: 369
Antigüedad: 14 años, 6 meses
Puntos: 6
Exclamación Pie de pagina que baje a medida que crezca con la información
Hola; bueno tengo el siguiente problema:

Tengo una tabla en php que ve todos los registros que hay entonces cuando son muchos obviamente la tabla crece hacia abajo, que es donde es mi problema, el diseño de abajo NO baja junto con la tabla... con imágenes .PNG tampoco baja...

La verdad que no se nada de CSS, y bueno para eso recurro a uds. para que me digan que ponerle y en donde...

Acá dejo el código del pedazo que quiero que baje a medida que la información aumente...


Código CSS: 
Ver original
  1. /* FOOTER PANEL*/
  2.  
  3. #footerPanel{width:100%; background:#DCDCDC; color:#4C4C4C; font-size:12px;}
  4. #footerbodyPanel{width:762px; height:133px; position:relative; margin:0 auto; padding:0;}
  5. #footerPanel ul{width:320px; display:block; position:absolute; right:10px; top:33px; }
  6. #footerPanel li{float:left; font:12px/15px Arial, Helvetica, sans-serif; font-weight:normal;}
  7. #footerPanel ul li a{padding:0 6px; color:#4C4C4C; background:#DCDCDC; text-decoration:none;}
  8. #footerPanel ul li a:hover{text-decoration:underline;}
  9. #footerPanel ul li a.padl{padding:0 0 0 6px;}
  10. #footerPanel p.copyright{
  11.     background:#DCDCDC;
  12.     display:block;
  13.     position:absolute;
  14.     top:54px;
  15.     right:45px;
  16.     color:#A64200;
  17.     width: 219px;
  18. }
  19. #footerPanel ul.templateworld{width:158px; background:#DCDCDC; color:#4C4C4C; display:block; position:absolute; top:74px; right:40px;}
  20. #footerPanel ul.templateworld li a{background:#DCDCDC; display:block; color:#4C4C4C; text-decoration:none;}
  21. #footerPanel ul.templateworld li a:hover{text-decoration:underline;}
  22.  
  23. #footerhtmlPanel{ width:86px; height:31px; display:block; position:absolute; top:34px; left:29px; margin:0; padding:0;} 
  24. #footerhtmlPanel a{
  25.     width:86px;
  26.     height:31px;
  27.     display:block;
  28.     background:url(images/html-img.gif) no-repeat 0 0 #DCDCDC;
  29.     text-decoration:none;
  30.     font:14px/31px "Trebuchet MS",Arial, Helvetica, sans-serif;
  31.     color:#2F2F2F;
  32.     text-transform:uppercase;
  33.     padding:0 0 0 10px;
  34.     position:absolute;
  35.     top:1px;
  36.     right:-12px;
  37. }
  38. #footerhtmlPanel a:hover{background:url(images/html-img.gif) no-repeat 0 0 #DCDCDC; color:#216EBD; text-decoration:none; }
  39. #footercssPanel{ width:86px; height:31px; display:block; position:absolute; top:34px; left:115px; margin:0; padding:0;} 
  40. #footercssPanel a{ width:86px; height:31px; display:block; background:url(images/css-img.gif) no-repeat 0 0 #DCDCDC; text-decoration:none; font:14px/31px "Trebuchet MS",Arial, Helvetica, sans-serif; color:#2F2F2F; text-transform:uppercase; padding:0 0 0 10px; position:absolute; top:0px; right:0px;}
  41. #footercssPanel a:hover{background:url(images/css-img.gif) no-repeat 0 0 #DCDCDC; color:#216EBD; text-decoration:none; }

Bueno espero sus respuestas y de ante mano muchas gracias!!!
  #2 (permalink)  
Antiguo 06/09/2010, 14:18
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 17 años, 6 meses
Puntos: 539
Respuesta: Pie de pagina que baje a medida que crezca con la información
El código facilitado es insuficiente. Falta el html (generado) para ver a qué y cómo afecta su css.
Lo más eficiente es un enlace a la página del problema.

Con todas las reservas por lo anterior, creo que sus problemas pueden derivar del uso de /position:absolute/
Con ello, está sacando esos elementos del flujo normal del html. Esto es, el resto de elementos se comportan como si no estuviesen presentes (de manera muy concisa y por lo tanto no del todo exacto).
  #3 (permalink)  
Antiguo 06/09/2010, 22:19
Avatar de ras_chalo  
Fecha de Ingreso: junio-2010
Mensajes: 369
Antigüedad: 14 años, 6 meses
Puntos: 6
Respuesta: Pie de pagina que baje a medida que crezca con la información
Cita:
Iniciado por kseso? Ver Mensaje
El código facilitado es insuficiente. Falta el html (generado) para ver a qué y cómo afecta su css.
Lo más eficiente es un enlace a la página del problema.

Con todas las reservas por lo anterior, creo que sus problemas pueden derivar del uso de /position:absolute/
Con ello, está sacando esos elementos del flujo normal del html. Esto es, el resto de elementos se comportan como si no estuviesen presentes (de manera muy concisa y por lo tanto no del todo exacto).
Hola, gracias por responder....

bueno te dejo esta imagen de como me sale ..que es lo que no quiero:



y aca de como debe salir:



bueno la parte a la que me refiero es la parte ploma...

aca dejo el html:
Código HTML: 
Ver original
  1. <div id="footerPanel">
  2.   <div id="footerbodyPanel" align="center">
  3.     
  4.     
  5.     
  6.     <p>&nbsp; </p>
  7.     <p>&nbsp;</p>
  8.     <p>Web Master: <b>Gonzalo Ordenes Reyes</b></p>
  9.     <p>©Todos los derechos reservados</p>
  10.     
  11.     
  12.  
  13.   </div>
  14. </div>
  15.  
  16.  
  17.  
  18. </body>
  19. </html>

y bueno...la verdad que no queria llegar a esto...pero visto a que falta informacion voy adejar todo el css!!
  #4 (permalink)  
Antiguo 06/09/2010, 22:20
Avatar de ras_chalo  
Fecha de Ingreso: junio-2010
Mensajes: 369
Antigüedad: 14 años, 6 meses
Puntos: 6
Respuesta: Pie de pagina que baje a medida que crezca con la información
Código CSS: 
Ver original
  1. /* CSS Document */
  2.  
  3. body{background:#fff; color:#0F0F0F; font:15px/20px Arial, Helvetica, sans-serif; margin:32px 0 0; padding:0;}
  4. div, ul, h1, h2, h3, li, p, img{margin:0; padding:0;}
  5. ul{list-style-type:none;}
  6.  
  7. /* TOP PANEL*/
  8. #topPanel{width:762px; height:90px; position:relative; margin:0 auto; padding:0;}
  9. #topPanel img{width:230px; height:80px; z-index:1; padding:0; position:absolute; margin:0 0 0 21px;}
  10. /* MENU PANEL*/
  11. #topPanel ul{display:block; width:732px; height:36px; position:absolute; top:0; right:0; margin:11px 0 0; padding:0 29px 0 0; border-bottom:1px solid #AEAEAE;}
  12. #topPanel ul li{float:right; font:12px/36px "Trebuchet MS",Arial, Helvetica, sans-serif; font-weight:bold;}
  13. #topPanel ul li a{width:74px; height:36px; display:block; padding:0; color:#555; background:#fff; text-decoration:none; text-align:center; margin:0 1px 0 0; top:0px; left:0px;}
  14. #topPanel ul li a:hover{width:74px; height:36px; text-decoration:none; background:url(images/button.gif) no-repeat 0 0 #AEAEAE; color:#fff;}
  15. #topPanel ul li.active{width:74px; display:block; height:36px; background:url(images/button.gif) no-repeat 0 0 #AEAEAE; color:#fff; text-align:center; margin:0 1px 0 0;}
  16. /* HEADER PANEL*/
  17. #topPanel #headerPanelfast{
  18.     width:246px;
  19.     height:263px;
  20.     position:absolute;
  21.     top:0;
  22.     left:0px;
  23.     margin:110px 0 0;
  24.     padding:0px;
  25.     background:url(images/orange-normal.jpg) no-repeat 0 0 #FC5F00;
  26.     color:#fff;
  27. }
  28. #topPanel #headerPanelfast a{width:246px; height:263px; display:block; text-decoration:none; }
  29. #topPanel #headerPanelfast a:hover{width:246px; height:263px; background:url(images/orange-hover.jpg) no-repeat 0 0 #FC5F00; color:#fff; text-decoration:none;}
  30. #topPanel #headerPanelfast h2{
  31.     display:block;
  32.     width:154px;
  33.     height:47px;
  34.     margin:54px 0 0 120px;
  35.     font:28px/28px "Trebuchet MS",Arial, Helvetica, sans-serif;
  36.     font-weight:bold;
  37.     text-transform:uppercase;
  38.     position:absolute;
  39.     top:74px;
  40.     left:-91px;
  41.     z-index:1;
  42. }
  43. #topPanel #headerPanelfast p{
  44.     width:125px;
  45.     display:block;
  46.     font:12px/18px Arial, Helvetica, sans-serif;
  47.     font-weight:bold;
  48.     position:absolute;
  49.     top:-85px;
  50.     left:67px;
  51.     z-index:1;
  52.     padding:0;
  53.     margin:105px 50px 0 38px;
  54. }
  55.  
  56. #topPanel #headerPanelsecond{width:246px; height:263px; position:absolute; top:0; left:258px; margin:110px 0 0; padding:0px; background:url(images/green-normal.jpg) no-repeat 0 0 #FC5F00; color:#fff;}
  57. #topPanel #headerPanelsecond a{width:246px; height:263px; display:block; text-decoration:none; }
  58. #topPanel #headerPanelsecond a:hover{width:246px; height:263px; background:url(images/green-hover.jpg) no-repeat 0 0 #FC5F00; color:#fff; text-decoration:none;}
  59. #topPanel #headerPanelsecond h2{
  60.     display:block;
  61.     width:90px;
  62.     height:47px;
  63.     background:none;
  64.     margin:54px 0 0 103px;
  65.     font:28px/28px "Trebuchet MS",Arial, Helvetica, sans-serif;
  66.     font-weight:bold;
  67.     text-transform:uppercase;
  68.     padding:0;
  69.     position:absolute;
  70.     z-index:1;
  71.     left: -21px;
  72.     top: 72px;
  73. }
  74. #topPanel #headerPanelsecond p{
  75.     width:127px;
  76.     display:block;
  77.     font:12px/18px Arial, Helvetica, sans-serif;
  78.     font-weight:bold;
  79.     position:absolute;
  80.     top:-85px;
  81.     left:65px;
  82.     z-index:1;
  83.     padding:0;
  84.     margin:105px 50px 0 38px;
  85. }
  86.  
  87. #topPanel #headerPanelthird{width:246px; height:263px; position:absolute; top:0; right:0; margin:110px 0 0; padding:0px; background:url(images/blue-normal.jpg) no-repeat 0 0 #FC5F00; color:#fff;}
  88. #topPanel #headerPanelthird a{width:246px; height:263px; display:block; text-decoration:none; }
  89. #topPanel #headerPanelthird a:hover{width:246px; height:263px; background:url(images/blue-hover.jpg) no-repeat 0 0 #FC5F00; color:#fff; text-decoration:none;}
  90. #topPanel #headerPanelthird h2{
  91.     display:block;
  92.     width:90px;
  93.     height:47px;
  94.     background:none;
  95.     margin:54px 0 0 93px;
  96.     font:28px/28px "Trebuchet MS",Arial, Helvetica, sans-serif;
  97.     font-weight:bold;
  98.     text-transform:uppercase;
  99.     padding:0;
  100.     position:absolute;
  101.     z-index:1;
  102.     left: -15px;
  103.     top: 72px;
  104. }
  105. #topPanel #headerPanelthird p{
  106.     width:123px;
  107.     display:block;
  108.     font:12px/18px Arial, Helvetica, sans-serif;
  109.     font-weight:bold;
  110.     position:absolute;
  111.     top:-87px;
  112.     left:70px;
  113.     z-index:1;
  114.     padding:0;
  115.     margin:105px 50px 0 38px;
  116. }
  117. /* /TOP PANEL*/
  118.  
  119. /* BODY PANEL*/
  120. #bodyPanel{width:762px; height:350px; position:relative; margin:0 auto; padding:0;}
  121. #bodyPanel h2{ background:#fff; display:block; width:250px; height:50px; margin:0; font:30px/30px Georgia, "Times New Roman", Times, serif; font-weight:normal; padding:4px 0 0 202px; color:#FF7113;}
  122. #bodyPanel p{background:url 0 0 no-repeat #fff; margin:0 0 0 54px; padding:0 42px 35px 150px; color:#0F0F0F;}
  123. #bodyPanel p span{font-weight:bold;}
  124. #bodyPanel p.dotline{background:url(images/dot-line.gif) 0 0 repeat-x #fff; padding:0; margin:0 40px 0 25px; color:#000;}
  125. #bodyPanel p.capstext{background: url(images/name.gif) bottom right no-repeat #fff; font:18px/24px Georgia, "Times New Roman", Times, serif; font-style:italic; color:#555555; padding:2px 10px 0 25px ; margin:0 35px 10px 0; }
  126. #bodyPanel p.more{height:26px; padding:0; background:none; margin:0;}
  127. #bodyPanel p.more a{
  128.     width:76px;
  129.     height:26px;
  130.     display:block;
  131.     margin:314px 20px 19px 618px;
  132.     background:url(images/more.gif) 0 0 no-repeat #fff;
  133.     color:#555;
  134.     text-decoration:none;
  135.     font:15px/26px "Trebuchet MS",Arial, Helvetica, sans-serif;
  136.     padding:0 0 0 10px;
  137.     text-transform:uppercase;
  138.     position:absolute;
  139.     top:-68px;
  140.     right:62px;
  141. }
  142. #bodyPanel p.more a:hover{background:url(images/more.gif) 0 0 no-repeat #fff; color:#216EBD; text-decoration:none;}
  143. #bodyPanel h3{background:#fff; display:block; width:228px; height:34px; margin:34px 0 12px 0; font:30px/30px Georgia, "Times New Roman", Times, serif; font-weight:normal; padding:0 0 0 20px; color:#FF7113;}
  144. #bodyPanel #testimonial{width:283px; height:162px; display:block; background:url(images/testimonial-bg.gif) 0 0 no-repeat #FFF6DB; padding:32px 33px 0 148px; margin:0 0 0 20px; color:#786321;}
  145. #bodyPanel #testimonial p{background:none; margin:0; padding:0 0 5px 0;}
  146. #bodyPanel #testimonial p span{color:#786321 !Important; background:#FFFAED !Important;}
  147. #bodyPanel p.moretwo{height:26px; padding:0; background:none; margin:0;}
  148. #bodyPanel p.moretwo a{width:76px; height:26px; display:block; margin:0px 0px 0px 196px; background:url(images/more2.gif) 0 0 no-repeat #FFF5D6; color:#555; text-decoration:none; font:15px/26px "Trebuchet MS",Arial, Helvetica, sans-serif; text-transform:uppercase; padding:0 0 0 10px; top:0px; right:0px;}
  149. #bodyPanel p.moretwo a:hover{background:url(images/more2.gif) 0 0 no-repeat #FFF5D6; color:#216EBD; text-decoration:none;}
  150. #bodyPanel h4{ background:#fff; width:250px; height:30px; position:absolute; top:361px; right:5px; margin:0; font:30px/30px Georgia, "Times New Roman", Times, serif; font-weight:normal; padding:0px; color:#FF7113;}
  151. #bodyPanel ul{
  152.     width:225px;
  153.     display:block;
  154.     position:absolute;
  155.     right:51px;
  156.     top:57px;
  157. }
  158. #bodyPanel ul li{font:12px/25px Arial, Helvetica, sans-serif; font-weight:normal; background:url(images/symbol2.gif) 0 8px no-repeat; padding:0 0 0 30px;}
  159. #bodyPanel ul span{ background:url(images/dot-line.gif) repeat-x 0 100%; height:25px; display:block;}
  160. /* FOOTER PANEL*/
  161. #footerPanel{width:100%; background:#DCDCDC; color:#4C4C4C; font-size:12px;}
  162. #footerbodyPanel{width:762px; height:133px; position:relative; margin:0 auto; padding:0;}
  163. #footerPanel ul{width:320px; display:block; position:absolute; right:10px; top:33px; }
  164. #footerPanel li{float:left; font:12px/15px Arial, Helvetica, sans-serif; font-weight:normal;}
  165. #footerPanel ul li a{padding:0 6px; color:#4C4C4C; background:#DCDCDC; text-decoration:none;}
  166. #footerPanel ul li a:hover{text-decoration:underline;}
  167. #footerPanel ul li a.padl{padding:0 0 0 6px;}
  168. #footerPanel p.copyright{
  169.     background:#DCDCDC;
  170.     display:block;
  171.     position:absolute;
  172.     top:54px;
  173.     right:45px;
  174.     color:#A64200;
  175.     width: 219px;
  176. }
  177. #footerPanel ul.templateworld{width:158px; background:#DCDCDC; color:#4C4C4C; display:block; position:absolute; top:74px; right:40px;}
  178. #footerPanel ul.templateworld li a{background:#DCDCDC; display:block; color:#4C4C4C; text-decoration:none;}
  179. #footerPanel ul.templateworld li a:hover{text-decoration:underline;}
  180.  
  181. #footerhtmlPanel{ width:86px; height:31px; display:block; position:absolute; top:34px; left:29px; margin:0; padding:0;} 
  182. #footerhtmlPanel a{
  183.     width:86px;
  184.     height:31px;
  185.     display:block;
  186.     background:url(images/html-img.gif) no-repeat 0 0 #DCDCDC;
  187.     text-decoration:none;
  188.     font:14px/31px "Trebuchet MS",Arial, Helvetica, sans-serif;
  189.     color:#2F2F2F;
  190.     text-transform:uppercase;
  191.     padding:0 0 0 10px;
  192.     position:absolute;
  193.     top:1px;
  194.     right:-12px;
  195. }
  196. #footerhtmlPanel a:hover{background:url(images/html-img.gif) no-repeat 0 0 #DCDCDC; color:#216EBD; text-decoration:none; }
  197. #footercssPanel{ width:86px; height:31px; display:block; position:absolute; top:34px; left:115px; margin:0; padding:0;} 
  198. #footercssPanel a{ width:86px; height:31px; display:block; background:url(images/css-img.gif) no-repeat 0 0 #DCDCDC; text-decoration:none; font:14px/31px "Trebuchet MS",Arial, Helvetica, sans-serif; color:#2F2F2F; text-transform:uppercase; padding:0 0 0 10px; position:absolute; top:0px; right:0px;}
  199. #footercssPanel a:hover{background:url(images/css-img.gif) no-repeat 0 0 #DCDCDC; color:#216EBD; text-decoration:none; }

disculpen si llega a ser ordinario el post...pero no me queda otra =(

Bueno ojala me puedan ayudar...espero sus respuestas.
de ante mano muchas gracias!
  #5 (permalink)  
Antiguo 07/09/2010, 16:20
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 17 años, 6 meses
Puntos: 539
Respuesta: Pie de pagina que baje a medida que crezca con la información
El problema no es del pie de página. Debe ser de los elementos precedentes a él en el html.
Busque información relativa a "limpiar float", por ejemplo éste.

Para que vea el problema, ponga un borde a la caja que contiene a los elemento anteriores al pie, o use firebug para que vea hasta donde llega.

Si no lo solucciona con lo anterior, ponga un enlace a la página, por favor, para ver el problema in situ y así tener conocimiento de todo lo que lo afecta, bien diréctamente o por herencia.
  #6 (permalink)  
Antiguo 08/09/2010, 00:32
Avatar de ras_chalo  
Fecha de Ingreso: junio-2010
Mensajes: 369
Antigüedad: 14 años, 6 meses
Puntos: 6
De acuerdo Respuesta: Pie de pagina que baje a medida que crezca con la información
Cita:
Iniciado por kseso? Ver Mensaje
El problema no es del pie de página. Debe ser de los elementos precedentes a él en el html.
Busque información relativa a "limpiar float", por ejemplo éste.

Para que vea el problema, ponga un borde a la caja que contiene a los elemento anteriores al pie, o use firebug para que vea hasta donde llega.

Si no lo solucciona con lo anterior, ponga un enlace a la página, por favor, para ver el problema in situ y así tener conocimiento de todo lo que lo afecta, bien diréctamente o por herencia.
EXCELENTE!!

me costo un poco, pero lo logre!!

y bueno te comento que tenias razón, me enfoque en "limpiar float" y pegue este código en el CSS:

Código CSS: 
Ver original
  1. div.clear {
  2.   clear: both;
  3. }

añadiendo en el HTML el código a continuación, debajo del elemento que aumentara.
Código HTML: 
Ver original
  1. <div class="clear"> </div>

Bueno al principio no me funcionaba, pero nose porque se me ocurrió ponerle unos iconos al final (justo necesitaba ponerle un icono de una impresora) y al actualizar...funciono!, pero no me queda claro porque al ponerle unos iconos (.png) funciono, ya que tambien probé solamente con letras dentro del mismo <div> que los iconos y no tuvo el mismo resultado...

no me queda claro porque ocurre eso. Me lo podrías explicar???

Como te digo, me costo un poco... porque al principio estuve modificando los float de los FooterPanel... luego de un análisis se me prendió la ampolleta y bueno hice lo ya mencionado ....

De todas maneras jamas hubiera llegado a eso si no fuera por tu ayuda...


MUCHAS GRACIAS!!
Saludos y gracias por tu tiempo
  #7 (permalink)  
Antiguo 08/09/2010, 07:27
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 17 años, 6 meses
Puntos: 539
Respuesta: Pie de pagina que baje a medida que crezca con la información
Cita:
no me queda claro porque ocurre eso. Me lo podrías explicar???
Pues sinceramente no.
No se el porqué sucede eso en su caso. Como ya le he indicado en varios comentarios, es prácticamente imposible hacer un análisis y proponer soluciones "ad hoc" sin poder acceder a la página en cuestión.

Pero todo eso ahora es secundario. Lo importante es que haya podido arreglar la incidencia y que por el camino ha aprendido algo.
Me alegra haber contribuido en algo.
  #8 (permalink)  
Antiguo 08/09/2010, 08:09
Avatar de ras_chalo  
Fecha de Ingreso: junio-2010
Mensajes: 369
Antigüedad: 14 años, 6 meses
Puntos: 6
Respuesta: Pie de pagina que baje a medida que crezca con la información
Cita:
Iniciado por kseso? Ver Mensaje
Pues sinceramente no.
No se el porqué sucede eso en su caso. Como ya le he indicado en varios comentarios, es prácticamente imposible hacer un análisis y proponer soluciones "ad hoc" sin poder acceder a la página en cuestión.

Pero todo eso ahora es secundario. Lo importante es que haya podido arreglar la incidencia y que por el camino ha aprendido algo.
Me alegra haber contribuido en algo.
si claro entiendo.... lo importante es que solucione este tema... a seguir avanzando !

Saludos y gracias otra vez

Etiquetas: pie
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 03:18.