Ver Mensaje Individual
  #2 (permalink)  
Antiguo 12/03/2010, 22:18
Sebacx
 
Fecha de Ingreso: marzo-2010
Mensajes: 1
Antigüedad: 14 años, 1 mes
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