Morton 19 de septiembre de 2012 a las 06.20
   Imprimir artículo
elWebmaster.com

CSS3: C贸mo ajustar correctamente el ancho de un cuadro de texto


css3wide1No hay dudas que el CSS nos permite realizar cosas so帽adas en nuestro sitio web, pero en algunos detalles puede resultar todo un problema. Por ejemplo, trabajar con anchos de cuadros de texto,聽 puede ser problem谩tico.

A simple vista, uno pensar铆a que con tan s贸lo incorporar “width:100%” a sus p谩ginas, el problema se ha solucionado. Pero no es as铆, ya que debemos asegurarnos que el cambio persista a pesar de los cambios en su elemento padre. Es por eso que el c贸digo CSS correcto es el siguiente:

  1. textarea {
  2.     -webkit-box-sizing: border-box;
  3.     -moz-box-sizing: border-box;
  4.     box-sizing: border-box;
  5.  
  6.     width: 100%;
  7. }

Al configurar el valor box-sizing a border-box permite al 谩rea de texto respetar el tama帽o del elemento contenedor padre, el padding y sus bordes, recalculando lo que 100% realmente significa.

Haz clic aqu铆 para ver una demostraci贸n >>

Fuente original del art铆culo: David Walsh Blog
Traducci贸n realizada por
elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (1)

  1. jose dice:

    Los porcentajes en una web, siempre dan problemas… Es mejor fijar un cuadro de Xpixeles y luego hacer que se expanda hacia abajo. Para ello podemos usar “overflow:hidden;”
    Un saludo :$

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder