Diseño y Programacion Web – Clase 9 – Alineando con CSS

diagrama programaciondiagrama programacion

Antes de arrancar, les quiero mostrar una joya que hizo un genio en html, css y js. Se trata de un Super Mario implementado en estas tecnologias. La persona lo subio a Github (ya les voy a enseñar como hacer eso) y el codigo esta accesible para todos. Pueden verlo desde aca. Tambien un Mario en 3D muy bueno, miren.

Bueno iniciando la clase, recuerdan que le dimos altura al header y al footer? Si lo notaron, los textos no quedan bien. Vamos a dedicarnos a alinear los elementos. Vamos a poner el titulo del header en el medio del medio, asi:

Si se fijan tenemos “header h2”. Eso significa que dentro del elemento header, todos los h2 van a tener las propiedades que se especifiquen ahi. Con esa propiedad logramos ponerlo en el medio del ancho, pero necesitamos tambien hacerlo en el medio del alto. Tenemos dos opciones. O lo trabajamos con posicion relativa o metemos un borde. Vamos a usar la segunda por ahora:

Ahora vamos a trabajar con la estructura de cajas que mencione implícitamente en clases anteriores. Pero primero, un poco de teoria. Para poder programar en CSS hay que entender el modelo de cajas que maneja el maquetado web. Encontre este articulo muy completo acerca de como se maqueta teniendo en cuenta el metodo de box model. Es lectura obligada para entender lo que armaremos ahora.

Ahora vamos a trabajar sobre el footer. Vamos a crear varios divisores (divs) dentro del <footer> para manejar las cajas y contenidos por separado.

Si vieramos el sitio ahora, nos encontrariamos con un div debajo del otro. Asi se ve sin estilo. Ahora vamos a crear las clases que asignamos.

Lo primero que debemos trabajar es el tamaño y posicion de las cajas.

A las clases que tienen imagen les meti la propiedad border. Es mas que nada visual. Esa propiedad le añade un borde en pixeles, y al pasale solid lo convierte en una linea sin separaciones. Si se lo pasamos asi, genera un cuadrado. Pero si quisieramos podriamos especificarle que lado del borde rellenar.

Haciendo esto que indico arriba tendriamos todos los elementos uno al lado del otro. Pero no siempre tiene que ser asi. Puede que necesitemos que haya uno o varios elementos que esten a la derecha, entonces:

Va a dejar el texto de los fundadores a la derecha. Pero todo esto son posiciones que no podemos manejar con mucha fluidez. Para hacer esto vamos a usar un atributo llamado position, con valor relative. Esto nos da la libertad de poner cualquier elemento en cualquier posicion. Aunque nos puede quitar cierta logica del responsive design, asi que cuidado donde se aplica. Vamos a darle posicion relativa a la clase imagen.

Los atributos top y left nos sirven para manejar arriba y abajo (top) y izquierda y derecha (left). Viene a ser una forma de manejar coordenadas (x,y) en un eje cartesiano. Pero claro, trae problemas. Por ejemplo esta pisando el contenido de la caja texto-img y no nos conviene. Algo muy comun que pasa al usar posiciones relativas es que cuando se redimensiona el navegador para buscar esca-labilidad en ancho, como la posicion es la misma, todo se mueve excepto esos elementos.

En el caso de ser muy necesario, en las proximas clases veremos media-querys para poder manejar posiciones especificas sobre cada ancho. Tambien veremos como crear un menu y posicionarlo para que siempre aparezca en el navegador aunque hagamos scrolling.

Be the first to comment on "Diseño y Programacion Web – Clase 9 – Alineando con CSS"

Leave a comment

Your email address will not be published.


*