Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

CSS - Posicionamiento de elementos - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 22 de febrero de 2021 por Fernando M.

215 visualizaciones

Más información Transcripción

Descargar la transcripción

Bueno, pues ahora vamos a ver cómo posicionar elementos dentro de una página web. Esto es bastante importante también, ¿vale? 00:00:00
Para ello hemos partido de un trabajo anterior, ¿vale? Del último que hicimos, que era el de los márgenes y el relleno, ¿vale? 00:00:09
Simplemente, como veis, lo que yo hago es que borro todo el contenido, ¿vale? Y dejo solo el titulito, ¿vale? Simplemente, ¿vale? 00:00:18
Dejo también el body y estas propiedades que habíamos definido 00:00:30
Y que hemos dicho que vamos a ir manteniendo siempre, ¿vale? 00:00:38
Y como veis aquí, pues he puesto posicionamiento de elementos con CSS, ¿vale? 00:00:41
Y el archivo se llama posicionar barra baja elementos punto html 00:00:46
Vale, pues entonces, vamos a empezar 00:00:50
Vamos a empezar con el contenido de html, ¿vale? 00:00:54
Entonces aquí ponemos una cabecera de nivel 1, posicionamiento de elementos con CSS, ¿vale? 00:00:57
Y ahora, en primer lugar vamos a poner una caja contenedora, un div, ¿vale? 00:01:08
Ese div le vamos a poner un id que va a ser contenedor, ¿vale? 00:01:13
Y dentro de ese div vamos a poner 12 div más, ¿vale? 00:01:18
Pero para eso vamos a utilizar un atajo de m, ¿vale? 00:01:22
Lo podéis hacer manualmente, como siempre digo, ¿vale? Ese atajo sería poner div y como queremos poner 12 cajas, pues pondremos por 12, ¿vale? Pero aparte yo quiero que esas cajas pertenezcan a una clase, ¿vale? 00:01:25
Pues si quiero que pertenezcan a una clase, simplemente pongo corchetes y dentro pongo la palabra class igual y azul, ¿vale? 00:01:40
Y fijaros, pongo azul sin ponerlo entre comillas, él solito lo va a poner luego entre comillas, ¿vale? 00:01:50
Cogemos ahora ese div, lo copiamos, lo ponemos aquí debajo, ¿vale? 00:01:56
Y ahora simplemente lo que hacemos es que le damos al tabulador, ¿vale? 00:02:00
Fijaros que al darle al tabulador me salen 12 bits, ¿vale? 00:02:06
Y lo único que vamos a hacer aquí es que al segundo vamos a borrar la clase y le vamos a poner un id que va a ser verde. 00:02:13
¿Vale? 00:02:22
Y ahora vamos a empezar a modificar estos estilos. 00:02:22
Vamos a empezar con el contenedor, ¿vale? 00:02:28
Contenedor. 00:02:32
Y a este contenedor lo que le vamos a hacer es que le vamos a dar una anchura de 800 píxeles y le vamos a dar una altura automática, ¿vale? Y aparte le vamos a poner un borde de un píxel sólido, ¿vale? 00:02:33
¿Vale? Fijaros que cuando yo hago esto, lo que me sale es una línea horizontal sin altura. ¿Por qué? Pues porque los diferentes elementos div que yo tengo dentro no tienen una altura definida. 00:02:49
Entonces, como no tienen una altura definida, pues realmente es como si no existieran ahora mismo. ¿Vale? Hasta que yo a ellos no les dé una altura, esa altura del contenedor no se definirá de forma automática. 00:03:02
¿Vale? Entonces, ahora lo que vamos a hacer es definir tanto los elementos verdes como los elementos azules. ¿Vale? Como el elemento verde es un id, ponemos almohadilla verde. 00:03:15
Y si ahora yo pongo una coma, puedo añadir otro tipo más. ¿Vale? Y en este caso, como queremos definir la clase azul, pues ponemos punto class. ¿Vale? 00:03:28
Ponemos, perdón, punto clase, no, pondríamos punto azul, ¿vale? 00:03:37
Importante, ¿por qué todos los elementos le hemos puesto clase menos uno que le hemos puesto un id? 00:03:43
Pues porque los que pertenecen a la misma clase van a ser iguales y el id es un identificador único, 00:03:50
por lo tanto, solo ese va a ser diferente, ¿vale? 00:03:56
Pero ellos dos pueden compartir propiedades. 00:03:59
De hecho, les vamos a hacer que compartan, en este caso, van a compartir la anchura, ¿vale? 00:04:01
Que va a ser de 100 píxeles. 00:04:08
Van a compartir la altura, que también va a ser de 100 píxeles. 00:04:10
Y fijaros cuando ponga esto, cómo aumenta el tamaño del elemento contenedor, ¿vale? 00:04:14
Fijaros, ¿vale? 00:04:23
Le vamos a poner un borde de un píxel sólido, ¿vale? 00:04:25
Ahí veis las cajitas y le vamos a poner un margen por abajo de 12 píxeles, ¿vale? Y ya veis ahí todos los elementos, ¿vale? 00:04:30
Y ahora vamos a modificar exclusivamente, ¿vale? Exclusivamente el elemento verde, ¿vale? Al elemento verde vamos a empezar poniéndole un color de fondo. ¿Y qué color de fondo le vamos a poner? Pues evidentemente el verde, ¿vale? 00FF00. 00:04:48
Y debajo vamos a modificar la clase azul, ¿vale? 00:05:11
Y a esta le vamos a poner otro color de fondo y le vamos a poner el azul, ¿vale? 00:05:16
Que es 0000FF, ¿vale? 00:05:23
Entonces aquí tenemos, fijaros, mis 12 cajitas, todas azules menos una que es verde, ¿vale? 00:05:27
Entonces vamos a trabajar el posicionamiento, ¿vale? 00:05:34
Entonces, para fijar el posicionamiento, lo que vamos a hacer es utilizar una propiedad, ¿vale? Que se llama position, ¿vale? Una propiedad que se llama position. 00:05:37
Entonces, nos vamos a ir aquí al verde, ¿vale? Que es el elemento que queremos mover y vamos a poner position, ¿vale? Entonces, fijaros. Bueno, voy a poner aquí unos pequeños comentarios. Para posicionar utilizamos position, ¿vale? 00:05:52
¿Y cuáles son las propiedades que tiene esto? Pues tiene static, que sería por defecto, es decir, que se queda en la posición donde nosotros lo hayamos puesto, ¿vale? Tenemos relative, ¿vale? Que toma como referencia la esquina superior izquierda, ¿vale? Del elemento contenedor, en este caso de la caja, ¿vale? No de la caja contenedor, no de la página web, ¿vale? Importante, ¿vale? 00:06:13
Luego tenemos absolute, ¿vale? Que toma como referencia la ventana del navegador o elemento padre, ¿vale? Es decir, elemento que está justo por encima. Y por último, fix, que sería elemento fijo en la página, ¿vale? 00:06:40
Y vamos a ir viendo todo esto de forma diferente, ¿vale? 00:07:08
Entonces, en primer lugar, vamos a probar a hacer un posicionamiento relativo, ¿vale? 00:07:15
Un posicionamiento relativo. 00:07:22
Entonces ponemos relativo, ¿vale? 00:07:24
Y ahora, para posicionarlo, lo que hacemos es que vamos a utilizar las propiedades, por ejemplo, left, ¿vale? 00:07:29
Esto sería un posicionamiento relativo en la parte izquierda de 90 píxeles, ¿vale? Entonces, fijaros cómo hemos desplazado la caja hacia la izquierda, ¿vale? Y en el top, ¿vale? Vamos a poner, por ejemplo, 80 píxeles, ¿vale? 00:07:35
Entonces, respecto del contenedor, ¿vale? Es decir, respecto de esta esquina que os estoy marcando con el ratón, tendríamos 80 píxeles y 90 píxeles, ¿vale? ¿Qué más? ¿Qué más? ¿Qué más? ¿Qué más? ¿Qué más? ¿Qué más? Tenemos la posición, tenemos la forma de ponerlo con referencia absoluta, ¿vale? 00:07:55
Fijaros que yo ahora pongo aquí, en vez de relative, pongo absolute, ¿vale? Fijaros que ese posicionamiento lo hace respecto del inicio de la página, ¿vale? Desde donde comienza la web, ¿vale? 00:08:22
Y por último tenemos la opción Fix, ¿vale? Que fijaros que cuando yo pongo la opción Fix da la sensación que es lo mismo que Absolute, pero voy a hacer scroll hacia abajo. 00:08:37
Y fijaros lo que pasa. El elemento se viene conmigo, ¿vale? De hecho, si os dais cuenta, cuando yo pongo aquí absolute, el elemento se ha movido, ¿vale? Si yo pongo relative, fijaros cómo al poner relativo, el elemento se ha movido dejando un hueco. 00:08:53
Pero si yo pongo absolute, de repente ese hueco lo cubre un azul, ¿vale? 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 y 11. Es decir, cuando pongo la referencia absoluta, el hueco que él deja lo cubre otro elemento, ¿vale? 00:09:14
Y sin embargo, si yo bajo, la cajita azul se sigue quedando arriba, pero si pongo Fix, la cajita se viene conmigo a donde yo vaya, ¿vale? Entonces, si yo no quiero que ese hueco se ocupe, ¿vale? Como pasaba con el Absolute, ¿vale? 00:09:33
Fijaros, si yo pongo aquí absolute, yo me voy ahora a mi elemento contenedor, ¿vale? 00:09:56
Y en mi elemento contenedor voy a poner yo también position y voy a poner relative, ¿vale? 00:10:05
Entonces, el contenedor está posicionado de forma relativa respecto del elemento padre, que es la caja, ¿vale? 00:10:13
Que es la caja anterior. 00:10:19
Y ahora este elemento está posicionado respecto de mi propia web, ¿vale? 00:10:20
Entonces así también tendríamos como un doble control, ¿vale? 00:10:30
Pues ya está. Esto en cuanto a posicionamiento, ¿vale? 00:10:37
Propiedades. También tenemos propiedades bottom, ¿vale? 00:10:42
No solo hay left y top, también habría una propiedad bottom, ¿vale? 00:10:46
Podremos jugar con diferentes 00:10:50
Referencias para posicionar 00:10:52
Los elementos 00:10:55
Pues ya está 00:10:56
Esto en cuanto al posicionamiento 00:11:01
De elementos 00:11:03
Seguimos con más vídeos 00:11:04
Autor/es:
Fernando Martínez Martí
Subido por:
Fernando M.
Licencia:
Reconocimiento - No comercial - Compartir igual
Visualizaciones:
215
Fecha:
22 de febrero de 2021 - 21:39
Visibilidad:
Público
Centro:
IES EL BURGO - IGNACIO ECHEVERRÍA
Duración:
11′ 07″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
29.62 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid