Foros del Web » Creando para Internet » CSS »

Problema con contenedor

Estas en el tema de Problema con contenedor en el foro de CSS en Foros del Web. Saludos a todos, Hice esta pagina pero el contenido de la etiqueta "flog" no cabe totalmente en el "contenedor", y el problema es que no ...
  #1 (permalink)  
Antiguo 06/11/2010, 23:03
 
Fecha de Ingreso: julio-2010
Mensajes: 13
Antigüedad: 7 años, 5 meses
Puntos: 0
Problema con contenedor

Saludos a todos, Hice esta pagina pero el contenido de la etiqueta "flog" no cabe totalmente en el "contenedor", y el problema es que no le debo de dar un tamaño fijo ya que la pagina deve de variar de tamaño segun el contenido de una Base de Datos.

Este es mi codigo:
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  4.     <title>Mi Web</title>
  5.     <style type="text/css">
Código CSS:
Ver original
  1. #contenedor{
  2.     border:1px solid #000;
  3.     width:980px;
  4.     min-height:600px;
  5.     height:700px !important;
  6.     margin:auto;
  7. }
  8. #header{
  9.     background:#1C4C7D;
  10.     width:100%;
  11.     height:10%;
  12.     margin:auto;
  13. }
  14. #links, #amigos{
  15.     background:#dfdfdf;
  16.     width:14%;
  17.     height:85%;
  18.     padding:2.1%;
  19. }
  20. #links{float:left;}
  21. #amigos{float:right;}
  22. .flog{
  23.     position: relative;
  24.     background:#f8f8f8;
  25.     width:60%;
  26.     height:auto;
  27.     margin:5px auto;
  28.     padding:10px;
  29.     color:#000;
  30.     border:1px solid #e0e0e0;
  31. }
Código HTML:
Ver original
  1. </head>
  2.     <div id="contenedor">
  3.         <div id="header"></div>
  4.         <div id="links">Links</div>
  5.         <div id="amigos">Amigos</div>
  6.         <div class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</div>
  7.         <div class="flog">Pellentesque neque neque, egestas ut pellentesque id, convallis in nisl. Praesent egestas ipsum ut turpis bibendum eget mollis metus tristique. In lacus est, porta vitae feugiat quis, semper sit amet nisl. Suspendisse mattis mauris non sapien iaculis quis mollis turpis aliquet. Suspendisse potenti. Fusce ultrices, mauris vel bibendum pulvinar, enim urna consectetur ante, sed dictum risus justo ut lorem. Mauris commodo arcu at erat dictum in vehicula mauris hendrerit. Sed orci magna, molestie ut vestibulum a, adipiscing et enim. Duis posuere felis in magna scelerisque tempor. Ut porttitor adipiscing eleifend. Sed vulputate ante sed tellus posuere quis pharetra erat tempus.</div>
  8.         <div class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</div>
  9.         <div class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</div>
  10.         <div class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</div>
  11.         <div class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</div>
  12.         <div class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</div>
  13.         <div class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</div>
  14.         <div class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</div>
  15.         <div class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</div>
  16.         <div class="flog">Pellentesque neque neque, egestas ut pellentesque id, convallis in nisl. Praesent egestas ipsum ut turpis bibendum eget mollis metus tristique. In lacus est, porta vitae feugiat quis, semper sit amet nisl. Suspendisse mattis mauris non sapien iaculis quis mollis turpis aliquet. Suspendisse potenti. Fusce ultrices, mauris vel bibendum pulvinar, enim urna consectetur ante, sed dictum risus justo ut lorem. Mauris commodo arcu at erat dictum in vehicula mauris hendrerit. Sed orci magna, molestie ut vestibulum a, adipiscing et enim. Duis posuere felis in magna scelerisque tempor. Ut porttitor adipiscing eleifend. Sed vulputate ante sed tellus posuere quis pharetra erat tempus.</div>   
  17.         </div>
  18. </body>
  19. </html>

y mi pagina se ve asi:


pero si le cambio el tamaño al contenedor para que sea variable.

