HTML - Widget con imágenes en sidebar

 
Vista:
sin imagen de perfil

Widget con imágenes en sidebar

Publicado por Ana (4 intervenciones) el 25/11/2016 15:16:17
Buenas tardes.

En el sidebar de mi blog, tengo un widget con los botones sociales para que nos sigan en Facebook, Twitter y G+. Las imágenes son mías y he creado un widget de texto con un código html. Los links funcionan correctamente. Sin embargo, yo quisiera que los "botones" salieran uno al lado del otro, pero salen uno debajo del otro. Espero haberme explicado. Adjunto imagen.
Un saludo,
Ana

Botones-sociales
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Alejandro
Val: 252
Bronce
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Widget con imágenes en sidebar

Publicado por Alejandro (72 intervenciones) el 25/11/2016 15:41:57
¿Y el codigo? Me "imagino" que que cada icono esta en un <div>, partiendo de esa suposición, necesitas establecer el estilo {float: left}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Widget con imágenes en sidebar

Publicado por Ana (4 intervenciones) el 25/11/2016 15:53:18
Tengo que decirte que yo "soy de letras", je je....
Este es el código:

1
2
3
<a href="https://www.facebook.com/laMaletaPreparada"target="_blank"><img SRC="http://lamalet1-cp529.wordpresstemporal.com/wp-content/uploads/2016/11/Botón-Facebook-copia.png" WIDTH="45" HEIGHT="45" /></a>
<a href="https://www.twitter.com/maletapreparada "target="_blank"><img SRC=" http://lamalet1-cp529.wordpresstemporal.com/wp-content/uploads/2016/11/Botón-Twitter-copia.png" WIDTH="45" HEIGHT="45" /></a>
<a href="https://plus.google.com/u/0/+LaMaletaPreparada "target="_blank"><img SRC=" http://lamalet1-cp529.wordpresstemporal.com/wp-content/uploads/2016/11/Botón-GPlus-copia.png " WIDTH="45" HEIGHT="45" /></a>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve
Val: 995
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Widget con imágenes en sidebar

Publicado por xve (1540 intervenciones) el 25/11/2016 21:44:51
Hola Ana, si yo cojo tu código tal cual y lo pego en una pagina html, los botones sales uno al lado del otro... eso quiere decir que están uno debajo del otro por algún estilo de tu pagina web.

La pagina donde aparecen esta publicada en Internet?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Alejandro
Val: 252
Bronce
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Widget con imágenes en sidebar

Publicado por Alejandro (72 intervenciones) el 25/11/2016 22:21:07
Con ese codigo no se te puede ayudar, este es el codigo que deviste publicar:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div>
   <a href="https://www.facebook.com/laMaletaPreparada" onclick="__gaTracker('send', 'event', 'outbound-widget', 'https://www.facebook.com/laMaletaPreparada', '');" target="_blank">
      <img src="http://lamalet1-cp529.wordpresstemporal.com/wp-content/uploads/2016/11/Botón-Facebook-copia.png" height="45" width="45">
   </a>
</div>
 
<div>
   <a href="https://www.twitter.com/maletapreparada " onclick="__gaTracker('send', 'event', 'outbound-widget', 'https://www.twitter.com/maletapreparada ', '');" target="_blank">
      <img src=" http://lamalet1-cp529.wordpresstemporal.com/wp-content/uploads/2016/11/Botón-Twitter-copia.png" height="45" width="45">
   </a>
</div>
 
<div>
   <a href="https://plus.google.com/u/0/+LaMaletaPreparada " onclick="__gaTracker('send', 'event', 'outbound-widget', 'https://plus.google.com/u/0/+LaMaletaPreparada ', '');" target="_blank">
      <img src=" http://lamalet1-cp529.wordpresstemporal.com/wp-content/uploads/2016/11/Botón-GPlus-copia.png " height="45" width="45">
   </a>
</div>
No preguntes como lo obtuve, soy hacker hahahaha, naaaa solo entre al sitio que usas en los links de tu codigo.

Como me imaginaba cada icono esta dentro de un <div>, y como te comentava lo puedes solucionar poniendoles float:left
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div style="float:left">
   <a href="https://www.facebook.com/laMaletaPreparada" onclick="__gaTracker('send', 'event', 'outbound-widget', 'https://www.facebook.com/laMaletaPreparada', '');" target="_blank">
      <img src="http://lamalet1-cp529.wordpresstemporal.com/wp-content/uploads/2016/11/Botón-Facebook-copia.png" height="45" width="45">
   </a>
</div>
 
<div style="float:left">
   <a href="https://www.twitter.com/maletapreparada " onclick="__gaTracker('send', 'event', 'outbound-widget', 'https://www.twitter.com/maletapreparada ', '');" target="_blank">
      <img src=" http://lamalet1-cp529.wordpresstemporal.com/wp-content/uploads/2016/11/Botón-Twitter-copia.png" height="45" width="45">
   </a>
</div>
 
<div>
   <a href="https://plus.google.com/u/0/+LaMaletaPreparada " onclick="__gaTracker('send', 'event', 'outbound-widget', 'https://plus.google.com/u/0/+LaMaletaPreparada ', '');" target="_blank">
      <img src=" http://lamalet1-cp529.wordpresstemporal.com/wp-content/uploads/2016/11/Botón-GPlus-copia.png " height="45" width="45">
   </a>
</div>

o dejando los tres iconos en un solo <div>
1
2
3
4
5
6
7
8
9
10
11
12
13
<div>
   <a href="https://www.facebook.com/laMaletaPreparada" onclick="__gaTracker('send', 'event', 'outbound-widget', 'https://www.facebook.com/laMaletaPreparada', '');" target="_blank">
      <img src="http://lamalet1-cp529.wordpresstemporal.com/wp-content/uploads/2016/11/Botón-Facebook-copia.png" height="45" width="45">
   </a>
 
   <a href="https://www.twitter.com/maletapreparada " onclick="__gaTracker('send', 'event', 'outbound-widget', 'https://www.twitter.com/maletapreparada ', '');" target="_blank">
      <img src=" http://lamalet1-cp529.wordpresstemporal.com/wp-content/uploads/2016/11/Botón-Twitter-copia.png" height="45" width="45">
   </a>
 
   <a href="https://plus.google.com/u/0/+LaMaletaPreparada " onclick="__gaTracker('send', 'event', 'outbound-widget', 'https://plus.google.com/u/0/+LaMaletaPreparada ', '');" target="_blank">
      <img src=" http://lamalet1-cp529.wordpresstemporal.com/wp-content/uploads/2016/11/Botón-GPlus-copia.png " height="45" width="45">
   </a>
</div>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar

Widget con imágenes en sidebar

Publicado por Ana (4 intervenciones) el 25/11/2016 23:12:43
Muchas gracias! Ahora no estoy en casa y no lo puedo cambiar, pero lo haré en cuanto llegue.
Un saludo y gracias otra vez!!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Widget con imágenes en sidebar

Publicado por Ana (4 intervenciones) el 26/11/2016 19:14:42
Muchas gracias, Alejandro.
Funciona!!!!
Saludos y buen fin de semana!!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar