Colocar horizontalmente botones twitter, facebook…

ennegrosobreblanco · Miembro · junio 8, 2010 at 10:46 am
Copiar enlace

Añadir tema a favoritos
Hola. Estoy ultimando el diseño de mi blog. Como véis, tengo tres botones: twitter, facebook y youtube.
Aparecen organizados verticalmente, pero yo quiero colocarlos de manera horizontal (uno al lado del otro), ya que verticalmen queda demasiado espacio en blanco a la derecha de los botones.
ME gustaría que me dijeran cómo puedo hacerlo, porque no doy con la manera.

Muchas gracias, un saludo

http://ennegrosobreblanco.wordpress.com/

El blog con el que necesito ayuda es (visible solo para usuarios conectados).
galois · Moderador · junio 8, 2010 at 1:35 pm
Copiar enlace
El problema es que has puesto unas etiquetas que hacen que los botones se vean en forma vertical. La etiqueta en cuestión,
 
genera un salto de línea, con lo que la imagen siguiente pasa a la línea de abajo y la imagen subsiguiente pasa a otra línea inferior.
Para entendernos, copio y pego aquí el código que has puesto en un widget de texto:
<a href="http://twitter.com/RobertoHerreroT" TARGET="_blank"><img src="http://www.buttonshut.com/Twitter-Buttons/Twitter-Buttons-46-94-.png" title="Facebook Buttons By ButtonsHut.com" alt="Facebook Buttons By ButtonsHut.com" width="50px" border="0" /></a> <a href="http://www.trailershut.com/movies-2010.html"></a><a href="http://www.youtube.com/user/Johnle9" TARGET="_blank"><img src="http://www.buttonshut.com/Youtube-Buttons/youtube-badge-128x128 (565).png" title="Facebook Buttons By ButtonsHut.com" alt="Facebook Buttons By ButtonsHut.com" width="50px" border="0" /></a> <a href="http://www.trailershut.com/movies-2010.html"></a><a href="http://www.facebook.com/people/Juan-Lopez/1310795043#!/profile.php?id=100000454533391" TARGET="_blank"><img src="http://www.buttonshut.com/Facebook-Buttons/Facebook-Buttons-56-64-.png" title="Facebook Buttons By ButtonsHut.com" alt="Facebook Buttons By ButtonsHut.com" width="50px" border="0" /></a> <a href="http://www.trailershut.com/movies-2010.html"></a>

Como puedes ver, entre cada imagen hay una etiqueta
 
que genera los saltos de línea que te comentaba. Si suprimes esa etiqueta, las imágenes aparecerán juntas. Vale aclarar que ocurrirá dicho comportamiento porque las imágenes tienen las dimensiones adecuadas y no desbordan la columna lateral, esto es muy importante.
Copio el código reformado (y corregido, porque hay un par de etiquetas de más):
<a href="http://twitter.com/RobertoHerreroT" TARGET="_blank"><img src="http://www.buttonshut.com/Twitter-Buttons/Twitter-Buttons-46-94-.png" title="Facebook Buttons By ButtonsHut.com" alt="Facebook Buttons By ButtonsHut.com" width="50px" border="0" /></a><a href="http://www.youtube.com/user/Johnle9" TARGET="_blank"><img src="http://www.buttonshut.com/Youtube-Buttons/youtube-badge-128x128 (565).png" title="Facebook Buttons By ButtonsHut.com" alt="Facebook Buttons By ButtonsHut.com" width="50px" border="0" /></a><a href="http://www.facebook.com/people/Juan-Lopez/1310795043#!/profile.php?id=100000454533391" TARGET="_blank"><img src="http://www.buttonshut.com/Facebook-Buttons/Facebook-Buttons-56-64-.png" title="Facebook Buttons By ButtonsHut.com" alt="Facebook Buttons By ButtonsHut.com" width="50px" border="0" /></a>
Por último, si quieres que haya un espacio en blanco entre las ímágenes (de otro modo aparecerán todas juntas) puedes poner una etiqueta que genera ese espacio. El código final sería este:
<a href="http://twitter.com/RobertoHerreroT" TARGET="_blank"><img src="http://www.buttonshut.com/Twitter-Buttons/Twitter-Buttons-46-94-.png" title="Facebook Buttons By ButtonsHut.com" alt="Facebook Buttons By ButtonsHut.com" width="50px" border="0" /></a> <a href="http://www.youtube.com/user/Johnle9" TARGET="_blank"><img src="http://www.buttonshut.com/Youtube-Buttons/youtube-badge-128x128 (565).png" title="Facebook Buttons By ButtonsHut.com" alt="Facebook Buttons By ButtonsHut.com" width="50px" border="0" /></a> <a href="http://www.facebook.com/people/Juan-Lopez/1310795043#!/profile.php?id=100000454533391" TARGET="_blank"><img src="http://www.buttonshut.com/Facebook-Buttons/Facebook-Buttons-56-64-.png" title="Facebook Buttons By ButtonsHut.com" alt="Facebook Buttons By ButtonsHut.com" width="50px" border="0" /></a>

El resultado lo puedes ver en un blog de pruebas que tengo:
http://archivos2.wordpress.com/
ennegrosobreblanco · Miembro · junio 8, 2010 at 2:06 pm
Copiar enlace
Muchísimas gracias GALOIS.
me acabas de solucionar un gran problema que me quitaba el sueño macho
muchísimas gracias!!!
galois · Moderador · junio 8, 2010 at 2:16 pm
Copiar enlace
De nada. Me alegro de que te haya servido.

Te quedó perfecto.
ennegrosobreblanco · Miembro · junio 8, 2010 at 3:43 pm
Copiar enlace
Pues resulta que quería incluir también un enlace a flickr, pero, igual que antes, me lo pone debajo y no consigo ponerlo a la derecha.
Te dejo aquí el código del nuevo botón para ver si me puedes decir cómo quedaría definitivamente:

<img src=»http://www.buttonshut.com/Flickr-Buttons/flickr-badge-128×128.png» title=»Facebook Buttons By ButtonsHut.com» alt=»Facebook Buttons By ButtonsHut.com» width=»50px» border=»0″/>

Gracias de antemano Galois!! jeje
ennegrosobreblanco · Miembro · junio 8, 2010 at 4:06 pm
Copiar enlace
NADA.

YA ESTÁ SOLUCIONADO.

gracias de todas formas