Diseño Web: CSS y los floats

Español

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

La mayoría de estructuras de los proyectos web complejos están diseñados con el posicionamiento flotante (float)

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 float

El float se ve ignorado por el contenedor y se ve colgado del borde superior. La W3C recomienda usar la propiedad 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

La propiedad clear permite modificar el comportamiento por defecto del posicionamiento flotante para forzar a un elemento a mostrarse debajo de cualquier caja flotante. La regla CSS que se aplica al segundo párrafo del ejemplo anterior es la siguiente:

  

...

Taxonomy upgrade extras: 

CSS para bordes redondeados

Español

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

Taxonomy upgrade extras: 

Separar imagen del texto que la rodea

Español

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

Español

La propiedad border-radius permite a los desarrolladores web diseñar bordes redondeados con CSS3 en sus diseños sin necesidad de utilizar imagenes o utilizar multiples div's.

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


Archivo style.css

#ejemplo1 {
height: 65px;
width:160px;
background-color:#EEEEEE;
-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;
}

#ejemplo2 {
height: 65px;
width:160px;
background-color:#FF0000;
-moz-border-radius-bottomright: 25px 50px;
border-bottom-right-radius: 25px 50px;
}

#ejemplo3 {
height: 5em;
width: 12em;
background-color:#0000FF;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
}

#ejemplo4 {
height: 65px;
width:160px;
background-color:#F2F2F2;
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
}

Sintaxis:

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

Taxonomy upgrade extras: