Esas botoneras: centrándolas

11/Mar/2008 158

Uno de los temas más complicados a la hora de estructurar y diagramar un sitio, es cuando existen formularios. Creo que es el más difícil, ya que a pesar de tener un buen CSS reseter a mano que te ayude a setear esas propiedades en todos los browsers, aún así hay elementos que no obedecen como querríamos que lo hicieran. Algunos trucos se deben usar, y finalmente no queda totalmente exacto en todas las plataformas y navegadores. Imagínate esos formularios gigantescos, donde sobran campos y la usabilidad es nula… un lío.

Lo que se va a ver aquí, será específicamente cómo abordar la estructuración de una botonera de formularios (o de cualquier otro en realidad), y cómo lograr que se estén siempre centradas a pesar de cuántos botones tengan. El ejemplo gráfico a continuación:

Ejemplo Botonera Centrado en CSSLab

He visto muchas soluciones a esto, la mayoría de ellas complicadas (mi slogan siempre es facilitar la vida en su máxima expresión). Por ejemplo, se hacen class’es para cada botón (.boton_aceptar_1, .boton_aceptar_2 etc etc etc) y se posicionan absolutamente. También se hacen class’es a cada botón y se marginan, incluso negativamente (lo que IE6 no ve con buenos ojos). Imagínense si son varias páginas de formularios y los botones se repiten (por ejemplo, el ‘Aceptar’ o el ‘Enviar’ son los más comunes) pero no siempre van de a 2, sino que a veces van solos o de a 3, 4…. enfin. Hacer class’es para cada situación no es la mejor solución, ya que llenaremos la hoja de estilos de propiedades de posicionamiento en vez de aplicar una solución global, independiente de la cantidad de botones que estén involucrados. Bueno, esa es la idea de este artículo.

SafariFirefoxInternet Explorer 7Internet Explorer 6Opera

Es frecuente que los temas que escribo para CSSLab se den mientras estoy en algún proyecto, y me topo con dificultades que logro solucionar, y luego las muestro y explico aquí cómo se resolvió finalmente. Este es otro de esos casos, sólo que este tema lo había resuelto hacía mucho pero se dió nuevamente a manos de otro profesional web con quien trabajo. Lo ayudé con esto y finalmente me tomo el tiempo de explicarlo aquí para todos quienes tengan la misma situación.

Vamos a lo que nos reúne. Construído el lindo formulario, con <fieldset>, <legend>, varios <label>, <input /> y <textarea> quizás, llega la hora de poner los botones de Enviar y No Enviar como en el ejemplo gráfico anterior. Mi método implica utilizar listas, ya que me gustan para contener botones como menúes (aunque puede ser un <div> si quienes, incluso un <p>. Cada uno con su gusto). El HTML de la botonera:

<ul id="botonera">
     <li><input type="submit" value="Enviar" /><input type="reset" value="No Enviar" /></li>
</ul>

Como habrán notado, en vez de poner cada botón dentro de un <li></li> y flotarlos a la izquierda (como usualmente se usa para los menúes horizontales), puse todos los botones dentro de un mismo <li>, caso contrario no podrían ser centrados. Entonces, si es sólo un botón, o todos los que sean necesarios, deberán ir consecutivamente uno al lado del otro dentro de un único <li></li>.

Ahora, el CSS que hará la magia:

#botonera {
     width: 400px;
     margin: 20px auto;
}
     #botonera li {
          list-style: none;
          text-align: center;
     }
     #botonera input {
          margin-left: 10px;
     }

Bastante simple. Si se han fijado, lo que hace que se centren los elementos dentro del <li> es el text-align: center; ya que como <input /> es una etiqueta lineal, se alineará tal como lo haría un texto cualquiera. Ese es todo el truco. Lo otro es darle al <input /> un margin-left de unos 10px para que se separen un poco si son 2 o más botones (he visto usar &nbsp; para ello… no es correcto). Saco 3 conclusiones de esta solución:

  1. No se usa float alguno, lo que no hace el contenedor colapsar así que nos ahorramos un clearfix. Además que no puedes centrar un float.
  2. Se puede usar para cualquier botón, no sólo <input />: <a> y <button> también son soportados. Así que puedes también hacer un menú horizontal centrado con esta misma técnica.
  3. Es soportado por todos los browsers.

Ver Ejemplo

Comentarios

  1. $5 printable zyrtec coupon [#]

    5 mg zyrtec children – https://allergyd.com

  2. where to buy ivermectin tablets for humans [#]

    I’m not sure why but this website is loading incredibly slow for me.

    Is anyone else having this problem or is it a problem on my end?
    I’ll check back later and see if the problem still exists. http://harmonyhomesltd.com/Ivermectinum-during-pregnancy.html

  3. pharmaceptica.com [#]

    can you buy sildenafil without a preion https://pharmaceptica.com/

  4. stromectolforte.com [#]

    ivermectin https://stromectolforte.com/ stromectol 12 mg stromectol tablets

  5. web md vidalista [#]

    how do i know if i have an std http://vidalistahim.com – vidalista side effects

  6. provigiluses [#]

    what is provigil provigil for depression

  7. modalertonline [#]

    provigil reviews sunosi vs modafinil

  8. bactrim dosage [#]

    bactrim side effects inhibitor

CSSLab