Tema: Problema con display: inline-block
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 10/04/2014, 14:46
ottojeanpierre
 
Fecha de Ingreso: abril-2014
Mensajes: 7
Antigüedad: 10 años, 1 mes
Puntos: 0
Problema con display: inline-block
Buenas Tardes,
espero me puedan ayudar, tengo un problema al querer colocar en un mismo nivel en la parte superior( luego del header), el article con id historia y el figure con id cochecito; con el atributo inline-block c/u, pero se posicionan una sobre otra como si fuese bloque.

Agradeceria infinitamente si apoyo, mil gracias.

Adjunto el código:
HTML
Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <html lang="es">
  3. <head>
  4.         <title>Empresa de Autos Toyota</title>
  5.         <meta charset="utf-8" />
  6.         <link rel="stylesheet" href="normalize.css" />
  7.         <link rel="stylesheet" href="estilos.css" />
  8.         <script src="prefixfree.min.js"></script>
  9. </head>
  10. <body>
  11.     <header>
  12.         <hgroup>    
  13.             <h1>Empresa de Autos Toyota</h1>
  14.             <h2>Menos Gasolina, más HTML5</h2>
  15.         </hgroup>
  16.     </header>
  17.     <section>
  18.         <article id="historia">
  19.             <p>bla bla bla</p>
  20.         </article>
  21.         <figure id="cochecito">
  22.             <img src="crojo.jpg" />
  23.             <figcaption>
  24.                 <h2>Empresa Toyota</h2>
  25.                 <ul>
  26.                     <li><strong>Color:</strong>Blanco</li>
  27.                     <li><strong>Techo:</strong>Mate</li>
  28.                     <li><strong>Llantas:</strong>Barato</li>
  29.                 </ul>
  30.             </figcaption>
  31.         </figure>
  32.     </section>
  33.     <nav>
  34.         <ul>
  35.             <li><a href="#">Personalizar</a></li>
  36.             <li><a href="#">Comprar</a></li>
  37.             <li><a href="#">Contactar</a></li>
  38.         </ul>
  39.     </nav>
  40. </body>
  41. </html>

CSS
Código CSS: 
Ver original
  1. body
  2. {
  3.     background: #222;
  4.     color: #EEE;
  5.     font-family: Arial;
  6.     font-size: 16px;
  7.     text-align: center;
  8. }
  9.  
  10. header
  11. {
  12.     
  13.     background:   url("lagonda.png") no-repeat 90% center,
  14.             url("fondo.png");
  15.  
  16.     background-size: 200px ,100px 100px;
  17.     /*Margen Exterior (4 atributos segun orden horario[Si es uno es para los 4])*/
  18.     margin: 0 0 1em 0;
  19.     /*Margen Interior (4 atributos segun orden horario[Si son 2 el primero es arriba y abajo, el segundo es derecha izquierda])*/
  20.     /*em= Indica un valor de fuente por defecto en este caso del font-size del body (16 px) 
  21.     y como es 2em = 2x16px= 32px*/
  22.     padding: 0.5em 0;
  23.     width: 100%;
  24. }   
  25.  
  26. header h1
  27. {
  28.     margin: 0;
  29.     /*sombra de texto (tres valores de rgb y el 4to es la transparencia)*/
  30.     text-shadow: rgba(255,255,255, 0.5) 5px 5px 10px;
  31. }
  32.  
  33. header h2
  34. {
  35.     margin: 0;
  36.     /* Quita el negrita*/
  37.     font-weight: normal;
  38.     text-shadow: rgba(0,0,0,0.5) 2px 2px 3px;
  39. }
  40.  
  41. #cochecito
  42. {
  43.     background: white;
  44.     color: #222;
  45.     text-align: left;
  46.     width: 50%;
  47. }
  48.  
  49. #cochecito figcaption
  50. {
  51.     margin: 1em;
  52. }
  53.  
  54. #cochecito img
  55. {
  56.     /* La imagen se ajusta al figure y funciona para responsive design al agrandarla o achicarla*/
  57.     width: 100%;
  58. }
  59.  
  60.  
  61. #cochecito , #historia
  62. {
  63.     display:inline-block;
  64.     vertical-align: top;
  65. }
  66.  
  67.  
  68. #historia
  69. {
  70.     background: rgba(0,0,0,0.6);
  71.     border-radius: 0.5em;
  72.     box-shadow: rgba(0,0,0,0.5) 5px 5px 10px;
  73.     /* Hacer 2 columnas = moz-column-count: 2;*/
  74.     margin: 0 2% 1em 1em;
  75.     padding: 1em;
  76.     text-align: left;
  77.     width: 35%;
  78. }

MUCHAS GRACIAS.
Última edición por ottojeanpierre; 10/04/2014 a las 17:12 Razón: formato código