Primera web (dudas basicas)

luisdevelop · #1 (**permalink**) 13/12/2015, 22:34

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<!DOCTYPE html>
<html lang="esp">
 
 <head>
  <meta charset="UTF-8">
  <title>Proseso Creativo</title>
  <link rel="stylesheet" href="estilos.css" />
  <link rel="shortcut icon" type="image/x-icon" href="images/logo_cabecera.png">
</head>
 
<body>
   <header>
     <div>
         <img src="images/logo_cabecera.png" alt="LogoProsesoCreativo" />
          <nav>
              <ul>
                  <li><a href="#">Inicio</a></li>
                  <li><a href="#">Conócenos</a></li>
                  <li><a href="#">Que hacemos</a></li>
                  <li><a href="#">Nuestro Trabajo</a></li>
                  <li><a href="#">Contáctanos</a></li>
              </ul>
          </nav>
     </div>
 
   </header>
    <section>
        <article>
            <p>
                <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
            </p>
            <p>
                <b>Todo lleva un proses</b> en el que hay que estar atento a los cambios y despierto ante circunstancias.
            </p>
            <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.
            </p>
            <p>
                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.
            </p>
        </article>
    </section>
    <footer>
        <addres>
            <a href="http://www.prosesocreativo.com" target="_blank">Proseso Creativo | Derechos Reservados 2015</a>
        </addres>
    </footer>
</body>
 
</html>

Código CSS:

Ver original*{
  margin: 0;
  padding: 0;
}
 
body{
    background: url(images/fondo1-1024x569.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}
 
header{
    width: 100%;
    z-index: 100;
    background-color: #fff;
    overflow: hidden;
}
 
header div{
    width: 960px;
    height: 100px;
    margin: auto;
}
 
img{
    width: 200px;
    display: block;
    float: left;
}
 
nav{
    display: block;
    float: right;
}
 
nav li{
    display: inline-block;
    margin-top: 35px;
    padding: 10px;
}
 
nav li a{
    text-decoration: none;
    color: #676464;
 
}
 
nav li a:hover{
    color: #ababab;
    transition: all 0.4s ease-in-out;
}
 
 
/*Contenido*/
 
 
section{
    margin-top: 80px;
    width: 100%;
    overflow: hidden;
}
 
article{
    width: 43%;
    color: #f4f4f4;
    font-size: 15px;
    float: right;
    margin: 0 80px;
    padding: 20px;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    -ms-box-sizing: content-box;
    -o-box-sizing: content-box;
    box-sizing: content-box;
 
}
 
article p{
    text-align: right;
    line-height: 30px;
    margin-bottom: 15px;
}
 
article p b{
    font-size: 16px;
}
 
/*FOOTER*/
 
footer{
    text-align: center;
    background-color: #151515;
    position: fixed;
    bottom: 0;
    display: block;
    width: 100%;
    padding: 20px;
  }
 
 
footer a{
    text-decoration: none;
    color: #545454;
}

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?

lauser · #2 (**permalink**) 14/12/2015, 13:19

Cita:

Iniciado por samantarrebola2

Quieres que te conteste por privado o mejor por aquí?

Lo bueno de un foro, es que es publico. Por lo tanto..... por el beneficio de todos los usuarios, las respuestas deben ser publicas, insisto... siempre publicas, tanto preguntas como respuestas.

luisdevelop · #3 (**permalink**) 14/12/2015, 22:05

Cita:

Iniciado por lauser

Lo bueno de un foro, es que es publico. Por lo tanto..... por el beneficio de todos los usuarios, las respuestas deben ser publicas, insisto... siempre publicas, tanto preguntas como respuestas.

de donde salio esa cita?

de cualquier forma prefiero la respuesta publica porfavor, alguien mas buscara preguntas similares y que sirva de ayuda, no?

NueveReinas · #4 (**permalink**) 15/12/2015, 16:37

Cita:

Iniciado por luisdevelop

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.

El width, es decir, el ancho del footer que has definido, es del 100% de la página.
Al añadir un padding sin definir (es decir, sin declarar qué parte del elemento debe incluir ese espaciado), se le añadiría en los cuatro lados: arriba, derecha, abajo e izquierda.

Prueba con lo siguiente:

Código CSS:

Ver originalpadding: 20px 0px;

Esto le indica que arriba y abajo tendrá un padding de 20px y a los lados nada.

Otra opción que hace lo mismo, escrito de manera diferente, es la siguiente:

Código CSS:

Ver originalpadding: 20px 0px 20px 0px;

Si por ejemplo quisieses que el padding fuese 20 arriba y abajo, 10 a la derecha y 0 a la izquierda, solo habría que hacer esto:

Código CSS:

Ver originalpadding: 20px 10px 20px 0px;

------------------

Cita:

Iniciado por luisdevelop

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?

Lo más sencillo es hacer un include de PHP, pero sino quieres usar PHP puedes hacerlo con Javascript o jQuery, pero no merece la pena, porque en lugar de cargar un código concreto (PHP) tendría que cargar todo un script.

Espero que la información te haya sido de utilidad. Saludos.

luisdevelop · #5 (**permalink**) 15/12/2015, 23:43

Ciertamente tienes razon jajaj gracias por tu ayuda.