Código CSS:
Ver original
  1. #contenedor{
  2.             border:1px solid #000;
  3.             width:980px;
  4.             min-height:600px;
  5.             height:auto !important;
  6.             margin:auto;
  7.         }

se ve asi:


Como pueden ver la "flog" ya cabe dentro del "contenedor" pero el "header" desaparece, y "links" y "amigos" cambian de tamaño haciendoce muy pequeños y deberian de llegar al final del "contenedor".

No se que pueda ser, espero su ayuda y/o consejos.
  #2 (permalink)  
Antiguo 06/11/2010, 23:28
 
Fecha de Ingreso: noviembre-2009
Ubicación: Colombía
Mensajes: 311
Antigüedad: 8 años
Puntos: 17
Respuesta: Problema con contenedor

quitale el valor de height, y colocale al contenedor:

Cita:
overflow:hidden;
Saludos!
  #3 (permalink)  
Antiguo 06/11/2010, 23:56
 
Fecha de Ingreso: julio-2010
Mensajes: 13
Antigüedad: 7 años, 5 meses
Puntos: 0
Respuesta: Problema con contenedor

si le quito el valor al height queda como la 2ª imagen, y si le pongo el:

overflow:hidden;

se corta al tamaño del contenedor y no se ve lo de abajo.
  #4 (permalink)  
Antiguo 07/11/2010, 12:49
Avatar de Paramericano  
Fecha de Ingreso: agosto-2010
Mensajes: 137
Antigüedad: 7 años, 4 meses
Puntos: 8
Respuesta: Problema con contenedor

Lo mejor que puedes hacer es meiténdole el valor "overflow:hidden" al div contenedor de las 3 columnas.

Pero esto en el fondo es el mítico problema de la altura de los divs, que no del todo configurable. Mira el post: "vivan los tables" dentro del directorio CSS de este foro.
  #5 (permalink)  
Antiguo 07/11/2010, 16:02
 
Fecha de Ingreso: julio-2010
Mensajes: 13
Antigüedad: 7 años, 5 meses
Puntos: 0
Respuesta: Problema con contenedor

ok, le echare un vistaso aver que tal.
  #6 (permalink)  
Antiguo 07/11/2010, 18:31
 
Fecha de Ingreso: julio-2010
Mensajes: 13
Antigüedad: 7 años, 5 meses
Puntos: 0
Respuesta: Problema con contenedor

Gracias a todos, Hice la pagina nuevamente siguiendo los consejos de Paramericano usando Tables y se ve muy bien, aqui les dejo el codigo.

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  4.     <title>Mi Web</title>
  5.     <style type="text/css">
  6.         #contenedor{
  7.             border:1px solid #000;
  8.             width:980px;
  9.             height:auto;
  10.             margin:auto;
  11.         }
  12.         #header{
  13.             background:#1C4C7D;
  14.             width:100%;
  15.             height:150px;
  16.             margin:auto;
  17.         }
  18.         .flog{
  19.             background:#f8f8f8;
  20.             width:94%;
  21.             height:auto;
  22.             margin:5px auto;
  23.             padding:10px;
  24.             color:#000;
  25.             border:1px solid #e0e0e0;
  26.         }
  27.         .lados{
  28.             background:#dfdfdf;
  29.             width:18%;
  30.             padding:2.1%;
  31.         }
  32.     </style>
  33. </head>
  34.     <div id="contenedor">
  35.     <div id="header">
  36.     </div>
  37.     <table>
  38.       <tr>
  39.         <td class="lados" valign="top">Links
  40.         </td>
  41.         <td>
  42.           <div>
  43.             <p class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</p>
  44.             <p class="flog">Pellentesque neque neque, egestas ut pellentesque id, convallis in nisl. Praesent egestas ipsum ut turpis bibendum eget mollis metus tristique. In lacus est, porta vitae feugiat quis, semper sit amet nisl. Suspendisse mattis mauris non sapien iaculis quis mollis turpis aliquet. Suspendisse potenti. Fusce ultrices, mauris vel bibendum pulvinar, enim urna consectetur ante, sed dictum risus justo ut lorem. Mauris commodo arcu at erat dictum in vehicula mauris hendrerit. Sed orci magna, molestie ut vestibulum a, adipiscing et enim. Duis posuere felis in magna scelerisque tempor. Ut porttitor adipiscing eleifend. Sed vulputate ante sed tellus posuere quis pharetra erat tempus.</p>
  45.             <p class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</p>
  46.             <p class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</p>
  47.             <p class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</p>
  48.             <p class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</p>
  49.             <p class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</p>
  50.             <p class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</p>
  51.             <p class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</p>
  52.             <p class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</p>
  53.             <p class="flog">Pellentesque neque neque, egestas ut pellentesque id, convallis in nisl. Praesent egestas ipsum ut turpis bibendum eget mollis metus tristique. In lacus est, porta vitae feugiat quis, semper sit amet nisl. Suspendisse mattis mauris non sapien iaculis quis mollis turpis aliquet. Suspendisse potenti. Fusce ultrices, mauris vel bibendum pulvinar, enim urna consectetur ante, sed dictum risus justo ut lorem. Mauris commodo arcu at erat dictum in vehicula mauris hendrerit. Sed orci magna, molestie ut vestibulum a, adipiscing et enim. Duis posuere felis in magna scelerisque tempor. Ut porttitor adipiscing eleifend. Sed vulputate ante sed tellus posuere quis pharetra erat tempus.</p>   
  54.           </div>
  55.         </td>
  56.         <td class="lados" valign="top">Amigos
  57.         </td>
  58.       </tr>
  59.     </table>
  60.   </div>
  61. </body>
  62. </html>

