Viste con estilo - 2da lección
Hola, amiguitos y amiguitas CSSeros bienvenidos sean a esta segunda lección de…
En la lección pasada veíamos que lo mas importante para poder vestir nuestra pagina requeríamos de una estructura básica. Aprendimos sobre modulos, etiquetas y selectores y modificamos el tipo y color de letra de nuestra página y la ultima vez que la vimos la habíamos dejado así
En esta entrega vamos a comenzar a darle forma a nuestro diseño.
El Layout (no pienso traducir esa palabra)
A grandes rasgos, en jerga de diseño, se le llama layout a la guía que muestra la manera en que los modulos o elementos de diseño están distribuídos en un campo virtual, pudiendo ser este una pagina de revista, una etiqueta, o como en este caso, la pantalla de una dispositivo electrónico. El componente principal de un layout es por lo general una retícula (o red o rejilla) donde cada elemento esta justificado respecto a los demas, y tiene como función mantener la armonía, el equilibrio y la congruencia del diseño.
En terminos de diseño web, hay basicamente dos tipos de layout: el Liquido (liquid) y el Fijo (fixed). El primero es mas gustado por los AI ya que no los elementos de los que está compuesto no tienen definidas ninguna medida fija, sino que son relativas al tamaño de pantalla y el tamaño de fuente que el usuario elija. Los layouts fijos son mas del gusto de los diseñadores gráficos, aqui el control es total puesto que todas las medidas estan especificadas a nivel pixel. Asi es posible hacer intrincados diseños a costa de sacrificar la flexibilidad.
Pero no todo es negro y blanco, entre estos dos extremos hay una gran variedad de grises, es decir, layouts híbridos que aprovechan lo mejor de ambos mundos. Para este experimento he decidido utilizar un layout mas o menos asi:
Donde el encabezado y la barra lateral tienen medidas fijas mientras el contenido se adapte al tamaño de la ventana del usuario. Osea que, utilizaremos un layout semilíquido.
Identidad y Clase
Como ya se habrán dado cuenta, dentro de algunas etiquetas de nuestro código se encuentran argumentos como id="content" y class="blog". Ambos sirven para diferenciar unos elementos de otros y para que sean mas faciles de alcanzar por las hojas de estilo y el DOM. Id sirve para definir un identificador unico, es decir, que sólo puede ser aplicado a un elemento, mientras que Class define una clase que puede ser aplicada a uno o varios elementos a la vez. Los nombres de las clases y los identificadores diferencian entre mayusculas y minusculas y no deben contener espacios. Un mismo elemento puede tener definido un identificador y una clase.
Posicionamiento
Antes que nada, vamos a añadir algunas propiedades al elemento body. Primero, configuraremos el tamaño de la fuente a 12 pixeles, para esto usaremos font-size:12px . Ademas, para evitar el error de algunos navegadores que añaden un margen por defecto a todas las páginas añadiremos estas dos reglas:
padding:0;
margin:0;
Ahora lo que vamos a hacer es posicionar el encabezado de nuestro layout para ello utlizaremos el elemento <div id="banner">. Para modificar las propiedades de un elemento con identificador debemos crear un selector de indentidad en nuestra hoja de estilos y para ello utilizamos la siguiente sintaxis: elemento#identificador o si lo desean simplemente #identificador osea que para este caso cualquiera de estas dos opciones es correcta:
div#banner#banner
Comencemos a definir sus propiedades. Lo primero que vamos a hacer es decirle al navegador que vamos a poner este elemento en donde se nos pegue la gana, independientemente de su posición dentro del código, para esto utilizamos la propiedad position:absolute;. Ahora hay que definir que queremos que se muestre hasta arriba ( top:0; ) y a la izquierda ( left:0; ) que se extienda a todo lo ancho de la página ( width:100%; ) y de alto deseamos que mida 200 pixeles ( height:200px; ).
Hay dos tipos de unidades de medida, las relativas y las “absolutas”. Aqui definimos la anchura del elemento con una unidad relativa a su contenedor (en este caso body) y la altura en una medida absoluta en pixeles. Cuando especificamos una medida cuyo valor es cero, no es necesario especificar ninguna unidad.
Ahora, para hacer la barra lateral modificaremos las propidades del elemento <div id="links">. Definimos el selector #links y como no conocemos el ancho de la ventana del usuario, le indicamos al navegador que queremos que se muestre a la derecha y debajo del banner ( position:absolute; top:200px; right:0; ). Esta vez definimos la anchura en pixeles ( width: 220px;) y la altura para que se ajuste automáticamente al contenido ( height: auto; ). Por ultimo, para que no quede el texto tan cerca a las orillas añadimos un padding de 10 pixeles (padding es el espacio entre el contenido y el contenedor). Aqui pueden ver el resultado
Me permití ademas, cambiar el color del fondo en el encabezado y fondo y color de la letra en la barra lateral.
Margenes
Como ya habrán notado, el encabezado y la barra lateral quedan por encima del contenido. Siguiendo la lógica que hemos usado hasta ahorita, lo lógico sería ahora modificar el elemento <div id="content"> . Pero como queremos que el contenido se adapte al tamaño de ventana del usuario no podemos especificar ni posicionamiento ni ancho ni alto absolutos. Asi que, vamos a recurrir mas bien a otro elemento dentro de #content que es <div class="blog">. Esta vez es una clase no un identificador asi que, utilizaremos un selector de clase que al igual que los otros puede ser expresado de dos maneras:
div.blog.blog
Como en este caso no vamos a utilizar position:absolute; significa que el elemento va a estar en el lugar que le toca por su posición en el código y utilizaremos márgenes para evitar que se encime con otros elementos. Los márgenes pueden especificarse por separado con margin-top,margin-right,margin-bottom y margin-left, pero se puede abreviar de la siguiente manera: margin:superior, derecho, inferior, izquierdo y asi nos ahorramos unos cuantos bytes en la hoja de estilo.
Entonces vamos a añadir la siguiente propiedad al elemento .blog: margin:225px 300px 50px 100px; ¡ y voila ! pueden ver aquí el resultado.
Traten a cambiar el tamaño de la ventana y vean como el contenido se ajusta sin afectar el tamaño del encabezado y la barra lateral.
Este es el código hasta ahorita:
body{
font-family:Verdana,Helvetica,Arial, Sans-serif;
font-size:12px;
padding:0;
margin:0;
color:#333;
}
#banner{
position:absolute;
top:0px;
left:0px;
width:100%;
height:200px;
background:#ce3554;
}
.blog{
margin:225px 300px 50px 100px;
}
#links{
position:absolute;
right:0;
top:200px;
width:220px;
height:auto;
padding:10px;
color:#fff;
background:#333;
}
Como ven, esto ya esta empezando a tomar forma. Pero nuestro diseño se ve como otros miles de diseños que hay en toda la internet, así que en la siguiente lección comenzaremos a darle personalidad propia. ¿Saz? los veo entonces.
Dudas, comentarios y sugerencias serán bien recibidas.
¡Abur!
precisamente ayer me preguntaba como redimensionar la ventana, sin que perdiera la distribución. gracias ;)
Saludos
como siempre, excelentísimo tutorial, lo único que puedo agregar es un comentario acerca de las clases, un elemento puede tener más de una clase separada por espacio
css:
.clase1{ bla:blabla; } .clase2{ blablabla:bla; }espero la siguiente entrega
saludos
Mas vale tarde que nunca! :$ . Por fin he leído completo el tutorial y me ha resuelto no una duda (como rañel), sino un montón. Al igual que fael, espero el no. 3.
Venga, venga matador! (flor). ;)
Excelente tuto-post, yastoy aprendiendo a vestir con estilo, espero con ansias la lección 3, porque aun ando mal vestido…
Pinche Sosa!
Eres re bueno.
Contribuye a la discusión