Foros del Web » Creando para Internet » CSS »

adaptar contenedor al contenido

Estas en el tema de adaptar contenedor al contenido en el foro de CSS en Foros del Web. Hola, panda. Bueno, pues eso. ¿Como adaptar un bloque div, que contiene a su vez otros dos bloques, a su contenido? @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código HTML: ...
  #1 (permalink)  
Antiguo 31/03/2011, 16:42
Avatar de Adler
Colaborador
 
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 11 años
Puntos: 126
adaptar contenedor al contenido

Hola, panda. Bueno, pues eso. ¿Como adaptar un bloque div, que contiene a su vez otros dos bloques, a su contenido?

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" dir="ltr" lang="es">
  3. <style type="text/css">
  4. .contenedor {
  5. background-color: green;
  6. margin: 0 auto -1em;
  7. overflow: hidden;
  8. width:50%;
  9. }
  10.  
  11. .contenido {
  12. background-color: yellow;
  13. float: left;
  14. padding: 0 20px;
  15. }
  16. </head>
  17.  
  18.      <div class="contenedor">
  19.  
  20.              <div class="contenido">
  21.               contenido
  22.              </div>
  23.  
  24.              <div class="contenido">
  25.              contenido
  26.              </div>
  27.  
  28.       </div>
  29.  
  30. </body>
  31. </html>


Gracias
__________________
Los formularios se envían/validan con un botón Submit
<input type="submit" value="Enviar" style="background-color:#0B5795; font:bold 10px verdana; color:#FFF;" />

Última edición por Adler; 01/04/2011 a las 08:55 Razón: error de tipeo en el título
  #2 (permalink)  
Antiguo 31/03/2011, 16:51
 
Fecha de Ingreso: marzo-2011
Mensajes: 184
Antigüedad: 6 años, 8 meses
Puntos: 11
Respuesta: daptar contenedor al contenido

Hola, ¿a qué te refieres con adaptar? Al ponerle el atributo float:(left o right)a tus bloques div estos se van acomodando a la izquierda o a la derecha. Estaría bien explicar más tu objetivo.

Saludos!

__________________
“Un estómago vacío, es un mal consejero.” Albert Einstein

Reflexiones, humor gráfico, chistes, Deporte, Consejos y tips
  #3 (permalink)  
Antiguo 31/03/2011, 16:52
Avatar de GAST0N  
Fecha de Ingreso: agosto-2010
Ubicación: Buenos Aires
Mensajes: 680
Antigüedad: 7 años, 4 meses
Puntos: 64
Respuesta: daptar contenedor al contenido

no entiendo tu pregunta
__________________
Twitter: @GastonArnedo

Muerte a los <tr> y <td>
  #4 (permalink)  
Antiguo 31/03/2011, 17:25
Avatar de Adler
Colaborador
 
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 11 años
Puntos: 126
Respuesta: daptar contenedor al contenido

Hola

Bien, reformulo la pregunta ¿Como adaptar el largo del contenedor verde a la suma de los dos contenedores amarillos?. Ahora, el contenedor verde, toma el 50% del largo del contenedor rojo. Probad con este otro código
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" dir="ltr" lang="es">
  3. <style type="text/css">
  4. #rojo {
  5. background-color: red;
  6. margin: 0 auto -1em;
  7. overflow: hidden;
  8. width: 80%;
  9. height: 100px;;
  10. }
  11.  
  12. .contenedor {
  13. background-color: green;
  14. margin: 0 auto -1em;
  15. overflow: hidden;
  16. width:50%;
  17. }
  18.  
  19. .contenido {
  20. background-color: yellow;
  21. float: left;
  22. padding: 0 20px;
  23. }
  24. </head>
  25. <div id="rojo">
  26.  
  27.      <div class="contenedor">
  28.  
  29.              <div class="contenido">
  30.               contenido
  31.              </div>
  32.  
  33.              <div class="contenido">
  34.              contenido
  35.              </div>
  36.  
  37.       </div>
  38.  
  39. </div>
  40. </body>
  41. </html>
