Tema: Primera web (dudas basicas)
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 13/12/2015, 22:34
luisdevelop
 
Fecha de Ingreso: diciembre-2015
Mensajes: 8
Antigüedad: 8 años, 5 meses
Puntos: 0
Pregunta Primera web (dudas basicas)
Buenas, he hecho mi primera paginilla web, es muy basica pero tengo algunas dudas. Lo primero, algun consejo o correccion sobre el codigo?

Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <html lang="esp">
  3.  
  4.  <head>
  5.   <meta charset="UTF-8">
  6.   <title>Proseso Creativo</title>
  7.   <link rel="stylesheet" href="estilos.css" />
  8.   <link rel="shortcut icon" type="image/x-icon" href="images/logo_cabecera.png">
  9. </head>
  10.  
  11. <body>
  12.    <header>
  13.      <div>
  14.          <img src="images/logo_cabecera.png" alt="LogoProsesoCreativo" />
  15.           <nav>
  16.               <ul>
  17.                   <li><a href="#">Inicio</a></li>
  18.                   <li><a href="#">Conócenos</a></li>
  19.                   <li><a href="#">Que hacemos</a></li>
  20.                   <li><a href="#">Nuestro Trabajo</a></li>
  21.                   <li><a href="#">Contáctanos</a></li>
  22.               </ul>
  23.           </nav>
  24.      </div>
  25.  
  26.    </header>
  27.     <section>
  28.         <article>
  29.             <p>
  30.                 <b>Todo lleva un proseso</b>, no importa que fuere en el ambito personal o profesional, sabemos que ni ele exito ni el fracaso perciben la diferencia
  31.             </p>
  32.             <p>
  33.                 <b>Todo lleva un proses</b> en el que hay que estar atento a los cambios y despierto ante circunstancias.
  34.             </p>
  35.             <p>Todo lleva un proseso en el cual hay que estar preparado para las sorpresas y en el cual definir los proximos pasos, sea imprescindible opara un desarrollo consecuente con los objetivos y las metas trazadas.
  36.             </p>
  37.             <p>
  38.                 En un mundo tan cambiante, siempre habra imprevistos, pero tenemos la firme conviccion que tomar en serio el debido proceso, el margen de error, se reduce solo a otra posibilidad que tambien tendra solucion.
  39.             </p>
  40.         </article>
  41.     </section>
  42.     <footer>
  43.         <addres>
  44.             <a href="http://www.prosesocreativo.com" target="_blank">Proseso Creativo | Derechos Reservados 2015</a>
  45.         </addres>
  46.     </footer>
  47. </body>
  48.  
  49. </html>

Código CSS: 
Ver original
  1. *{
  2.   margin: 0;
  3.   padding: 0;
  4. }
  5.  
  6. body{
  7.     background: url(images/fondo1-1024x569.jpg);
  8.     background-repeat: no-repeat;
  9.     background-attachment: fixed;
  10.     background-size: cover;
  11. }
  12.  
  13. header{
  14.     width: 100%;
  15.     z-index: 100;
  16.     background-color: #fff;
  17.     overflow: hidden;
  18. }
  19.  
  20. header div{
  21.     width: 960px;
  22.     height: 100px;
  23.     margin: auto;
  24. }
  25.  
  26. img{
  27.     width: 200px;
  28.     display: block;
  29.     float: left;
  30. }
  31.  
  32. nav{
  33.     display: block;
  34.     float: right;
  35. }
  36.  
  37. nav li{
  38.     display: inline-block;
  39.     margin-top: 35px;
  40.     padding: 10px;
  41. }
  42.  
  43. nav li a{
  44.     text-decoration: none;
  45.     color: #676464;
  46.  
  47. }
  48.  
  49. nav li a:hover{
  50.     color: #ababab;
  51.     transition: all 0.4s ease-in-out;
  52. }
  53.  
  54.  
  55. /*Contenido*/
  56.  
  57.  
  58. section{
  59.     margin-top: 80px;
  60.     width: 100%;
  61.     overflow: hidden;
  62. }
  63.  
  64. article{
  65.     width: 43%;
  66.     color: #f4f4f4;
  67.     font-size: 15px;
  68.     float: right;
  69.     margin: 0 80px;
  70.     padding: 20px;
  71.     font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  72.     -webkit-box-sizing: content-box;
  73.     -moz-box-sizing: content-box;
  74.     -ms-box-sizing: content-box;
  75.     -o-box-sizing: content-box;
  76.     box-sizing: content-box;
  77.  
  78. }
  79.  
  80. article p{
  81.     text-align: right;
  82.     line-height: 30px;
  83.     margin-bottom: 15px;
  84. }
  85.  
  86. article p b{
  87.     font-size: 16px;
  88. }
  89.  
  90. /*FOOTER*/
  91.  
  92. footer{
  93.     text-align: center;
  94.     background-color: #151515;
  95.     position: fixed;
  96.     bottom: 0;
  97.     display: block;
  98.     width: 100%;
  99.     padding: 20px;
  100.   }
  101.  
  102.  
  103. footer a{
  104.     text-decoration: none;
  105.     color: #545454;
  106. }


Lo segundo es que el CSSLint de Atom me dice que en el footer hay un error y esque no se puede usar padding con width, porque no se pude/debe hacerlo? algun error? si no uso ambos pues ciertamente queda mal el footer.

y por ultimo: esta es solo una pagina, es decir el menu no lleva a ningun lado ni interna y externamente, como esque se añaden cosas al menu? simplemente copio y pego el menu en cada elemento? lei un poco pero solo encontre que con PHP se puede pero, no hay alguna forma con html?
Última edición por caricatos; 15/12/2015 a las 00:29 Razón: 30/30