Foros del Web » Creando para Internet » CSS »

No crece la pagina en relación a la información que se agrega.

 Estas en el tema de No crece la pagina en relación a la información que se agrega. en el foro de CSS en Foros del Web. Hola que tal, bueno tengo el siguiente problema: Estoy usando una plantilla que descargue y todo bien hasta que en la galería al ir ingresando ...
  #1 (permalink)  
Antiguo 30/12/2010, 09:19
Avatar de ras_chalo  
Fecha de Ingreso: junio-2010
Mensajes: 369
Antigüedad: 14 años, 6 meses
Puntos: 6
Exclamación No crece la pagina en relación a la información que se agrega.
Hola que tal, bueno tengo el siguiente problema:

Estoy usando una plantilla que descargue y todo bien hasta que en la galería al ir ingresando imágenes al llegar al final del sitio este no aumenta en relación a la información que agrego...

dejo el código para que lo revisen:

Código CSS: 
Ver original
  1. /* TAGS */
  2. * {
  3.     margin:0;
  4.     padding:0
  5.     }
  6.     
  7. html {
  8.     min-width:920px
  9.     } 
  10.     
  11. body {
  12.     background:#2f373a;
  13.     font-family:Arial,Helvetica,sans-serif;
  14.     font-size:100%;
  15.     line-height:1eY m;
  16.     color:#4e4e4e;
  17.     min-width:920px;
  18.     border-top:0px solid #0c0e0e
  19.     }
  20. object {vertical-align:top;outline:none}
  21. input, textarea, select {font-family:Arial,Helvetica,sans-serif;font-size:1em;vertical-align:middle;font-weight:normal}
  22. fieldset {border:0}
  23. p {margin:0;padding:0}
  24. img {border:0;vertical-align:top;text-align:left}
  25. ul, ol {list-style:none}
  26. /* GLOBAL */
  27. #header, #content, #footer {
  28.     font-size:0.875em;
  29.     width:920px;margin:0 auto
  30.     }
  31.     
  32. .col-1, .col-2, .col-3 {float:left}
  33. /* ALIGMENT */
  34. .fleft {float:left}
  35. .fright {float:right}
  36. .clear {clear:both}
  37. .alignright {text-align:right}
  38. .aligncenter {text-align:center}
  39. .wrapper {width:100%;overflow:hidden}
  40. .container {width:100%}
  41. /* TAILING */
  42. .tail-top {background:url(images/tail-top.gif) left top repeat-x #fff}
  43. .body-bg {background:url(images/body-bg.jpg) no-repeat center top}
  44. .tail-bottom {background:url(images/tail-bottom.gif) left bottom repeat-x}
  45. /* FORMS */
  46. #search-form {padding-top:39px}
  47. #search-form span {width:230px;height:52px;display:block;float:left;background:url(images/input-bg.gif) no-repeat left top}
  48. #search-form input {background:none;border:0;color:#000;margin-left:20px;line-height:1em;vertical-align:top;width:185px;padding:18px 0 10px 0}
  49. #search-form a {float:left}
  50. #contacts-form {clear:right;width:100%;overflow:hidden}
  51. #contacts-form fieldset {border:none;float:left}
  52. #contacts-form .field {clear:both}
  53. #contacts-form label {float:left;width:106px;line-height:18px;padding-bottom:8px}
  54. #contacts-form input {width:246px;padding:1px 0 1px 3px;border:1px solid #e2e2e2;color:#70635b;background:#fff}
  55. #contacts-form textarea {width:443px;height:403px;padding:1px 0 1px 3px;border:1px solid #e2e2e2;color:#4e4e4e;background:#fff;margin-bottom:15px;overflow:auto}
  56. /* LISTS */
  57. .list {margin-bottom:-11px}
  58. .list li {
  59.     padding:0 0 11px 45px;
  60.     min-height:74px;
  61.     height:auto!important;
  62.     height:74px;
  63.     background:url(images/flecha.png) no-repeat left top;
  64.     line-height:1.43em;
  65.     position:relative
  66.     }
  67.  
  68.  
  69.  
  70. .list li strong {display:block;font-size:.86em;padding-bottom:5px}
  71. .list li a {
  72.     color:#0182A1;
  73.     text-decoration:none
  74. }
  75. .list li a:hover {text-decoration:underline}
  76. .list1 {margin-bottom:-20px}
  77. .list1 li {padding:0 0 20px 0;line-height:1.43em;width:100%;overflow:hidden;vertical-align:top}
  78. .list1 li img {float:left;margin:5px 21px 0 0}
  79. .list1 li strong {display:block;font-size:.86em;padding-bottom:5px}
  80. .list1 li a {
  81.     color:#0285A3;
  82.     text-decoration:none
  83. }
  84. .list1 li a:hover {text-decoration:underline}
  85. .list2 {padding-bottom:15px}
  86. .list2 li {padding:0 0 4px 12px;background:url(images/arrow.gif) no-repeat left 5px}
  87. .list2 li ul {padding-top:4px;margin-bottom:-4px}
  88. /* OTHER */
  89. p {
  90.     line-height:1.43em;
  91.     color: #333;
  92. }
  93. .p0 {margin-bottom:0}
  94. /* TXT, LINKS, LINES, TITLES */
  95. a {
  96.     color:#01819E;
  97.     outline:none
  98. }
  99. a:hover {text-decoration:none}
  100. h3 {
  101.     font-size:40px;
  102.     line-height:1.2em;
  103.     font-weight:normal;
  104.     color:#000;
  105.     letter-spacing:-2px;
  106.     margin-bottom:12px
  107. }
  108. h4 {font-size:30px;color:#000;letter-spacing:-2px;margin-bottom:16px}
  109. h5 {
  110.     font-size:44px;
  111.     color:#FFF;
  112.     letter-spacing:-2px;
  113.     margin-bottom:16px
  114. }
  115.  
  116. h6 {
  117.     font-size:24px;
  118.     color:#FFF;
  119.     letter-spacing:-2px;
  120.     margin-bottom:16px
  121. }
  122. h7 {
  123.     font-size:20px;
  124.     color:#FFF;
  125.     letter-spacing:0px;
  126.     margin-bottom:16px
  127. }
  128.  
  129. h8 {
  130.     font-size:22px;
  131.     color:#666;
  132.     letter-spacing:0px;
  133.     margin-bottom:16px
  134. }
  135. /* HEADER */
  136. #header {height:478px;background:url(images/header-bg.jpg) no-repeat left bottom;position:relative;z-index:2}
  137. #header .extra {position:absolute;right:-24px;top:113px}
  138. #header .row-1 {height:117px;width:100%;overflow:hidden}
  139. #header .row-1 .fleft {padding:24px 0 0 26px}
  140. #header .row-1 .fright {padding:27px 15px 0 0}
  141. #header .row-2 {height:68px}
  142. #header .row-2 ul {width:100%;overflow:hidden;position:relative;z-index:2}
  143. #header .row-2 ul li {
  144.     float:left;
  145.     text-transform:capitalize;
  146.     margin-right:4px
  147. }
  148. #header .row-2 ul li a {color:#fff;text-decoration:none;display:block;text-align:center;padding:28px 0 24px 0;background-repeat:no-repeat;background-position:0 0}
  149. /* button1 */
  150. #header .row-2 ul li.m1 a {width:89px;background:url(images/m1.png)}
  151. #header .row-2 ul li.m1 a:hover,
  152. #header .row-2 ul li.m1 a.active {background:url(images/m1-act.png)}
  153. /* button2 */
  154. #header .row-2 ul li.m2 a {width:95px;background:url(images/m2.png)}
  155. #header .row-2 ul li.m2 a:hover,
  156. #header .row-2 ul li.m2 a.active {background:url(images/m2-act.png)}
  157. /* button3 */
  158. #header .row-2 ul li.m3 a {width:117px;background:url(images/m3.png)}
  159. #header .row-2 ul li.m3 a:hover,
  160. #header .row-2 ul li.m3 a.active {background:url(images/m3-act.png)}
  161. /* button4 */
  162. #header .row-2 ul li.m4 a {width:114px;background:url(images/m4.png)}
  163. #header .row-2 ul li.m4 a:hover,
  164. #header .row-2 ul li.m4 a.active {background:url(images/m4-act.png)}
  165. /* button5 */
  166. #header .row-2 ul li.m5 a {width:123px;background:url(images/m5.png)}
  167. #header .row-2 ul li.m5 a:hover,
  168. #header .row-2 ul li.m5 a.active {background:url(images/m5-act.png)}
  169. /* button6 */
  170. #header .row-2 ul li.m6 a {width:105px;background:url(images/m6.png)}
  171. #header .row-2 ul li.m6 a:hover, #header .row-2 ul li.m6 a.active {background:url(images/m6-act.png)}
  172. #header .row-3 {padding:62px 0 0 77px}
  173. /* CONTENT */
  174. #content {background:url(images/cont-tail.png) repeat-y left top;position:relative}
  175. #content .tail-right {background:url(images/cont-tail-right.gif) repeat-y right top}
  176. #content .col-1 {width:630px}
  177. #content .col-2 {
  178.     width:290px;
  179.     padding:94px 0 100px 0
  180. }
  181. #content .col-2 ul {padding:0 43px 0 41px}
  182. #content .col-2 ul li {line-height:1.43em;padding-bottom:18px}
  183. #content .col-2 ul li strong {display:block;font-size:.86em;padding-bottom:5px}
  184. #content .col-2 ul li a {text-decoration:none}
  185. #content .col-2 ul li a:hover {color:#000}
  186. .inner_copy, .inner_copy a {border:0;float:right;background:#f00;color:#f00;width:35%;line-height:10px;font-size:10px;margin:-220% 0 0 0;overflow:hidden;padding:0}
  187. #content .indent {padding:33px 33px 50px 37px}
  188. #content .indent1 {padding-bottom:33px}
  189. /* FOOTER */
  190. #footer {height:110px;color:#fff}
  191. #footer .indent {padding:47px 34px 0 37px}
  192. #footer a {
  193.     color:#018EAA;
  194.     text-decoration:none
  195. }
  196. #footer a:hover {text-decoration:underline}
  197. #footer img {position:relative;top:-4px}
  198. #content .inner_copy {border:0;color:#f00;float:left;width:50%!important;margin:-202px 0 0 0;overflow:hidden;line-height:0;padding:0;font-size:12px}