Se trata de trabajar con la propiedad width, min-width o max-width. Pero da igual el valor que ponga a estas propiedades que no hay manera. Si le pones auto, toma el 100%, .....

Venga, gracias
__________________
Los formularios se envían/validan con un botón Submit
<input type="submit" value="Enviar" style="background-color:#0B5795; font:bold 10px verdana; color:#FFF;" />
  #5 (permalink)  
Antiguo 31/03/2011, 18:45
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: daptar contenedor al contenido

Hola Alder.

Creo que deberías contarnos qué buscas lograr y el porqué. No un caso hipotético, sino el concreto que te tragas entre manos para ver si se puede simular ese comportamiento.
Tal como lo planteas no veo cómo ahora, es demasiado tarde por aquí.
  #6 (permalink)  
Antiguo 01/04/2011, 08:51
Avatar de Adler
Colaborador
 
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 11 años
Puntos: 126
Respuesta: daptar contenedor al contenido

@kseso?, que tal?

Estas imágenes lo aclararán

Esto es lo que obtengo hasta ahora


y esto es lo que quiero conseguir


Como veréis se trata de centrar los div's (tablas) al contenedor verde.

Un código algo más elabarado
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" dir="ltr" lang="es">
  3. <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />  
  4. <style type="text/css">
  5. * {
  6. margin: 0;
  7. padding: 0;
  8. border: none;
  9. position: relative;
  10. }
  11.  
  12. html, body  {
  13. width: 100%;
  14. background-color: #FFF;
  15. margin: 0;
  16. }
  17.  
  18. #principal_cont {
  19. text-align: center;
  20. min-height: 100%;
  21. height: auto !important;
  22. max-width: 84%;
  23. margin: 0 auto;
  24. }
  25.  
  26.  
  27. #desarrollo_tema {
  28. background-color: red;
  29. border: 1px solid #B6B6B6;
  30. color: #000000;
  31. font: 13px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
  32. padding: 10px 10px 3px 25px;
  33. text-align: left;
  34. margin-top: 60px;
  35. }  
  36.  
  37.  
  38. .contenedor_tabla {
  39. background-color: green;
  40. margin: 0 auto;
  41. overflow: hidden;
  42. width: 100%;
  43. }
  44.  
  45. .tabla {
  46. float: left;
  47. padding: 20px;
  48. }
  49.  
  50.  
  51. .tabla table {
  52. background-color: #C9C9C9;
  53. width: 100%;
  54. padding: 0;
  55. }
  56.  
  57. .tabla thead th {
  58. background-color: #EEE;
  59. color: #000000;
  60. }
  61.  
  62. .tabla thead td {
  63. background-color: #F5F5F5;
  64. color: #696969;
  65. }
  66.  
  67. .tabla tbody td {
  68. background-color: #FFF;
  69. color:  #000000;
  70. font: 13px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
  71. text-align: left;
  72. padding: 3px 7px;
  73. }
  74.  
  75. .tabla tbody i {
  76. color: #696969;
  77. }
  78.  
  79. .tabla tfoot {
  80. background-color: #FFF;
  81. }
  82.  
  83. .tabla thead th, .tabla thead td {
  84. font: bold 13px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
  85. text-align: center;
  86. padding: 3px 7px;
  87. }
  88. </head>
  89. <div id="principal_cont">
  90.  
  91. <div id="desarrollo_tema">
  92.  
  93.  
  94. <div class="contenedor_tabla ">
  95.  
  96.  
  97. <div class="tabla">
  98. <table cellspacing="1px">
  99. <tr>
  100. <th colspan="2">Listado</th>
  101. </tr>
  102. <tr>
  103. <td>Producto</td>
  104. <td>Cantidad</td>
  105. </tr>
  106. <tr>
  107. <td><b>Producto1</b></td>
  108. <td>15</td>
  109. </tr><tr>
  110. <td><b>Producto2</b></td>
  111. <td>40</td>
  112. </tr><tr>
  113. <td><b>Producto3</b></td>
  114. <td>30</td>
  115. </tr><tr>
  116. <td><b>Producto</b></td>
  117. <td>2</td>
  118. </tr><tr>
  119. <td><b>Producto4</b></td>
  120. <td>98</td>
  121. </tr><tr>
  122. <td><b>Producto5</b></td>
  123. <td>4</td>
  124. </tr><tr>
  125. <td><b>Producto6</b></td>
  126. <td>23</td>
  127. </tr>
  128. </div>
  129.  
  130.  
  131. <div class="tabla">
  132. <table cellspacing="1px">
  133. <tr>
  134. <th colspan="2">Listado</th>
  135. </tr>
  136. <tr>
  137. <td>Producto</td>
  138. <td>Cantidad</td>
  139. </tr>
  140. <tr>
  141. <td><b>Producto1</b></td>
  142. <td>15</td>
  143. </tr><tr>
  144. <td><b>Producto2</b></td>
  145. <td>40</td>
  146. </tr><tr>
  147. <td><b>Producto3</b></td>
  148. <td>30</td>
  149. </tr><tr>
  150. <td><b>Producto</b></td>
  151. <td>2</td>
  152. </tr>
  153. </div>
  154.  
  155.  
  156. </div>
  157.  
  158.  
  159.  
  160. </div>
  161.  
  162.  
  163. </div>
  164. </body>
  165. </html>

