Diseño y Programacion Web – Clase 8 – CSS a fondo

programacion web html js cssprogramacion web html js css

Este camino recien empieza. Todavia quedan muchas cosas importantes que conocer para ser un programador y diseñador web integro. Pero lo importante es que se diviertan aprendiendo y probando.

En la clase anterior estabamos creando nuestro sitio con HTML y CSS. Asi quedo hasta ahora:

index.html

main.css

Lo ultimo que hablamos fue que asumir que el section tendria padding siempre no era lo convieniente, asi que vamos a darle una class a nuestro section, y generar otro:

Ahora con otro section naturalmente los dos van a tener un padding hacia abajo. Vamos a hacer lo siguiente:

Aclaracion, borren el section del main.css. De esta manera tenemos el primer section con clase seccion1 un poco mas alejado del header por su padding-top y el segundo un poco alejado del footer. Entre los dos tambien hay cierta distancia porque el padding-button de seccion1 empuja hacia abajo a seccion2.

Pero tal vez nos gustaria que fuese como un diario que tenga dos columnas. Lo primero que debemos tener en cuenta es que tenemos una propiedad por defecto que es width=100%. Esto significa que no importa la resolucion en que veamos el sitio, siempre va a ocupar el ancho total. Nosotros necesitamos que ocupe el 50%, la mitad, para que entren las dos secciones:

Le quitamos el padding-top para que no quede mal posicionada la seccion. Pero aun asi se siguen viendo una debajo de la otra. Eso es por una propiedad muy conocida entre los frameworks de maquetacion: float.

Con esto logramos que las dos secciones floten hacia la izquierda. Pero hay un problema tragico. El background del footer se esta comiendo las secciones. Eso pasa porque al usar float le estamos dando una flexibilidad posicional al sitio que no tiene. Mas adelante veremos las posiciones. Por el momento si agregamos un clear:left al siguiente elemento, que en nuestro caso es el footer, va a funcionar:

Un detalle que olvide mencionar es el uso de css resets. Por defecto las hojas de estilo vienen seteadas con varias propiedades que fueron definidas hace un tiempo cuando la web funcionaba de otra manera. Esas propiedades ya estan funcionando por defecto y nos pueden romper nuestros sitios sin que entendamos la verdadera razon. Podemos crear nuestros propios resets, o mejor aun, usar el de algun tipo que sufrio lo mismo que nosotros. Yo recomiendo este.

Se descarga y se implementa en nuestro head arriba del main.css.

Es muy importante que posicionemos bien nuestro codigo html, especialmente con los includes. El navegador lee linea por linea, y si lo pusimos al revés los resultados van a ser inesperados.

Ahora que pasa con la altura de nuestros elementos? Lo notaron? La altura se esta ajustando al contenido que pongamos ahi. Pero probablemente no queramos eso. Porque por ejemplo nuestro header y footer son muy finitos. Asi que vamos a modificarlos.

Con el atributo height podemos modificar la altura. Pero si restringimos la altura, cuando el texto que la contenga sea mayor, se va a salir de la caja. Ustedes me pueden decir “pero si sabemos que contenido va ahi”. Bueno, no siempre. Cuando trabajemos con contenidos dinamicos, no conoceremos la cantidad exacta de alto que pueda ocupar. Sin embargo, tampoco podemos dejarle un alto de 500px cuando dinamicamente ocupe 100px. Entonces existe una propiedad llamada max-height:

Esta propiedad es genial. Nos indica que nuestra altura como lo hicimos antes, sera de 100px. Pero en el caso de que sea de mas, el box se va a estirar hasta 500px. Si lo excede, es porque necesitamos modificar los valores, o el contenido es realmente excesivo. Esto es un simple ejemplo, no lo tomen como numeros exactos.

En las proximas clases vamos a seguir tocando css aprendiendo muchas propiedades que podrian ser utiles, y performando un poco el codigo.

Be the first to comment on "Diseño y Programacion Web – Clase 8 – CSS a fondo"

Leave a comment

Your email address will not be published.


*