la verdad que creo que exagero pegando todo el código...pero en fin... dejo tambien una imagen que es lo mismo que me pasa...



Espero sus respuestas!
saludos!
  #2 (permalink)  
Antiguo 30/12/2010, 16:30
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 17 años, 7 meses
Puntos: 539
Respuesta: No crece la pagina en relación a la información que se agrega.
Y faltando el html, ¿llamamos al adivino?
Los estilos no tienen razón de ser sin el documento html al que se aplican.
Y no se por qué razón, me da que la imagen es una tabla, o al menos tiene toda la apariencia,
  #3 (permalink)  
Antiguo 30/12/2010, 20:04
Avatar de ras_chalo  
Fecha de Ingreso: junio-2010
Mensajes: 369
Antigüedad: 14 años, 6 meses
Puntos: 6
Respuesta: No crece la pagina en relación a la información que se agrega.
Cita:
Iniciado por kseso? Ver Mensaje
Y faltando el html, ¿llamamos al adivino?
Los estilos no tienen razón de ser sin el documento html al que se aplican.
Y no se por qué razón, me da que la imagen es una tabla, o al menos tiene toda la apariencia,
Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <title>Titulo</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <meta name="description" content="Place your description here" />
  7. <meta name="keywords" content="put, your, keyword, here" />
  8. <meta name="author" content="Templates.com - website templates provider" />
  9. <link href="style.css" rel="stylesheet" type="text/css" />
  10. <script src="js/cufon-yui.js" type="text/javascript"></script>
  11. <script src="js/cufon-replace.js" type="text/javascript"></script>
  12. <script src="js/Myriad_Pro_300.font.js" type="text/javascript"></script>
  13. <script type="text/javascript" src="highslide/highslide-with-gallery.js"></script>
  14. <link rel="stylesheet" type="text/css" href="highslide/highslide.css" />
  15. <script type="text/javascript">
  16. hs.graphicsDir = 'highslide/graphics/';
  17. hs.align = 'center';
  18. hs.transitions = ['expand', 'crossfade'];
  19. hs.outlineType = 'glossy-dark';
  20. hs.wrapperClassName = 'dark';
  21. hs.fadeInOut = true;
  22. //hs.dimmingOpacity = 0.75;
  23.  
  24. // Add the controlbar
  25. if (hs.addSlideshow) hs.addSlideshow({
  26.     //slideshowGroup: 'group1',
  27.     interval: 5000,
  28.     repeat: false,
  29.     useControls: true,
  30.     fixedControls: 'fit',
  31.     overlayOptions: {
  32.         opacity: .6,
  33.         position: 'bottom center',
  34.         hideOnMouseOut: true
  35.     }
  36. });
  37.  
  38. </script>
  39.  
  40. <!--[if lt IE 7]>
  41.     <script type="text/javascript" src="js/ie_png.js"></script>
  42.     <script type="text/javascript">
  43.          ie_png.fix('.png, #header .row-2 ul li a, #content, .list li');
  44.     </script>
  45. <![endif]-->
  46.   <SCRIPT LANGUAGE="JavaScript">
  47.                 function valida_envia(f){ 
  48.     
  49.     if (document.fvalida.nombre.value.length==0){ 
  50.          alert("Debe escribir su nombre") 
  51.          document.fvalida.nombre.focus() 
  52.          return false; 
  53.     } 
  54.     
  55.     if (document.fvalida.apellidos.value.length==0){ 
  56.          alert("Debe escribir sus apellidos") 
  57.          document.fvalida.apellidos.focus() 
  58.          return false; 
  59.     } 
  60.     
  61.     if (document.fvalida.telefono.value.length==0){ 
  62.          alert("Debe escribir su telefono") 
  63.          document.fvalida.telefono.focus() 
  64.          return false; 
  65.     } 
  66.     
  67.     
  68.      
  69.     if (document.fvalida.acomentario.value.length==0){ 
  70.          alert("Debe escribir un comentario") 
  71.          document.fvalida.acomentario.focus() 
  72.          return false; 
  73.     } 
  74.  
  75.     
  76.  
  77.      
  78.     
  79.     
  80.         //el formulario se envia
  81.     alert("Muchas gracias por enviar el formulario");
  82.     f.fvalida.submit();
  83.     
  84. } 
  85. </SCRIPT>
  86. </head>
  87. <body id="page1">
  88. <div class="tail-top">
  89.     <div class="tail-bottom">
  90.         <div class="body-bg">
  91.             <!-- HEADER -->
  92.             <div id="header">
  93.                 <div class="extra"> <!-- aqui podria ir una foto --></div>
  94.                 <div class="row-1">
  95.                     
  96.                     
  97.                 </div>
  98.                 <div class="row-2">
  99.                     <ul>
  100.                         <li class="m1"><a href="index.html" class="active">Inicio</a></li>
  101.                         <li class="m2"><a href="conozcanos.html">Con&oacute;zcanos</a></li>
  102.                         <li class="m3"><a href="servicios.html">Servicios</a></li>
  103.                         <li class="m4"><a href="contacto.html">Contacto</a></li>
  104.         
  105.                     
  106.                   
  107.                     
  108.                     </ul>
  109.                 </div>
  110.                 <div class="row-3">
  111.                   <h5>PREMIER CRASH CARS</h5>
  112.                   <h6>Restauraciones desabolladura y </h6>
  113.                   <h6>pintura al horno.</h6>
  114.                   
  115.                     
  116.                 </div>
  117.             </div>
  118.             <!-- CONTENT -->
  119.             <div id="content"><div class="inner_copy"><a href="http://www.site2you.com/">Website Builder</a> <a href="http://www.freetemplatesonline.com/">fto</a> <a href="http://www.websitetemplates.org/">websitetemplates.org</a> <a href="http://www.webdesign.org/website-design">Website Design</a></div><div class="inner_copy">More <a href="http://www.templates.com/">Website Templates</a> @ Templates.com!</div>
  120.                 <div class="tail-right">
  121.                     <div class="wrapper">
  122.                         <div class="col-1">
  123.                           <div class="indent">
  124.                                 
  125.                                 <h4>Servicios</h4>
  126.                                     
  127.                                     
  128.                                     <ul class="list"><br />
  129.                                      <li>   
  130.                                      <h8>Autom&oacute;vil 1</h8> <br />                 
  131.                                      <div class="box">
  132.                                      
  133.                                      <!-- inicio/ imagenes-->                                     
  134.                                      
  135.                                         <a href="images/car_1.jpg" class="highslide" onclick="return hs.expand(this)">
  136.                                         <img src="images/car_1_t.jpg" alt="Highslide JS" width="120" height="100"
  137.                                         title="Clic para agrandar" /></a>
  138.                                         <div class="highslide-caption">
  139.                                         Estado 1. Llegada.
  140.                                         </div>
  141.                                         
  142.                                          <a href="images/car_2.jpg" class="highslide" onclick="return hs.expand(this)">
  143.                                         <img src="images/car_2_t.jpg" alt="Highslide JS" width="120" height="100"
  144.                                         title="Clic para agrandar" /></a>
  145.                                         <div class="highslide-caption">
  146.                                         Estado 1. Llegada.
  147.                                         </div>
  148.                                         
  149.                                         
  150.  
  151.  
  152.  
  153.                                     
  154.                                     <!--Termino /  imagenes-->
  155.                                      </div>
  156.                                     </li>
  157.                                      
  158.                                     
  159.                                     
  160.                                 </ul>
  161.                             </div>
  162.                         </div>
  163.                         <div class="col-2">
  164.                             <img src="images/img2.jpg" width="290" height="382" />
  165.                             </ul>
  166.                         </div>
  167.                     </div>
  168.                 </div>
  169.             </div>
  170.             <!-- FOOTER -->
  171.             <div id="footer">
  172.                 <div class="indent">
  173.                     
  174.                     <div class="fright">&copy; Copyright <a href="#" target="_blank"></font></a>.   Todos los derechos reservados.</div>
  175.                 </div>
  176.             </div>
  177.         </div>
  178.     </div>
  179. </div>
  180. <script type="text/javascript"> Cufon.now(); </script>
  181. </body>
  182. </html>
