-
Estoy diseñando una página web para "Hopper", uno de nuestros avatares de Khan Academy.
-
Tenemos una imagen, algunos enlaces interesantes y un párrafo.
-
Creo que esta imagen de "Hooper" se vería mejor si estuviera junto al párrafo.
-
Así que la voy a cortar
-
y pegar aquí abajo.
-
Ok. No se ve tan bien como pensé.
-
El texto empieza en la parte de abajo de la imagen.
-
Yo esperaba que el texto estuviera rodeando la imagen,
-
como en los periódicos y las revistas.
-
Necesitamos una nueva propiedad de CSS para esto: "float".
-
De esta manera los elementos son flotantes y son rodeados por otros elementos,
-
y es perfecto para que el texto se acomode al rededor de las imágenes.
-
Así que vamos arriba a la regla de la imagen y escribimos: "float: ",
-
y luego para el valor, debemos decidir si queremos que la imagen quede flotante
-
del lado izquierdo o derecho.
-
Probemos con "left".
-
Genial. Perfecto.
-
Bueno, ok, casi pefecto,
-
porque el texto está muy cerca de la imagen.
-
¿Recuerdan cuál propiedad debemos usar
-
para separar el texto de la imagen?
-
Es parte del Modelo de caja, que recién aprendimos.
-
Margin.
-
Vamos a añadir: "margin: right" y "margin: bottom" a esta imagen
-
para darle un poco de espacio.
-
Ok, eso está mucho mejor.
-
También podemos hacer que elementos que no son imágenes sean flotantes.
-
Por ejemplo una barra lateral.
-
¿Qué tal si probamos con esta lista de enlaces?
-
Podemos tomar esta lista de enlaces y hacerla flotante a la derecha.
-
Así que vamos a añadir una regla para "#hopper-links",
-
y hacerla flotante a la derecha.
-
Ok, ya es flotante pero está ocupando mucho espacio
-
más del que esperaba.
-
Vamos a restringir la anchura a 30 por ciento,
-
así siempre tomará el 30 por ciento del espacio de la página,
-
y el resto de la página llenará el 70 porciento.
-
Generalmente, cuando hacemos que un "" sea flotante le debemos dar una anchura.
-
Porque de otra manera los "´s" tratarán de ocupar todo el espacio,
-
y no queda nada que se acomode al rededor de ellos.
-
También parece que necesita un poco de margen a la izquierda, "margin: left".
-
Ah, ok.
-
Ahora, fíjate en el pie de página abajo en la información de contacto de "Hooper".
-
Quedó un poco raro, está encimado en la barra lateral.
-
Y es porque está "envolviendo" la barra lateral.
-
No queremos que nuestro pie de página se acomode alrededor,
-
lo que queremos es que siempre está hasta abajo de todo,
-
porque es un pie de página.
-
Para hacer que no se acomode alrededor, podemos usar la propiedad "clear".
-
Y escribir: "clear: both".
-
¡Ah!
-
Podríamos usar "clear: left" o "clear: right"
-
si lo único que queremos es que no se acomode alrededor de
-
elementos flotantes que están a la derecha o a la izquierda.
-
Pero generalmente no queremos que se acomode alrededor de ningún elemento flotante,
-
así que escribimos "clear: both".
-
Esto empieza a lucir como una página web real.
-
Tenemos un área principal, un barra lateral, un pie de página.
-
De hecho, ahora ya conoces las propiedades de CSS que se usan en la mayoría de los diseños de páginas web.
-
Poniendo algunos "´s" con "width", "height", "margin", "padding", "float" y "clear" juntos,
-
hay todo tipo de diseños de páginas web a tu alcance.
