CSS: los floats

Entender como funcionan los float es complicado y se hace más dificil al momento de hacer que el sitio se vea en los navegadores. Por ejemplo, firefox es muy sensible con los floats.

Cuando existen varios elementos dentro de un div se suelen comportar de manera extraña.

En la imagen se puede ver como se comporta un float cuando esta dentro de un contenedor.
css floatEl float se ve ignorado por el contenedor y se ve colgado del borde superior. La W3C recomienda usar clear al final de la caja contenedora.
Por ejemplo, si se usa { clear: both} se extenderá el margen inferior hasta que se despeje (clear) al final del float

CSS para bordes redondeados

Un cliente solicita realizar menus de opciones con bordes redondeados.
En un principio se planteo la posibilidad de hacerlo con imagenes pero se probo una solución utilizando CSS.

Una solución publicada en Curved corner (border-radius) cross browser en un archivo llamado border-radius.htc

  1. .curved {
  2.     -moz-border-radius: 10px;
  3.     -webkit-border-radius: 10px;
  4.     behavior:url(border-radius.htc);
  5. }

Lo hemos probado en formularios y funciona correctamente.
Estamos haciendo prueba para ver como funciona con DIV´s

Separar imagen del texto que la rodea

Cuando es necesario insertar una imagen que va a estar rodeada de texto, tanto a izquierda, como a derecha o arriba y abajo, podemos utilizar la siguiente solución con CSS:

img src="imagen.jpg" style="float:left; margin-right:5px"

No es necesario utilizar "align" y podemos hacerlo usando margin-left, margin-bottom o margin-top.

Border-radius: crear bordes redondeados con CSS




La propiedad border-radius permite a los desarrolladores web diseñar bordes redondeados con CSS3 en sus diseños.

El ejemplo que se ve en la imagen se hizo con el siguiente código:

#ejemplo1 {
-moz-border-radius: 15px;
border-radius: 15px;
}

Los bordes redondeados tambien se pueden crear en forma independiente utilizando:

Sintaxis:

border-*-*-radius: [ | <%> ] [ | <%> ]?