Es una lastima que nadie sepa como se hace con CSS.
  #7 (permalink)  
Antiguo 08/11/2010, 07:30
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Problema con contenedor

cesarms89:
¿Qué es exactamente lo que pretende conseguir?
¿Una estructura con:
.- Header
.- Cuerpo principal
---->Tres columnas de igual altura con independencia del contenido de cada una
?
Y ello sin importar si la anchura es fija, variable, adaptativa...
Voy a asumir que ese es su objetivo y en base a ello va mi respuesta.
Así que si no es ese, mis disculpas por no comprenderle.
Cita:
Iniciado por cesarms89 Ver Mensaje
Es una lastima que nadie sepa como se hace con CSS.
No, más bien la lástima es que no lo haya sabido encontrar o que no le hayan sabido encaminar a hallarlo:
www.araudi.net
http://matthewjamestaylor.com/
http://css.devillasbuenas.es
http://www.cssplay.co.uk/
...

Eso sin hacer una simple búsqueda aquí en el foro, que es un tema repetido hasta la saciedad.


Columnas equilibradas, falsas columnas, equal height columns... son muy variadas las cadenas de texto para hacer una búsqueda y encontrar aquel ejemplo y su técnica que mejor se adapte a su necesidad.
  #8 (permalink)  
Antiguo 08/11/2010, 11:32
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Problema con contenedor

Amplio mi anterior respuesta con el último artículo publicado en smashingmagazine:

Equal Height Column Layouts with Borders and Negative Margins in CSS

Traducción de la intro (made in g. traslate):
Cita:
"¿Qué? Otro "Igualdad de columnas Altura" el artículo? ¡Ya basta! "Si esto es lo que piensa, entonces piense otra vez porque esta solución es diferente. No confiar en ninguno de los trucos habituales. No utiliza las imágenes, ni marcado adicional, ni CSS3, ni pseudo-clases, ni Javascript, ni la posición absoluta. Todo lo que se utiliza es la frontera y el margen negativo. Tenga en cuenta que este artículo también se muestran diferentes técnicas de construcción y repasar algunos conceptos.
  #9 (permalink)  
Antiguo 08/11/2010, 21:43
 
Fecha de Ingreso: julio-2010
Mensajes: 13
Antigüedad: 7 años, 5 meses
Puntos: 0
Respuesta: Problema con contenedor

ok, muchas gracias @kseso? le echare un vistazo, ya se me hacia raro que no se pudiera con css sindo un lenguaje tan potente, jeje

Etiquetas: etiquetas
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 10:45.