Gracias
__________________
Los formularios se envían/validan con un botón Submit
<input type="submit" value="Enviar" style="background-color:#0B5795; font:bold 10px verdana; color:#FFF;" />
  #7 (permalink)  
Antiguo 01/04/2011, 09:06
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: adaptar contenedor al contenido

Ahora sí pille lo que quiere lograr.
Voy con prisa que ya me han dado el tercer aviso, así que estoy enfriando filamentos.

Pruebe a ve si este ejemplo (no está hecho a propósito, ya lo tenía realizado) le sirve:
http://css.devillasbuenas.es/alineacion_multiple.html

Como verá, lo que se consigue es un centrado de las cajas en su contenedor padre sin importar o conocer a priori su número o su anchura.

Si necesita más lo comenta y ya vamos viendo.
  #8 (permalink)  
Antiguo 01/04/2011, 11:43
 
Fecha de Ingreso: marzo-2011
Mensajes: 184
Antigüedad: 6 años, 8 meses
Puntos: 11
Respuesta: adaptar contenedor al contenido

¿Has probado centrarlos de la misma manera que centras el contenerdor principal? con

Código CSS:
Ver original
  1. margin: 0 auto;

Se van a la izquierda porque tienes float:left, ese podrías quitarlo.

Saludos!

__________________
“Un estómago vacío, es un mal consejero.” Albert Einstein

Reflexiones, humor gráfico, chistes, Deporte, Consejos y tips
  #9 (permalink)  
Antiguo 01/04/2011, 17:28
Avatar de Adler
Colaborador
 
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 11 años
Puntos: 126
Respuesta: adaptar contenedor al contenido

Hola

Cita:
Iniciado por GatoGordo Ver Mensaje
¿Has probado centrarlos de la misma manera que centras el contenerdor principal? con

Código CSS:
Ver original
  1. margin: 0 auto;
No es la solución, puede haber 1, 2, 3, n bloques. Y aunque solo hubiese uno, no funcionaría, ya lo probé

Cita:
Iniciado por GatoGordo Ver Mensaje
Se van a la izquierda porque tienes float:left, ese podrías quitarlo.

Saludos!
Ahora creo que sí puedo quitar la propiedad float, por que creo que la solución, por lo que he visto, es adaptar lo que me propone @kseso?. Es decir usar otro contenedor y en sus hijos usar display: inline-block, que por cierto no conocía ese valor. Tal vez deje de leer cuando llegué a inline

Gracias por vuestro tiempo
__________________
Los formularios se envían/validan con un botón Submit
<input type="submit" value="Enviar" style="background-color:#0B5795; font:bold 10px verdana; color:#FFF;" />

Etiquetas: contenedor, contenido
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 05:13.