Foros del Web » Creando para Internet » CSS »

aumentar div del centro de acuerdo a la cantidad de noticias....

Estas en el tema de aumentar div del centro de acuerdo a la cantidad de noticias.... en el foro de CSS en Foros del Web. Hola peoples, tengo un sistema de noticias en el que mi plantilla esta formada por un div contenedor, dentro de este header, columna_der, columna_centro, columna_izq ...
  #1 (permalink)  
Antiguo 16/01/2010, 20:13
 
Fecha de Ingreso: octubre-2007
Mensajes: 253
Antigüedad: 10 años, 2 meses
Puntos: 3
aumentar div del centro de acuerdo a la cantidad de noticias....

Hola peoples, tengo un sistema de noticias en el que mi plantilla esta formada por un div contenedor, dentro de este header, columna_der, columna_centro, columna_izq y fuera del contenedor el footer. En mi pagina principal muestro(dentro del div del centro) muestro 7 resumenes de noticias por paginas para que el usuario marque cualquiera y acceda al contenido completo de la noticia. Mi problema es que el resumen de cada noticia puede variar y llega un momento en que el div del centro sobrepasa el tamanho del div contenedor, es decir, no se como aumentar el div contenedor de acuerdo al tamanho del div del centro.

disculpen la explicacion, un poco engorrosa, pero es como mejor lo puedo ilustrar.
  #2 (permalink)  
Antiguo 17/01/2010, 03:35
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: aumentar div del centro de acuerdo a la cantidad de noticias....

Hola:

Sin ver tu código es difícil saber que pasa pero...

¿el contenedor tiene tamaño fijo? No debería ser así, si le das un tamaño determinado no crecerá nunca.

Saludos.

  #3 (permalink)  
Antiguo 17/01/2010, 04:18
 
Fecha de Ingreso: octubre-2007
Mensajes: 253
Antigüedad: 10 años, 2 meses
Puntos: 3
Respuesta: aumentar div del centro de acuerdo a la cantidad de noticias....

jomaruro, aqui esta mi codigo css, no creo este lo mas optimo posible

.
Código CSS:
Ver original
  1. wrapper{
  2.     background:white; /*#2E90BD;*/
  3.     border:#2E90BD 1px solid;
  4.     width:970px;
  5.     height:90%;
  6.     min-height:1000px;
  7.     margin-top:2em;
  8.     margin-left:2em;
  9.     border:1px solid #2E90BD;
  10.     font-size:10px;
  11.     -moz-border-radius-topright: 10px;
  12.     -moz-border-radius-topleft: 10px;
  13.     /*
  14.     -moz-border-radius-bottomright: 10px;
  15.     -moz-border-radius-bottomleft: 10px;
  16.     */
  17. }
  18.  
  19. .banner{
  20.     width:100%;
  21.     height:170px;
  22.     -moz-border-radius-topright: 8px;
  23.     -moz-border-radius-topleft: 8px;       
  24.    
  25. }
  26.  
  27. .left_panel{
  28.     position:absolute;
  29.     left:33px;
  30.     top:200px;
  31.     width:200px;
  32.     height:100%;
  33. }
  34.  
  35. .center_panel{
  36.     position:absolute;
  37.     left:238px;
  38.     top:200px;
  39.     width:555px;
  40.     height:100%;
  41. }
  42.  
  43. .right_panel{
  44.     position:absolute;
  45.     top:200px;
  46.     left:796px;
  47.     width:200px;
  48.     height:100%;
  49. }
  50.  
  51. .footer{
  52.     background-color:#2E90BD;
  53.     color:white;
  54.     border:#2E90BD 1px solid;
  55.     font-weight:900;
  56.     text-transform:uppercase;
  57.     text-align:center;
  58.     font-size:10px;
  59.     font-family:Lucida, Verdana, Sans-serif;
  60.     letter-spacing:1.5px;
  61.     margin-left:2em;
  62.     padding-top:7px;
  63.     width:972px;
  64.     height:20px;
  65.     -moz-border-radius-bottomright: 10px;
  66.     -moz-border-radius-bottomleft: 10px;
  67. }

y este es el html:

