viernes, 10 de junio de 2011

Vagabundia

Vagabundia


Alinear los distintos botones del footer

Posted: 09 Jun 2011 08:00 PM PDT

k_nelita pregunta cómo poner los distintos botones que ofrecen Facebook, Twiiter y otros servicios, debajo de las entradas, que se vean en una línea y que no se descompagine todo. Muchas veces me preguntan lo mismo y lo cierto es que no hay una solución universal porque todo depende de qué tipo de cosas se agregan, de cuales son sus tamaños y propiedades, etc, etc.

Algunos, sólo son enlaces, otros, iframes, otros scripts, otros, códigos especiales como los de Facebook o Google. Hay tantas posibilidades como sitios y servicios existen y por lo tanto, cada caso es diferente pero la base es siempre la misma, debemos saber qué ponemos y qué hace eso que ponemos ¿es un bloque y por lo tanto se generará un salto de línea?, ¿flota?, ¿tiene bordes? Demasiadas preguntas.

Normalmente, basta con usar propiedades como float y margin para acomodarlos pero, eso no siempre resulta y entonces, debemos volver a las fuentes y usar una simple tabla para evitar dolores de cabeza (Ver Malditas Tablas: 1, 2, 3, 4, 5).

Una tabla es como una hoja cuadriculada donde hay filas y columnas. En este caso, sólo requerimos una fila y una cantidad indeterminada de columnas; básicamente, esto es una tabla con tres columnas:
<table>   <tr>     <td> la celda de la izquierda </td>     <td> la celda del centro </td>     <td> la celda de la derecha </td>   </tr> </table>
¿Qué hace que usar estas etiquetas facilite las cosas? Que están pensadas para "acomodar" contenidos diversos y adaptarse a ellos.

En este ejemplo, voy a poner cinco contenidos diferentes:

el botón de Twitter que es un enlace y un script
<a class="twitter-share-button" data-count="horizontal" data-lang="es" data-via="Vagabundia" data-url="http://vagabundia.blogspot.com/" data-text="Vagabundia en Blogger" href="http://twitter.com/share" target="_blank">Tweet</a> <script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
el botón Me Gusta de Facebook con un iframe al que dimensionaré para que no sea tan ancho y tan alto:
<iframe src='http://www.facebook.com/plugins/like.php?href=http://vagabundia.blogspot.com/&layout=button_count&show_faces=false&width=450&height=60&action=likefont=tahoma&colorscheme=light&' allowTransparency='true' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:110px; height:25px'></iframe>
un enlace común a las etiquetas del blog y un par de imágenes cualesquiera.

Ahora, armaré la tabla:
<table class="tablapostfooter" cellspacing="0" cellpadding="0">   <tr>     <td>       ....... el código de Twitter .......     </td>     <td style="padding-top: 17px;">       ....... el código de Facebook .......     </td>     <td>       ....... una imagen .......     </td>     <td>       ....... enlaces a etiquetas .......     </td>     <td>       ....... otra imagen .......     </td>   </tr> </table>
Y le agregaré propiedades elementales:
<style>   .tablapostfooter {margin: 0 auto; border:none; width: 100%;}   .tablapostfooter td {text-align: center; vertical-align: top;} </style>

Lo que dará por resultado esto:

,

Por defecto, la tabla tendrá la altura de la celda más alta y los contenidos quedarán alineado verticalmente en su parte superior (vertical-align:top); luego, corregimos esos detalles usando padding-top si quermos "moverlos" individualmente una cantidad de pixeles que dependerán del contenido o bien usamos vertical-align:middle para centrarlos.

Obviamente, no es la única solución porque jamás hay una sola solución pero es simple y no requiere andar peleando con propiedades CSS que tal vez, no comprendemos.

Las tablas son odiadas por algunos pero, son como las lentejas: si quieres las usas y si no, las dejas.

No hay comentarios:

Publicar un comentario

Correo Vaishnava

Archivo del blog