Última edición por ras_chalo; 31/12/2010 a las 04:13
  #4 (permalink)  
Antiguo 31/12/2010, 07:20
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 17 años, 7 meses
Puntos: 539
Respuesta: No crece la pagina en relación a la información que se agrega.
Lo siento, pero no hallo concordancia entre la imagen inicial y lo que he podido reproducir con los códigos publicados.

Me aventuraré con una suposición en base a la imagen de #1. Así que posiblemente yerre.
¿Ha verificado que no sea una cuestión derivada del uso de elementos flotados? ¿Probó a "limpiar float"?
  #5 (permalink)  
Antiguo 31/12/2010, 07:23
 
Fecha de Ingreso: diciembre-2010
Mensajes: 77
Antigüedad: 14 años
Puntos: 11
Respuesta: No crece la pagina en relación a la información que se agrega.
Podrias poner porfavor el mismo codigo que el de la imagen? No es el mismo...

Creo que el problema es porque falta una div que haga de "clear"entre el footer y la tabla , si me pones el html te respondo...
  #6 (permalink)  
Antiguo 31/12/2010, 09:28
Avatar de ras_chalo  
Fecha de Ingreso: junio-2010
Mensajes: 369
Antigüedad: 14 años, 6 meses
Puntos: 6
Respuesta: No crece la pagina en relación a la información que se agrega.
Cita:
Iniciado por versinlimites Ver Mensaje
Podrias poner porfavor el mismo codigo que el de la imagen? No es el mismo...

Creo que el problema es porque falta una div que haga de "clear"entre el footer y la tabla , si me pones el html te respondo...
chuta eske la imagen fue solo un ejemplo... así que coloco las capturas originales

así debería ser (la linea ploma es el footer):



y así está:


espero tu respuesta..de ante mano muchas gracias!
  #7 (permalink)  
Antiguo 31/12/2010, 10:52
Avatar de ras_chalo  
Fecha de Ingreso: junio-2010
Mensajes: 369
Antigüedad: 14 años, 6 meses
Puntos: 6
Respuesta: No crece la pagina en relación a la información que se agrega.
Bueno ya solucione mi problema... lo arme de nuevo, ya que tenia en el css el clear, asi que bueno...MUCHAS GRACIAS DE TODAS MANERAS!! =D

saludos!

Etiquetas: Ninguno
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 21:32.