Del curso: HTML5 práctico: Visualización de datos

Estilos aplicados sobre la estructura base del HTML - Tutorial de HTML

Del curso: HTML5 práctico: Visualización de datos

Comenzar mi mes de prueba gratis

Estilos aplicados sobre la estructura base del HTML

“

Tengo ya mis contenidos preparados, ahora necesito darles un poco de aspecto antes de continuar. Bueno, pues primero necesito que todo este HTML quede bien pegado sobre el borde, porque generalmente este tipo de infografías se suelen montar sobre un "iframe" o sobre un contenedor que te da otra gente que tiene el control sobre la página web sobre la que se va a montar. Bueno, pues entonces necesitaré pedirle a ese cuerpo en principio que tenga un margen de 0. Por otro lado, además de ese margen, también en principio voy a utilizar siempre la misma fuente, así que puedo copiarla de un poco más arriba, donde la tengo guardada, y pegarla. Eso en cuanto al HTML, pero también tenemos un cuerpo al que hay que darle un color, porque esta infografía tenía de color de fondo negro. Bueno, pues añadimos ese color negro. Eso sí, que tenga un 'body'. Ya tengo ese color negro. Ahora tengo dos elementos que son imprescindibles dentro de mi estructura, que es la maqueta y luego el "main container". La maqueta me va a servir para poner una imagen de fondo y sobre ella calcar, ir colocando los elementos exactamente en el sitio en el que tienen que ir. Bueno, pues entonces necesitaré de entrada un selector para esa maqueta, con su identificador, y sobre ella iré añadiendo cosas. Por ejemplo, necesito que tenga una imagen de fondo. Esa imagen de fondo, que tengo que sacarla desde, saliendo de la carpeta 'css' a la carpeta 'img', dentro de la carpeta 'img' voy a buscar la carpeta 'temps' y dentro de esa carpeta 'temps' añadiré esa imagen. Luego, más adelante, la eliminaré. Como la voy a calcar no quiero que se repita, así que también voy a pedir que el 'background-repeat' sea 'no-repeat', para que no se repita esa imagen. Y ahora tiene que ocuparlo todo, pero el segundo requisito va a ser que además su posición sea debajo de los contenidos que voy a hacer, así que para eso lo ideal es utilizar el 'position : absolute' y luego ir añadiendo '0' para el borde superior, el borde inferior, el borde izquierdo y el borde derecho. Eso mismo también se lo tengo que aplicar al 'main_container', así que lo copio, creo un selector para él, copio este código y lo pego. Ahora uno tiene que quedar encima del otro. Bueno, pues entonces le aplico a uno de ellos un 'z-index' menor y al segundo le aplico un 'z-index' mayor, lo guardo y vemos como efectivamente en la maqueta me aparece, y me aparece debajo de los contenidos que estoy metiendo. Lo que pasa es que no se distingue bien cuál es cuál. Bueno, pues también tenemos una forma de hacerlo: es utilizar la opacidad. En realidad esta propiedad no es muy compatible, pero a mi me da igual, porque la voy a utilizar solamente para desarrollar y luego la eliminaré. Bueno, pues aquí tenemos ese fondo ya semitransparente. Siguiendo trabajando con ese contenedor principal, necesito que ese contenedor no tenga más que un tamaño preciso, porque en realidad no tiene sentido que me ocupe una página enorme hacia abajo. Es más, debería de restringir su tamaño de alguna manera. Yo le he definido que, de entrada y por defecto, lo ocupe todo, pero en cualquier caso, de todas formas, voy a establecer sus propiedades máximo de ancho, que van a ser 150 píxeles, y máximo de alto, que va a ser 400 píxeles. ¿Por qué sé que es este tamaño? Bueno, pues en principio no tiene por qué ser este. Puedo utilizar un ancho un poco mayor y un alto un poco mayor, pero sí que sé que esas son las dimensiones de la maqueta. Entonces de momento voy a restringir el tamaño máximo a esas proporciones y luego, si eso, poco a poco ya haré modificaciones, y modificaré de hecho ese ancho hasta un máximo total. Ya tenemos los contenidos, y de hecho ya tienen también una estructura inicial con sus CSS sobre la que empezar a trabajar.

Contenido