Tema: Juguemos a Diagramar 2
Ver Mensaje Individual
  #18 (permalink)  
Antiguo 07/11/2012, 13:23
Avatar de hackjose
hackjose
 
Fecha de Ingreso: abril-2010
Ubicación: Edo Mexico
Mensajes: 1.178
Antigüedad: 14 años, 7 meses
Puntos: 131
Respuesta: Juguemos a Diagramar 2
El codigo original es de kahlito, solo le hare unas modificaciones, no es que este mal, si no que le quiero dar mi propio estilo

Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <html lang="es">
  3. <head>
  4.     <title>Lelogo</title>
  5.     <meta charset="utf-8" />    
  6. </head>
  7. <body>
  8.     <header>
  9.         <h1>Lelogo</h1>
  10.         <div id="description">
  11.         <p>Lorem ipsum dolor sit amet</p>
  12.         </div>
  13.         <nav>
  14.             <ul>
  15.                 <li><a href="#" title="Descargas">Descargas</a></li>
  16.                 <li><a href="#" title="Docs">Docs</a></li>
  17.             </ul>
  18.         </nav>
  19.     </header>
  20.     <section id="lelogo-industria">
  21.         <h2>LELOGO en la Industria</h2>
  22.         <article id="articulo1">
  23.             <h2><strong>Empresa X</strong></h2>
  24.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  25.             Quisque vehicula nisi nec magna adipiscing adipiscing.
  26.             Quisque diam nunc, volutpat ut tincidunt quis, fringilla eu sapien.</p>
  27.         </article>
  28.         <article id="articulo2">
  29.             <h2><strong>Empresa Y</strong></h2>
  30.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  31.             Quisque vehicula nisi nec magna adipiscing adipiscing.
  32.             Quisque diam nunc, volutpat ut tincidunt quis, fringilla eu sapien.</p>
  33.         </article>
  34.         <article id="articulo3">
  35.             <h2><strong>Empresa Z</strong></h2>
  36.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  37.             Quisque vehicula nisi nec magna adipiscing adipiscing.
  38.             Quisque diam nunc, volutpat ut tincidunt quis, fringilla eu sapien.</p>
  39.         </article>
  40.      </section>
  41.      <section id="uso">
  42.         <h2>Un ejemplo de uso</h2>
  43.         <article>
  44.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  45.             Quisque vehicula nisi nec magna adipiscing adipiscing.
  46.             Quisque diam nunc, volutpat ut tincidunt quis, fringilla eu sapien.</p>
  47.         </article>
  48.      </section>        
  49.     <aside>
  50.         <nav>
  51.             <ul>
  52.                 <li>Acerca de</li>
  53.                 <li>Lorem ipsum dolor sit amet</li>
  54.                 <li>Descarga</li>
  55.                 <li>Lorem ipsum dolor sit amet</li>
  56.                 <li>Documentación</li>
  57.                 <li>Lorem ipsum dolor sit amet</li>
  58.                 <li>Foro</li>
  59.                 <li>Lorem ipsum dolor sit amet</li>
  60.                 <li>Contacto</li>    
  61.                 <li>Lorem ipsum dolor sit amet</li> 
  62.             </ul>
  63.         </nav>
  64.     </aside>
  65.     <footer>
  66.         <nav>
  67.             <ul>
  68.                 <li><a href="#">Acerca de</a> |</li>
  69.                 <li><a href="#">Descarga</a> |</li>
  70.                 <li><a href="#">Documentación</a> |</li>
  71.                 <li><a href="#">Foro</a> |</li>
  72.                 <li><a href="#">Contacto</a></li>      
  73.             </ul>
  74.         </nav> 
  75.     </footer>
  76. </body>
  77. </html>

En lo personal lo haria asi, y bueno que dicen si metiéramos a las 3 empresas en un elemento dl

algo asi

Código HTML: 
Ver original
  1. <section>
  2. <article>
  3. <dl>
  4. <dt>Empresa X</dt>
  5. <dd>......................</dd>
  6. <dt>Empresa Y</dt>
  7. <dd>......................</dd>
  8. <dt>Empresa Z</dt>
  9. <dd>.......................</dd>
  10. </dl>
  11. </article>
  12. </section>

o asi

Código HTML: 
Ver original
  1. <section>
  2. <dl>
  3.  
  4. <article>
  5. <dt>Empresa X</dt>
  6. <dd>......................</dd>
  7. </article>
  8.  
  9. <article>
  10. <dt>Empresa Y</dt>
  11. <dd>......................</dd>
  12. </article>
  13.  
  14. <article>
  15. <dt>Empresa Z</dt>
  16. <dd>.......................</dd>
  17. </article>
  18. </dl>
  19.  
  20. </section>

Este ultimo no se si este bien estructurado, me refiero a que article envuelve a dt y dd

Saludos a todos