[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.14,0:00:04.50,Default,,0000,0000,0000,,Estoy diseñando una página web para "Hopper", uno de nuestros avatares de Khan Academy.
Dialogue: 0,0:00:04.72,0:00:09.52,Default,,0000,0000,0000,,Tenemos una imagen, algunos enlaces interesantes y un párrafo.
Dialogue: 0,0:00:10.36,0:00:15.52,Default,,0000,0000,0000,,Creo que esta imagen de "Hooper" se vería mejor si estuviera junto al párrafo.
Dialogue: 0,0:00:15.52,0:00:17.77,Default,,0000,0000,0000,,Así que la voy a cortar
Dialogue: 0,0:00:17.77,0:00:19.99,Default,,0000,0000,0000,,y pegar aquí abajo.
Dialogue: 0,0:00:20.30,0:00:23.56,Default,,0000,0000,0000,,Ok. No se ve tan bien como pensé.
Dialogue: 0,0:00:23.80,0:00:25.87,Default,,0000,0000,0000,,El texto empieza en la parte de abajo de la imagen.
Dialogue: 0,0:00:26.04,0:00:28.81,Default,,0000,0000,0000,,Yo esperaba que el texto estuviera rodeando la imagen,
Dialogue: 0,0:00:28.81,0:00:30.65,Default,,0000,0000,0000,,como en los periódicos y las revistas.
Dialogue: 0,0:00:31.11,0:00:34.13,Default,,0000,0000,0000,,Necesitamos una nueva propiedad de CSS para esto: "float".
Dialogue: 0,0:00:34.13,0:00:37.25,Default,,0000,0000,0000,,De esta manera los elementos son flotantes y son rodeados por otros elementos,
Dialogue: 0,0:00:37.25,0:00:39.96,Default,,0000,0000,0000,,y es perfecto para que el texto se acomode al rededor de las imágenes.
Dialogue: 0,0:00:39.99,0:00:43.96,Default,,0000,0000,0000,,Así que vamos arriba a la regla de la imagen y escribimos: "float: ",
Dialogue: 0,0:00:44.30,0:00:48.08,Default,,0000,0000,0000,,y luego para el valor, debemos decidir si queremos que la imagen quede flotante
Dialogue: 0,0:00:48.08,0:00:50.69,Default,,0000,0000,0000,,del lado izquierdo o derecho.
Dialogue: 0,0:00:50.69,0:00:52.80,Default,,0000,0000,0000,,Probemos con "left".
Dialogue: 0,0:00:52.80,0:00:54.76,Default,,0000,0000,0000,,Genial. Perfecto.
Dialogue: 0,0:00:54.76,0:00:57.35,Default,,0000,0000,0000,,Bueno, ok, casi pefecto,
Dialogue: 0,0:00:57.35,0:01:00.21,Default,,0000,0000,0000,,porque el texto está muy cerca de la imagen.
Dialogue: 0,0:01:00.32,0:01:02.43,Default,,0000,0000,0000,,¿Recuerdan cuál propiedad debemos usar
Dialogue: 0,0:01:02.43,0:01:04.75,Default,,0000,0000,0000,,para separar el texto de la imagen?
Dialogue: 0,0:01:04.76,0:01:07.22,Default,,0000,0000,0000,,Es parte del Modelo de caja, que recién aprendimos.
Dialogue: 0,0:01:07.42,0:01:08.61,Default,,0000,0000,0000,,Margin.
Dialogue: 0,0:01:08.90,0:01:13.66,Default,,0000,0000,0000,,Vamos a añadir: "margin: right" y "margin: bottom" a esta imagen
Dialogue: 0,0:01:13.66,0:01:16.74,Default,,0000,0000,0000,,para darle un poco de espacio.
Dialogue: 0,0:01:20.34,0:01:23.20,Default,,0000,0000,0000,,Ok, eso está mucho mejor.
Dialogue: 0,0:01:23.20,0:01:26.63,Default,,0000,0000,0000,,También podemos hacer que elementos que no son imágenes sean flotantes.
Dialogue: 0,0:01:26.63,0:01:29.10,Default,,0000,0000,0000,,Por ejemplo una barra lateral.
Dialogue: 0,0:01:29.10,0:01:31.45,Default,,0000,0000,0000,,¿Qué tal si probamos con esta lista de enlaces?
Dialogue: 0,0:01:31.45,0:01:35.13,Default,,0000,0000,0000,,Podemos tomar esta lista de enlaces y hacerla flotante a la derecha.
Dialogue: 0,0:01:35.13,0:01:38.10,Default,,0000,0000,0000,,Así que vamos a añadir una regla para "#hopper-links",
Dialogue: 0,0:01:38.10,0:01:41.07,Default,,0000,0000,0000,,y hacerla flotante a la derecha.
Dialogue: 0,0:01:41.29,0:01:44.37,Default,,0000,0000,0000,,Ok, ya es flotante pero está ocupando mucho espacio
Dialogue: 0,0:01:44.37,0:01:46.44,Default,,0000,0000,0000,,más del que esperaba.
Dialogue: 0,0:01:46.73,0:01:50.52,Default,,0000,0000,0000,,Vamos a restringir la anchura a 30 por ciento,
Dialogue: 0,0:01:50.52,0:01:55.08,Default,,0000,0000,0000,,así siempre tomará el 30 por ciento del espacio de la página,
Dialogue: 0,0:01:55.08,0:01:59.25,Default,,0000,0000,0000,,y el resto de la página llenará el 70 porciento.
Dialogue: 0,0:01:59.25,0:02:01.93,Default,,0000,0000,0000,,Generalmente, cuando hacemos que un "" sea flotante le debemos dar una anchura.
Dialogue: 0,0:02:02.12,0:02:04.98,Default,,0000,0000,0000,,Porque de otra manera los "´s" tratarán de ocupar todo el espacio,
Dialogue: 0,0:02:04.98,0:02:06.67,Default,,0000,0000,0000,,y no queda nada que se acomode al rededor de ellos.
Dialogue: 0,0:02:07.11,0:02:10.97,Default,,0000,0000,0000,,También parece que necesita un poco de margen a la izquierda, "margin: left".
Dialogue: 0,0:02:11.41,0:02:12.85,Default,,0000,0000,0000,,Ah, ok.
Dialogue: 0,0:02:13.40,0:02:18.15,Default,,0000,0000,0000,,Ahora, fíjate en el pie de página abajo en la información de contacto de "Hooper".
Dialogue: 0,0:02:18.54,0:02:21.67,Default,,0000,0000,0000,,Quedó un poco raro, está encimado en la barra lateral.
Dialogue: 0,0:02:22.12,0:02:23.69,Default,,0000,0000,0000,,Y es porque está "envolviendo" la barra lateral.
Dialogue: 0,0:02:24.08,0:02:26.03,Default,,0000,0000,0000,,No queremos que nuestro pie de página se acomode alrededor,
Dialogue: 0,0:02:26.03,0:02:28.20,Default,,0000,0000,0000,,lo que queremos es que siempre está hasta abajo de todo,
Dialogue: 0,0:02:28.20,0:02:30.01,Default,,0000,0000,0000,,porque es un pie de página.
Dialogue: 0,0:02:30.01,0:02:33.37,Default,,0000,0000,0000,,Para hacer que no se acomode alrededor, podemos usar la propiedad "clear".
Dialogue: 0,0:02:33.37,0:02:37.06,Default,,0000,0000,0000,,Y escribir: "clear: both".
Dialogue: 0,0:02:37.06,0:02:38.16,Default,,0000,0000,0000,,¡Ah!
Dialogue: 0,0:02:38.16,0:02:40.58,Default,,0000,0000,0000,,Podríamos usar "clear: left" o "clear: right"
Dialogue: 0,0:02:40.58,0:02:42.28,Default,,0000,0000,0000,,si lo único que queremos es que no se acomode alrededor de
Dialogue: 0,0:02:42.28,0:02:44.52,Default,,0000,0000,0000,,elementos flotantes que están a la derecha o a la izquierda.
Dialogue: 0,0:02:44.52,0:02:47.66,Default,,0000,0000,0000,,Pero generalmente no queremos que se acomode alrededor de ningún elemento flotante,
Dialogue: 0,0:02:47.66,0:02:49.05,Default,,0000,0000,0000,,así que escribimos "clear: both".
Dialogue: 0,0:02:49.32,0:02:52.13,Default,,0000,0000,0000,,Esto empieza a lucir como una página web real.
Dialogue: 0,0:02:52.32,0:02:54.82,Default,,0000,0000,0000,,Tenemos un área principal, un barra lateral, un pie de página.
Dialogue: 0,0:02:55.03,0:03:00.02,Default,,0000,0000,0000,,De hecho, ahora ya conoces las propiedades de CSS que se usan en la mayoría de los diseños de páginas web.
Dialogue: 0,0:03:00.28,0:03:04.74,Default,,0000,0000,0000,,Poniendo algunos "´s" con "width", "height", "margin", "padding", "float" y "clear" juntos,
Dialogue: 0,0:03:04.74,0:03:08.72,Default,,0000,0000,0000,,hay todo tipo de diseños de páginas web a tu alcance.