Código HTML:
Ver original
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <meta name="description" content="Ejemplo de HTML5"> <meta name="keywords" content="HTML5, CSS3, Javascript"> <link rel="stylesheet" href="miestilo.css"> </head> <body> <div id="agrupar"> <header id="cabecera"> </header> <nav id="menu"> <ul> </ul> </nav> <section id="seccion"> <article> <header> <section class="mensaje"> <hgroup> </hgroup> </section> </header> Este es mi primer mensaje <figure> <img src="http://images3.wikia.nocookie.net/__cb20110119212653/masseffect/es/images/2/2b/1264677-mass_effect_2_garrus_by_axep_h2_large.jpg"> <figcaption>Esta es la imágen del primer mensaje</figcaption> </figure> <footer> <address> </address> </footer> </article> <article> <header> <section class="mensaje"> <hgroup> </hgroup> </section> </header> Este es mi segundo mensaje <footer> </footer> </article> </section> <aside id="columna"> <blockquote>Mensaje número 1</blockquote> <blockquote>Mensaje número 2</blockquote> </aside> <footer id="pie"> </footer> </div> </body> </html>
Este es el CSS:
Código CSS:
Ver original
*{ margin: 0px; padding: 0px; } h1{ font: bold 20px verdana, sans-serif; } h2{ font: bold 14px verdana, sans-serif; } header, section, footer, aside, nav, article, figure, figcaption, hgroup{ display: block; } body{ text-align: center; } #agrupar{ width: 960px; margin: 15px auto; text-align: left; } #cabecera{ background: #FFFBB9; border: 1px solid #999999; padding: 20px; } #menu{ background: #CCCCCC; padding: 5px 15px; } #menu li{ display: inline-block; list-style: none; padding: 5px; font: bold 14px verdana, sans-serif; } #seccion{ float: left; width: 660px; margin: 20px; } #columna{ float: left; width: 220px; margin: 20px 0px; padding: 20px; background: #CCCCCC; } #pie{ clear: both; text-align: center; padding: 20px; border-top: 2px solid #999999; } article{ background: #FFFBCC; border: 1px solid #999999; padding: 20px; margin-bottom: 15px; } article footer{ text-align: right; } time{ color: #999999; } figcaption{ font: italic 14px verdana, sans-serif; } .mensaje{ border 1px solid #000000; background: #CCCCCC; padding: 2px; margin-bottom: 5px; } time{ font: bold 12px verdana, sans-serif; }
La parte relevante está en las líneas 27 y 49 del html, y al final del CSS.
Saludos.