Código HTML:
Ver original
  1. <div class="wrapper">
  2.     <div class="banner"></div>
  3.     <div class="left_panel"></div>
  4.     <div class="center_panel"></div>
  5.     <div class="right_panel"></div>
  6. </div>
  7. <div class="footer"></div>

anteriormente habia incluido el footer dentro el div wrapper y asi solo tenia que darle al wrapper margin:2em auto; y con eso ya lo centraba, pero saque fuera el footer buscandole una solucion al alto variable del div del centro pero no la encontre.

realmente no se como hacer lo del alto variable para el wrapper !!!!
  #4 (permalink)  
Antiguo 17/01/2010, 05:36
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: aumentar div del centro de acuerdo a la cantidad de noticias....

Hola:

Modifica en tu css lo que te indico en rojo:

Código:
.wrapper{
    background:white; /*#2E90BD;*/
    border:#2E90BD 1px solid;
    width:970px;
    /*height:90%;*/
    min-height:1000px;
    margin-top:2em;
    margin-left:2em;
    border:1px solid #2E90BD;
    font-size:10px;
    overflow:auto;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-topleft: 10px;
    /*
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;
    */
}
 
.banner{
    width:100%;
    height:170px;
    -moz-border-radius-topright: 8px;
    -moz-border-radius-topleft: 8px;
}

.left_panel{
    /*position:absolute;*/
    float:left;
    /*left:33px;
    top:200px;*/
    width:200px;
    /*height:100%;*/
}
 
.center_panel{
    /*position:absolute;*/
    float:left;
    /*left:238px;
    top:200px;*/
    width:555px;
    height:auto;
}
 
.right_panel{
    /*position:absolute;*/
	float:left;
    /*top:200px;
    left:796px;*/
    width:200px;
    /*height:100%;*/
}
 
.footer{
    background-color:#2E90BD;
    color:white;
    border:#2E90BD 1px solid;
    font-weight:900;
    text-transform:uppercase;
    text-align:center;
    font-size:10px; 
    font-family:Lucida, Verdana, Sans-serif;
    letter-spacing:1.5px;
    margin-left:2em;
    padding-top:7px;
    width:972px;
    height:20px;
    overflow:auto;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;
}
Solo debes tener en cuenta que si los divs left_pannel, center_pannel y right_pannel no tienen contenido no se verán.

Saludos.


Última edición por jomaruro; 17/01/2010 a las 05:41
  #5 (permalink)  
Antiguo 17/01/2010, 06:05
 
Fecha de Ingreso: octubre-2007
Mensajes: 253
Antigüedad: 10 años, 2 meses
Puntos: 3
Respuesta: aumentar div del centro de acuerdo a la cantidad de noticias....

jomaruro, muchas gracias,
es verdad que el que no sabe es como el que no ve !!!

por cierto !?!?, si dentro del div del centro incluyo otro div que seria realmente el contenido de una vista en especifico, tambien aumentaria todo con respecto al tamaño de esa vista especifica ??
  #6 (permalink)  
Antiguo 17/01/2010, 06:10
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: aumentar div del centro de acuerdo a la cantidad de noticias....

Hola:

No sé hasta que punto es necesario incluir un div dentro del div del centro, tampoco es bueno abusar de divitis, de todas formas el contenedor siempre crecerá según el contenido o se puede forzar a que lo haga.

Saludos.

  #7 (permalink)  
Antiguo 17/01/2010, 06:22
 
Fecha de Ingreso: octubre-2007
Mensajes: 253
Antigüedad: 10 años, 2 meses
Puntos: 3
Respuesta: aumentar div del centro de acuerdo a la cantidad de noticias....

bueno, jomaruro, lo de incluir un div dentro del div del centro es debido a que la app es basicamente un conjunto de portlets ubicados en los div de los laterales y el contenido del centro siempre sera un porlet.

lo bueno es que con el css con los arreglos que me indicaste me facilita agregar todos los portlets que desee a ambos lados, cosa que no tenia idea de como hacer para que no me alterara el maquetado.

Saludos !!!!

Etiquetas: aumentar, cantidad, centro
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




La zona horaria es GMT -6. Ahora son las 08:52.