Tema: Por qué no se muestra el borde del block?
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 02/05/2013, 20:13
reethok
 
Fecha de Ingreso: abril-2011
Mensajes: 224
Antigüedad: 14 años, 6 meses
Puntos: 8
Por qué no se muestra el borde del block?
Este es el html:

Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <html lang="es">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="description" content="Ejemplo de HTML5">
  6.     <meta name="keywords" content="HTML5, CSS3, Javascript">
  7.     <title>Prueba de HTML5</title>
  8.     <link rel="stylesheet" href="miestilo.css">
  9. </head>
  10.  
  11. <body>
  12. <div id="agrupar">
  13.     <header id="cabecera">
  14.         <h1>Este es el título principal del sitio web</h1>  
  15.     </header>
  16.     <nav id="menu">
  17.         <ul>
  18.             <li>principal</li>
  19.             <li>fotos</li>
  20.             <li>videos</li>
  21.             <li>contactos</li>      
  22.         </ul>   
  23.     </nav>
  24.     <section id="seccion">
  25.         <article>
  26.             <header>
  27.                 <section class="mensaje">
  28.                 <hgroup>
  29.                     <h1>Título del mensaje 1</h1>
  30.                     <h2>Subtítulo del mensaje 1</h2>
  31.                 </hgroup>
  32.                 <time datetime="2013-05-02T13:28:00" pubtime>Publicado el 02-05-2013 a las 13:28 horas</time>
  33.                 </section>
  34.             </header>   
  35.             Este es mi primer mensaje
  36.             <figure>
  37.                 <img src="http://images3.wikia.nocookie.net/__cb20110119212653/masseffect/es/images/2/2b/1264677-mass_effect_2_garrus_by_axep_h2_large.jpg">
  38.                 <figcaption>Esta es la imágen del primer mensaje</figcaption>           
  39.             </figure>
  40.             <footer>
  41.                 <p>comentarios (0)</p>
  42.                 <address>
  43.                     <a href="http://www.google.com">Google</a>              
  44.                 </address>      
  45.             </footer>
  46.         </article>
  47.         <article>
  48.             <header>
  49.             <section class="mensaje">
  50.                 <hgroup>
  51.                     <h1>Título del mensaje 2</h1>
  52.                     <h2>Subtítulo del mensaje 2</h2>
  53.                 </hgroup>
  54.                 <time datetime="2013-05-02T15:33:00" pubdate>Publicado el 02-05-2013 a las 15:33 horas</time>
  55.             </section>
  56.             </header>
  57.             Este es mi segundo mensaje      
  58.             <footer>
  59.                 <p>comentarios (0)</p>          
  60.             </footer>
  61.         </article>
  62.     </section>  
  63.     <aside id="columna">
  64.         <blockquote>Mensaje número 1</blockquote>   
  65.         <blockquote>Mensaje número 2</blockquote>
  66.     </aside>
  67.     <footer id="pie">
  68.         <small>Derechos reservados &copy; 2012-2013</small>
  69.     </footer>   
  70.  
  71. </div>
  72. </body>
  73. </html>

Este es el CSS:

Código CSS: 
Ver original
  1. *{
  2.     margin: 0px;
  3.     padding: 0px;
  4. }
  5.  
  6. h1{
  7.     font: bold 20px verdana, sans-serif;
  8. }
  9.  
  10. h2{
  11.     font: bold 14px verdana, sans-serif;    
  12. }
  13.  
  14. header, section, footer, aside, nav, article, figure, figcaption, hgroup{
  15.     display: block;
  16. }
  17.  
  18. body{
  19.     text-align: center;
  20. }
  21.  
  22. #agrupar{
  23.     width: 960px;
  24.     margin: 15px auto;
  25.     text-align: left;   
  26. }
  27.  
  28. #cabecera{
  29.     background: #FFFBB9;
  30.     border: 1px solid #999999;
  31.     padding: 20px;  
  32. }
  33.  
  34. #menu{
  35.     background: #CCCCCC;
  36.     padding: 5px 15px;
  37. }
  38.  
  39. #menu li{
  40.     display: inline-block;
  41.     list-style: none;
  42.     padding: 5px;
  43.     font: bold 14px verdana, sans-serif;    
  44. }
  45.  
  46. #seccion{
  47.     float: left;
  48.     width: 660px;
  49.     margin: 20px;
  50. }
  51.  
  52. #columna{
  53.     float: left;
  54.     width: 220px;
  55.     margin: 20px 0px;
  56.     padding: 20px;
  57.     background: #CCCCCC;
  58. }
  59.  
  60. #pie{
  61.     clear: both;
  62.     text-align: center;
  63.     padding: 20px;
  64.     border-top: 2px solid #999999;
  65. }
  66.  
  67. article{
  68.     background: #FFFBCC;
  69.     border: 1px solid #999999;
  70.     padding: 20px;
  71.     margin-bottom: 15px;    
  72. }
  73.  
  74. article footer{
  75.     text-align: right;
  76. }
  77.  
  78. time{
  79.     color: #999999; 
  80. }
  81.  
  82. figcaption{
  83.     font: italic 14px verdana, sans-serif;  
  84. }
  85.  
  86. .mensaje{
  87.     border 1px solid #000000;
  88.     background: #CCCCCC;
  89.     padding: 2px;
  90.     margin-bottom: 5px;
  91.     
  92. }
  93.  
  94. time{
  95.     font: bold 12px verdana, sans-serif;
  96. }

La parte relevante está en las líneas 27 y 49 del html, y al final del CSS.

Saludos.