Saltar navegación

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

CSS Posicionamiento - 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 29 de diciembre de 2020 por Amadeo M.

104 visualizaciones

Más información Transcripción

Descargar la transcripción

Todos los contenidos de una web están dispuestos en ella mediante un modelo de caja, que ya vimos, eso del padding, el margin que teníamos. 00:00:00
La cuestión es que en un esquema normal, pues todo se aplica uno detrás de otro. 00:00:12
Si es el código fuente, pues este es el esquema normal, uno detrás de otro. 00:00:20
En el esquema flotante podríamos indicar que un elemento flota, en este caso, en su izquierda 00:00:24
Y este bloque 3 se va escribiendo a la derecha de este hasta que acaba y después continúa 00:00:30
E incluso podríamos definir un esquema absoluto donde decimos que cada bloque de información lo ponemos donde nos apetezca 00:00:36
Directamente donde nos apetezca, incluso solapándose unos con otros 00:00:45
Bueno, estos son los esquemas de posicionamiento básicos 00:00:49
entonces vamos a pasar al esquema de posicionamiento flotante 00:00:52
entonces para ello hay dos elementos que son float y clear 00:00:56
y float pues dice por ejemplo que una clase capital dentro de span 00:01:00
esa letra que en este caso corresponde a esta L de aquí 00:01:09
va a flotar a la izquierda con este background de rosa 00:01:11
con ese color rojo, con ese tipo de caracteres 00:01:15
y efectivamente vemos que esta letra, ella, se queda ahí 00:01:18
Y todo lo demás va poniéndose alrededor de ella 00:01:21
¿De acuerdo? 00:01:27
Incluso eso lo podemos aplicar directamente 00:01:29
Que es la primera letra porque es la misma 00:01:30
Bueno, esto es como haríamos el float 00:01:32
Y todo iría alrededor de ella 00:01:36
Si pusiéramos, por ejemplo, que esto aquí hay un margin 00:01:37
Margin right de 1M 00:01:41
Pues esto iría un poquito más para acá 00:01:45
En vez de estar aquí, pues a lo mejor estaba ahí aproximadamente 00:01:46
¿De acuerdo? 00:01:49
bien, esto es muy útil para imágenes 00:01:50
porque yo puedo poner una imagen 00:01:53
si yo hago un texto que tiene una imagen 00:01:55
esto se vería de esta manera 00:01:57
sin embargo seguramente yo no quiero que se muestre así 00:01:58
yo seguramente quiero que esto se muestre así 00:02:00
entonces para ello simplemente 00:02:04
diciéndole float left 00:02:05
flotaría a la parte izquierda 00:02:06
y con float right a la parte derecha 00:02:09
con lo cual queda bastante bien 00:02:11
incluso si tengo 00:02:13
varias imágenes, unas quiero poner a la izquierda 00:02:14
y otras a la derecha, pues puedo crearme 00:02:17
unas imágenes 00:02:19
que tengan la clase izquierda 00:02:20
que vayan a un sitio y otras 00:02:23
a otro, ¿de acuerdo? 00:02:25
con lo cual ya es cuestión de ir jugando con esas características 00:02:26
clear 00:02:29
es una propiedad que lo que dice es 00:02:31
en este momento, por favor 00:02:33
acaba con el float 00:02:34
acaba con el float 00:02:37
entonces, bueno, pues yo tengo por ejemplo 00:02:38
que la etiqueta hr en este caso 00:02:40
va a limpiarme 00:02:43
todos los floats que haya en marcha 00:02:44
con lo cual, aunque aquí yo continuaría 00:02:46
en situación normal con el logotipo de Linux 00:02:49
debe flotar, no sé qué 00:02:51
esta línea corta todo y empezamos 00:02:52
de nuevo con nuestros elementos 00:02:55
pero es muy interesante 00:02:57
muchas veces se olvida poner y realmente 00:02:59
es muy importante para leer 00:03:01
¿cómo podemos centrar una imagen? 00:03:02
pues si está dentro de un párrafo 00:03:04
pues centrando ese párrafo 00:03:08
no tenemos mayor problema 00:03:09
ese párrafo, esa división o lo que sea 00:03:10
cuando queremos distribuir 00:03:13
la información, aunque sea continua 00:03:15
podemos aplicárselo, por ejemplo 00:03:17
que todos los párrafos vayan de esta manera 00:03:19
ponemos todos, el primero, el segundo 00:03:21
el tercero, el cuarto 00:03:23
si fuera más pequeña la información, pues cabría 00:03:24
más por línea, pero esto quedaría todos los 00:03:26
elementos uno detrás de otro 00:03:29
¿de acuerdo? 00:03:31
¿qué ocurre cuando nos salimos? pues bueno 00:03:32
que se puede ver la información de esta manera 00:03:34
con lo cual podemos poner directamente 00:03:36
el overflow auto 00:03:39
para que él sepa cuánto es la información 00:03:41
que va a caber dentro 00:03:43
de ella, esta es la posición 00:03:45
flotante 00:03:46
¿Qué ocurre con la posición absoluta? 00:03:47
Pues la posición absoluta tiene una serie de características 00:03:51
Puede ser estático, posicionamiento absoluto estático 00:03:54
O relativo, o fijo, o realmente absoluto 00:03:57
Bueno, el estático, el elemento se sitúa en la posición que le corresponde 00:04:01
De acuerdo con el flujo normal, es decir, es como no hacer nada 00:04:06
El relativo, es relativo a donde estoy yo situado 00:04:09
y a partir de ahí puedo establecer las propiedades top, bottom, left o right 00:04:13
entonces todo esto lo podemos indicar 00:04:19
por ejemplo, yo estoy aquí en este párrafo desplazado 00:04:21
digo que su background color es white 00:04:27
que su border es negro de un píxel sólido 00:04:29
es decir, estamos en este de aquí 00:04:32
y que su posición es relativa top 20 píxel 00:04:34
si tendría que estar aquí, esta es la posición donde tendría que estar 00:04:37
si no hiciéramos nada, él ha bajado 20 píxeles para abajo 00:04:40
en este caso decimos que top-20 debería estar aquí 00:04:44
y ha subido un montón de píxeles para arriba 00:04:48
con eso podemos ir colocando todos los textos que queramos 00:04:51
un poco para verlo, el top es esta parte superior 00:04:58
el bottom esta parte inferior 00:05:01
left esta parte de aquí y este right 00:05:03
y aquí el ancho y el alto del elemento con el que estamos trabajando 00:05:06
Fixed hace lo mismo que un absoluto 00:05:11
lo único que se queda fijo en todo momento 00:05:17
cuando movamos la barra de desplazamiento del menú 00:05:19
este elemento que pongamos como fijo se va a mantener en la misma posición 00:05:21
¿de acuerdo? 00:05:25
bueno, ya lo veremos en la página de ejemplos 00:05:27
o podemos verlo ahora mismo, tampoco hace falta 00:05:29
vemos al menos de arriba como se está quedando en todo momento 00:05:32
independiente de que bajemos todos esos elementos 00:05:37
en absolute lo que hacemos es colocar cada cosa en el sitio correspondiente 00:05:41
entonces nosotros estamos colocando elementos donde consideremos 00:05:47
cuando queremos volver al principio pues volvemos 00:05:52
pero no estamos modificando la posición 00:05:54
voy a volver 00:05:58
y después hay una propiedad que es z-índex 00:05:59
que dice la profundidad de una capa, de cualquier elemento 00:06:03
entonces los elementos que no tienen esta propiedad 00:06:08
pues tienen un z-índex igual a cero 00:06:10
y los elementos con mayor z-índex se colocan sobre los elementos con menor z-índex 00:06:12
así llegamos a situaciones de este tipo 00:06:17
donde podemos ver esta información 00:06:19
esto junto a la opacidad nos permite poner páginas bastante interesantes 00:06:22
Aquí hay un montón de ejemplos de ellas 00:06:28
Otro elemento interesante son las cajas flexibles 00:06:32
Las cajas flexibles nos permiten también ir colocando la información acorde a una serie de elementos 00:06:41
Tienen muchísimas propiedades y es mejor que las vean tranquilamente todas ellas 00:06:48
Para ver cómo pueden conseguir 00:06:57
Pues desde colocar las cosas en orden inverso 00:06:59
Etcétera, etcétera 00:07:02
O colocar la información en función del contenido que tienen 00:07:03
O irlas cortando 00:07:06
Etcétera, etcétera 00:07:07
Es una información francamente interesante 00:07:09
Ya prácticamente estamos acabando 00:07:12
Todo el tema 00:07:14
De CSS 00:07:15
Así que ya tenemos todos los elementos 00:07:16
Para poder trabajar con ellos 00:07:20
Idioma/s:
es
Autor/es:
Amadeo Mora
Subido por:
Amadeo M.
Licencia:
Dominio público
Visualizaciones:
104
Fecha:
29 de diciembre de 2020 - 10:05
Visibilidad:
Público
Centro:
IES CLARA DEL REY
Duración:
07′ 24″
Relación de aspecto:
1.78:1
Resolución:
1364x768 píxeles
Tamaño:
63.76 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid