Foros del Web » Creando para Internet » CSS »

Alienar horizontalment con diferentes alturas

Estas en el tema de Alienar horizontalment con diferentes alturas en el foro de CSS en Foros del Web. Saludos, tengo un pequeño problemilla con CSS. Tengo el siguiente código CSS: @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código CSS: Ver original body { text-align : center ; background-color ...
  #1 (permalink)  
Antiguo 11/03/2010, 14:41
 
Fecha de Ingreso: octubre-2008
Mensajes: 93
Antigüedad: 9 años, 1 mes
Puntos: 1
Alienar horizontalment con diferentes alturas

Saludos, tengo un pequeño problemilla con CSS.

Tengo el siguiente código CSS:
Código CSS:
Ver original
  1. body{
  2. text-align:center;
  3. background-color:#b1005b;
  4. }
  5.  
  6. #contenedor{
  7. margin: auto;
  8. margin-top: 150px;
  9. width: 900px;
  10. height: 400px;
  11. text-align:left;
  12. background-color:#fff;
  13. }
  14.  
  15. #boton1{
  16. color:#000;
  17. background-color:#ccc;
  18. width: 150px;
  19. height: 200px;
  20. float: left;
  21. cursor: pointer;
  22. position:relative;
  23. }
  24.  
  25. #boton2{
  26. color:#000;
  27. background-color:#ccc;
  28. width: 150px;
  29. height: 230px;
  30. float:left;
  31. cursor: pointer;
  32. position:relative;
  33. }
  34.  
  35. #boton3{
  36. color:#000;
  37. background-color:#ccc;
  38. width: 150px;
  39. height: 200px;
  40. float:left;
  41. cursor: pointer;
  42. position:relative;
  43. }
  44.  
  45. #boton4{
  46. color:#000;
  47. background-color:#ccc;
  48. width: 150px;
  49. height: 200px;
  50. float:left;
  51. cursor: pointer;
  52. position:relative;
  53. }
  54.  
  55. #boton5{
  56. color:#000;
  57. background-color:#ccc;
  58. width: 150px;
  59. height: 200px;
  60. float:left;
  61. cursor: pointer;
  62. position:relative;
  63. }
  64.  
  65. #boton6{
  66. color:#000;
  67. background-color:#ccc;
  68. width: 150px;
  69. height: 200px;
  70. float:left;
  71. cursor: pointer;
  72. position:relative;
  73. }
  74.  
  75. #aa{
  76. background-color:#ff0000;
  77. width: 900px;
  78. height: 200px;
  79. float:left;
  80. }

Y el siguiente HTML:
Código HTML:
Ver original
  1.     <head>
  2.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  3.         <title>New Web Project</title>
  4.     </head>
  5.    
  6.     <link href="css/style.css" rel="stylesheet" type="text/css" />
  7.    
  8.     <script src="js/jquery-1.4.2.min.js"></script>
  9.    
  10.     <script src="js/functions.js"></script>
  11.    
  12.    
  13.     <body>
  14.         <div id="contenedor">
  15.             <div id="boton1">Boton1</div>
  16.             <div id="boton2">Boton2</div>
  17.             <div id="boton3">Boton2</div>
  18.             <div id="boton4">Boton2</div>
  19.             <div id="boton5">Boton2</div>
  20.             <div id="boton6">Boton2</div>
  21.        
  22.        
  23.             <div id="aa">
  24.            
  25.             Hola
  26.            
  27.             </div>
  28.        
  29.         </div>
  30.        
  31.     </body>
  32. </html>

El problema es que los "botones" se ven así:


Y yo lo que quiero es que se vean así:


El problema es que el DIV se hace más largo y se mueve toda la web hacia abajo. Y yo lo que quiero es que el DIV se haga más alto... no sé si me explico, pero las imágenes hablan por si solas.

¡Gracias!
  #2 (permalink)  
Antiguo 12/03/2010, 22:18
 
Fecha de Ingreso: marzo-2010
Mensajes: 1
Antigüedad: 7 años, 9 meses
Puntos: 0
Respuesta: Alienar horizontalment con diferentes alturas

Hola Hinfra! Que tal? Soy nuevo por estos pagos, y dando vueltas por esta parte del foro me tope con tu inquietud.

Yendo a tu duda:

Probaste de agregarle "margin-top: 30px;" a cada boton, excepto el boton 2 que es que tiene la altura de mayor jerarquia?

Es decir:

Código CSS:
Ver original
  1. body{
  2. text-align:center;
  3. background-color:#b1005b;
  4. }
  5.  
  6. #contenedor{
  7. margin: auto;
  8. margin-top: 150px;
  9. width: 900px;
  10. height: 400px;
  11. text-align:left;
  12. background-color:#fff;
  13. }
  14.  
  15. #boton1{
  16. color:#000;
  17. background-color:#ccc;
  18. width: 150px;
  19. height: 200px;
  20. float: left;
  21. cursor: pointer;
  22. position:relative;
  23. margin-top: 30px;
  24. }
  25.  
  26. #boton2{
  27. color:#000;
  28. background-color:#ccc;
  29. width: 150px;
  30. height: 230px;
  31. float:left;
  32. cursor: pointer;
  33. position:relative;
  34. }
  35.  
  36. #boton3{
  37. color:#000;
  38. background-color:#ccc;
  39. width: 150px;
  40. height: 200px;
  41. float:left;
  42. cursor: pointer;
  43. position:relative;
  44. margin-top: 30px;
  45. }
  46.  
  47. #boton4{
  48. color:#000;
  49. background-color:#ccc;
  50. width: 150px;
  51. height: 200px;
  52. float:left;
  53. cursor: pointer;
  54. position:relative;
  55. margin-top: 30px;
  56. }
  57.  
  58. #boton5{
  59. color:#000;
  60. background-color:#ccc;
  61. width: 150px;
  62. height: 200px;
  63. float:left;
  64. cursor: pointer;
  65. position:relative;
  66. margin-top: 30px;
  67. }
  68.  
  69. #boton6{
  70. color:#000;
  71. background-color:#ccc;
  72. width: 150px;
  73. height: 200px;
  74. float:left;
  75. cursor: pointer;
  76. position:relative;
  77. margin-top: 30px;
  78. }
  79.  
  80. #aa{
  81. background-color:#ff0000;
  82. width: 900px;
  83. height: 200px;
  84. float:left;
  85. }

Agregandole el margen al top de cada boton, se puede llegar al resultado que deses en la imagen!

Saludos espero haber interpretado bien tu pregunta!

Última edición por Sebacx; 12/03/2010 a las 22:23

Etiquetas: diferentes
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 19:16.