WEBVTT

00:00:00.143 --> 00:00:04.498
Estoy diseñando una página web para "Hopper", uno de nuestros avatares de Khan Academy.

00:00:04.715 --> 00:00:09.518
Tenemos una imagen, algunos enlaces interesantes y un párrafo.

00:00:10.365 --> 00:00:15.516
Creo que esta imagen de "Hooper" se vería mejor si estuviera junto al párrafo.

00:00:15.516 --> 00:00:17.766
Así que la voy a cortar

00:00:17.766 --> 00:00:19.991
y pegar aquí abajo.

00:00:20.295 --> 00:00:23.561
Ok. No se ve tan bien como pensé.

00:00:23.795 --> 00:00:25.873
El texto empieza en la parte de abajo de la imagen.

00:00:26.038 --> 00:00:28.810
Yo esperaba que el texto estuviera rodeando la imagen,

00:00:28.810 --> 00:00:30.653
como en los periódicos y las revistas.

00:00:31.108 --> 00:00:34.130
Necesitamos una nueva propiedad de CSS para esto: "float".

00:00:34.130 --> 00:00:37.250
De esta manera los elementos son flotantes y son rodeados por otros elementos,

00:00:37.250 --> 00:00:39.955
y es perfecto para que el texto se acomode al rededor de las imágenes.

00:00:39.989 --> 00:00:43.957
Así que vamos arriba a la regla de la imagen y escribimos: "float: ",

00:00:44.297 --> 00:00:48.083
y luego para el valor, debemos decidir si queremos que la imagen quede flotante

00:00:48.083 --> 00:00:50.692
del lado izquierdo o derecho.

00:00:50.692 --> 00:00:52.799
Probemos con "left".

00:00:52.799 --> 00:00:54.757
Genial. Perfecto.

00:00:54.757 --> 00:00:57.352
Bueno, ok, casi pefecto,

00:00:57.352 --> 00:01:00.207
porque el texto está muy cerca de la imagen.

00:01:00.317 --> 00:01:02.431
¿Recuerdan cuál propiedad debemos usar

00:01:02.431 --> 00:01:04.753
para separar el texto de la imagen?

00:01:04.763 --> 00:01:07.216
Es parte del Modelo de caja, que recién aprendimos.

00:01:07.419 --> 00:01:08.607
Margin.

00:01:08.901 --> 00:01:13.665
Vamos a añadir: "margin: right" y "margin: bottom" a esta imagen

00:01:13.665 --> 00:01:16.744
para darle un poco de espacio.

00:01:20.336 --> 00:01:23.198
Ok, eso está mucho mejor.

00:01:23.198 --> 00:01:26.633
También podemos hacer que elementos que no son imágenes sean flotantes.

00:01:26.633 --> 00:01:29.102
Por ejemplo una barra lateral.

00:01:29.102 --> 00:01:31.454
¿Qué tal si probamos con esta lista de enlaces?

00:01:31.454 --> 00:01:35.130
Podemos tomar esta lista de enlaces y hacerla flotante a la derecha.

00:01:35.130 --> 00:01:38.098
Así que vamos a añadir una regla para "#hopper-links",

00:01:38.098 --> 00:01:41.071
y hacerla flotante a la derecha.

00:01:41.290 --> 00:01:44.370
Ok, ya es flotante pero está ocupando mucho espacio

00:01:44.370 --> 00:01:46.439
más del que esperaba.

00:01:46.728 --> 00:01:50.515
Vamos a restringir la anchura a 30 por ciento,

00:01:50.515 --> 00:01:55.076
así siempre tomará el 30 por ciento del espacio de la página,

00:01:55.076 --> 00:01:59.247
y el resto de la página llenará el 70 porciento.

00:01:59.247 --> 00:02:01.934
Generalmente, cuando hacemos que un "" sea flotante le debemos dar una anchura.

00:02:02.115 --> 00:02:04.983
Porque de otra manera los "´s" tratarán de ocupar todo el espacio,

00:02:04.983 --> 00:02:06.668
y no queda nada que se acomode al rededor de ellos.

00:02:07.113 --> 00:02:10.966
También parece que necesita un poco de margen a la izquierda, "margin: left".

00:02:11.413 --> 00:02:12.853
Ah, ok.

00:02:13.402 --> 00:02:18.146
Ahora, fíjate en el pie de página abajo en la información de contacto de "Hooper".

00:02:18.544 --> 00:02:21.670
Quedó un poco raro, está encimado en la barra lateral.

00:02:22.118 --> 00:02:23.693
Y es porque está "envolviendo" la barra lateral.

00:02:24.080 --> 00:02:26.031
No queremos que nuestro pie de página se acomode alrededor,

00:02:26.031 --> 00:02:28.203
lo que queremos es que siempre está hasta abajo de todo,

00:02:28.203 --> 00:02:30.012
porque es un pie de página.

00:02:30.012 --> 00:02:33.369
Para hacer que no se acomode alrededor, podemos usar la propiedad "clear".

00:02:33.369 --> 00:02:37.056
Y escribir: "clear: both".

00:02:37.056 --> 00:02:38.165
¡Ah!

00:02:38.165 --> 00:02:40.576
Podríamos usar "clear: left" o "clear: right"

00:02:40.576 --> 00:02:42.276
si lo único que queremos es que no se acomode alrededor de

00:02:42.276 --> 00:02:44.522
elementos flotantes que están a la derecha o a la izquierda.

00:02:44.522 --> 00:02:47.660
Pero generalmente no queremos que se acomode alrededor de ningún elemento flotante,

00:02:47.660 --> 00:02:49.054
así que escribimos "clear: both".

00:02:49.322 --> 00:02:52.127
Esto empieza a lucir como una página web real.

00:02:52.322 --> 00:02:54.819
Tenemos un área principal, un barra lateral, un pie de página.

00:02:55.034 --> 00:03:00.021
De hecho, ahora ya conoces las propiedades de CSS que se usan en la mayoría de los diseños de páginas web.

00:03:00.283 --> 00:03:04.741
Poniendo algunos "´s" con "width", "height", "margin", "padding", "float" y "clear" juntos,

00:03:04.741 --> 00:03:08.721
hay todo tipo de diseños de páginas web a tu alcance.