martes, 21 de mayo de 2013

Consejos para maquetar

Hola a todos,
 
Ahora quiero hacerles recordar que cuando se programa con el HTML5 y CSS3 es muy importante tener en cuenta que a la hora de la maquetación, las nuevas etiquetas funcionan siempre como <DIV>,  por lo que es muy importante que a la hora de definir su hoja de estilos se ponga casi al inicio lo siguiente :
 
header, section, footer, aside, nav, article, figure, fig caption, hgroup{
       display : block;
}
 
body {  
       text-align : center;
}
 
#Contenedor{
       width : 980px;
        margin-left : auto;
        margin-rigth : auto;
}
 
 
En el primer caso :   block,  nos permite poder una etiqueta debajo de otra,  tal como lo que pasaba cuando etiquetábamos con los DIVs.   Estas etiquetas ocuparán todo el ancho de la web.
Es muy importante hacer esto en la hoja de estilos para que luego no tengas problemas en la maquetación.
Recuerda que los navegadores  considerán cada elemento del HTML como si fueran una caja
Text-align : center;    te centrará todo el cuerpo de la web.
 
Recuerda es importante que en tu HTML siempre definas un "Contenedor" en un DIV para poder cuadrar siempre tu página WEB
 
En el caso de la etiqueta NAV,  puede también ser definida en vez de block como in line-block y lo que hará es poner una al costado de otra.   Esto se hace con los menús de selección horizontales.
 
 
Ahora te toca ir definiendo los anchos y posiciones de cada una de las etiquetas que tienes como se hacia con los DIV.
Por ejemplo si ASIDE va a esta a la izquierda y SECTION   a su derecha,  deberás definir en la hoja de estilos por ejemplo :
 
 aside{
    width : 380px;
}
 
section{
     width : 600px;
     float : left;
}
 
Esto lo hacemos para subir SECTION al lado de ASIDE, tal como hacíamos con los DIVs.
Ten en cuenta que conforme vayas agregando los MARGIN o los PADDING o los BORDER,  te irán ocupando espacio del WIDTH definido,  por lo que se deberá restar para que cuadre tu maquetación.
El MARGIN te deja un espacio entre las cajas,  pero el PADDING es un espacio dentro de la Caja.
Por ejemplo es útil en SECTION usar un padding de 10px para  que a la hora que escribas tus textos estos no toque los bordes de la caja.  Por que se tu le pones un BORDER y no pones un PADDING  tus textos tocarán las líneas del Border.
 
Cuando llegas al FOOTER, es probable que se te descudre la página por lo que es muy importante, poderle en la hoja de estilo lo siguiente (nuestro footer tiene un id="piedepagina"):
 
#piedepagina{
      clear : both;
      text-align : center;
      padding : 20 px;
}
 
 

No hay comentarios.:

Publicar un comentario