Esas botoneras: centrándolas

11/mar/2008 8

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. Daniel G. Blázquez [#]

    No entiendo cual es la complicación para centrar los botones. Algo tan sencillo como:

    <p style="text-align:center">BOTON</p>

    Y ya está :-/

  2. Jorge Epuñan [#]

    Como dices bien Daniel, es bastante sencillo pero mucha gente se complica posicionandolas, siendo q la solucion es mucho mas simple como centrandolas con text-align.

  3. Victor San Martin [#]

    vieras como se complica la gente con cosas sencillas, en fin, tips como estos nunca están de mas, de hecho son necesarios.

    Saludos

  4. jose roberto ( vevni ) [#]

    Jorge veo que te gusta mucho jugar con moootols, llevo varias semanas probando los diferentes frameworks, y pues lo que realmente me molesta es que no haya documentacion suficiente, mootools se ve muy buen framework pero carece de mucha documentacion, me gusto mucho la funcion de ajax de update, pero tuve que buscar en diferentes blogs informacion completa sobre esa funcion, y me enoja que no venga explicada la API.
    la que me gusta como esta explicada y aun asi le falta un pokitin de ejemplos es la de prototype, aunque mootools se basa en prototype uno podria decir que puedes tomar informacion de ahi y usarla con mootools, si pero solo en algunas cosas hereda de prototype.
    entonces al final me decidi por jquery…. basicamente es lo mismo en casi todos, solo cambia la forma en que se llaman algunas funciones y su forma de trabajar, me gusto mucho trabajar con prototype, por ejemplo para detener el evento submit de un formulario, en prototype y en mootools se pasa el objeto del evento y se detiene mediante una funcion, en jquery simplemente se hace return false, jajaajaja, cosa muy rara que me hizo perder algo de tiempo, jejejee, claro tampoco puse antencion a su descripcion.
    me gustaria que cada que pongas algun efecto o una descripcion de cosas que se pueden hacer en mootools, yo saque la contraparte pero en jquery, que te parece?

    por ejemplo la forma de llamar ajax para hacer cierta cosa en mootools y su contraparte en jquery!

  5. Jorge Epuñan [#]

    Vevni, tengo q discordar un poco de tu opinión. Veo q mootools tiene mucho q ver con jquery, más que con prototype. Las sintaxis son muy similares y los cambios sutiles. En cuanto a la documentación, creo q es bastante completa pero carece de ejemplos prácticos, de ahí viene mi interés en desarrollar y mostrar algunos de ellos, lo que me parecen más útiles a los usuarios. La documentación de jquery es muy buena y tienen muchos sitios de muestras. lo uso mucho en el trabajo y lo encuentro muy práctico, considerando q es muy liviando en su versión comprimida (28kb).

    Considero excelente tu disposición de mostrar más jquery, y tienes las puertas abiertas de este sitio para hacerlo. No he hecho mucho más (tengo un plugin por ahí pululando) por fallta de tiempo, pero me gusta mucho jugar con ambos frameworks. Prototype nunca me acostumbré y lo encuentro demasiado pesado.

    Saludos.

  6. jose roberto ( vevni ) [#]

    pero fijate que es interesante jugar con los frameworks, no no quise decir que no se parecieran, lo que comentaba es que estriban algunas cosillas, pero es interesante porque cada framework hace las cosas a su modo y resulta interesante jugar con eso,en un sitio web uso mootools y jquery y me sorprende lo que se hace con ambos. y ahora donde andas? estas en chile o andas en el extranjero?

  7. Jorge Epuñan [#]

    Vevni, estuve fura por solo 1 semana asi q ya estoy de vuelta en Stgo, my ocupado con un proyecto personal por lo q no he tenido mucho tiempo para escribir articulos ma extensos e interesantes. salu2.

  8. Centrando texto verticalmente ↝ CSSLab [#]

    […] el texto mismo es el que debe tener la propiedad de alineado vertical pero la idea, al igual que el artículo anterior de centrado horizontal, es que el contenedor permita hacerlo, así cualquier elemento que esté dentro pueda […]

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab