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.