No consigo poner las imágenes en la posición que deseo

[adrian_hm13]

Buenas, ante todo me presento, soy Adrián un nuevo iniciado en este mundillo y estoy aprendiendo con tutoriales y cursillos, pero esto ya me tiene desquiciado desde hace unos días xD, aquí os dejo el código y una foto, el problema es que no consigo poner las imágenes unas debajo de otras, las tres en tipo columna.
Espero que podáis ayudarme y que no os moleste!

Código HTML:

<a href="javascript:var dir=window.document.URL;var tit=window.document.title;var tit2=encodeURIComponent(tit);var dir2= encodeURIComponent(dir);window.location.href=('http://www.facebook.com/share.php?u='+dir2+'&amp;t='+tit2+'');"><img src="images/fb.jpg" alt="Compartir" width="212" height="34" <div style="position:relative"; align="right"/></a><br>
              
<a href="javascript:var dir=window.document.URL;var tit=window.document.title;var tit2=encodeURIComponent(tit);window.location.href=('http://twitter.com/?status='+tit2+'%20'+dir+'');"><img src="images/twitter.jpg" alt="Compartir Twitter" width="212" height="34" <div style="position:relative"; align="right" /></a><br>
             
<a href="https://plus.google.com/108141328258087945339/"><img src="images/google.jpg"alt="Compartir en Google+" width="212" height="34"<div style="position:relative"; align="right"/></a> 

[Triby]

Me gustaría saber qué finalidad tiene esto: <div style="position:relative"; align="right" />

Si sólo flotas los enlaces, quedarán alineados (float:left; o float:right;)

[adrian_hm13]

Sinceramente ahora estoy aprendiendo y meto códigos por probar jajajajajja, gracias ahora lo pruebo ^^

Edito: Le he asignado la clase en el html y en el css he creado una clase para los tres "botones" con float:right y se me ha quedado igual :/

Código HTML:

.compartirredessociales{
	float:right;
	}

[Triby]

y el html actualizado?

[ArturoGallegos]

corrige tu código html esta mal escrito

pasa a librosweb.es y repasa el de html

tienes que abrir y cerrar las etiquetas o tendrás estos problemas

[Triby]

Ouch... cierto, no cerró ninguna <img />

[adrian_hm13]

Código HTML:

<a href="javascript:var dir=window.document.URL;var tit=window.document.title;var tit2=encodeURIComponent(tit);var dir2= encodeURIComponent(dir);window.location.href=('http://www.facebook.com/share.php?u='+dir2+'&amp;t='+tit2+'');"><div class="compartirredessociales"><img src="images/fb.jpg"</img>
              
<a href="javascript:var dir=window.document.URL;var tit=window.document.title;var tit2=encodeURIComponent(tit);window.location.href=('http://twitter.com/?status='+tit2+'%20'+dir+'');"><div class="compartirredessociales"><img src="images/twitter.jpg"</img>
             
<a href="https://plus.google.com/108141328258087945339/"><div class="compartirredessociales"><img src="images/google.jpg"</img> 

Ahora esta escalonado hacia la izquierda...vaya tela xD

[ArturoGallegos]

te repito ve y lee el libro de html, no todas la etiquetas cierran igual.

las imágenes se abren y cierran en el mismo paso <img src="" /> mientras que los div tienen etiqueta para abrir y otra para cerrar <div>contenido </div>
y los link <a href="#">contenido</a>


y para rematar <a> es un elemento de linea no puede contener en su interior elementos del tipo bloque como <p> o <div> esta mal hecho

en conclusión tu código sigue estando MAL escrito

[adrian_hm13]

Me podrías indicar como cerrarlo correctamente por favor?

Gracias.

[ArturoGallegos]

de plano hablo chino? fijate en mi comentario como al mismo tiempo que te pido leas el libro de html en librosweb.es también te hago la mención de algunos elementos

las imágenes se abren y cierran en el mismo paso <img src="" /> mientras que los div tienen etiqueta para abrir y otra para cerrar <div>contenido </div>
y los link <a href="#">contenido</a>

no es mala onda amigo, aquí con gusto te orientamos pero pon algo de iniciativa... si te comente eso fue para que tuvieras una idea con leer mi comentarios deberías haber dado en el clavo de tu error y corregirlo.... tampoco puedo darte el código ya tal cual listo para usar.

[adrian_hm13]

Y busque como cerrarlas bien.., he activado la opción ver los errores y ahora lo tengo remarcado con amarillo, pero pruebo a cerrarlas de diferentes maneras y no consigo nada...

Pero gracias igualmente seguiré mirando por algún lado


EDIT: He trasteado bastante más y ya no me da error de código

Código HTML:

<div class="compartirredessociales"><a href="javascript:var dir=window.document.URL;var tit=window.document.title;var tit2=encodeURIComponent(tit);var dir2= encodeURIComponent(dir);window.location.href=('http://www.facebook.com/share.php?u='+dir2+'&amp;t='+tit2+'');"><img src="images/fb.jpg" border="0" width="212" height="34"></a></div> 

Así está bien verdad?

[ArturoGallegos]

La imagen no esta cerrada
<img src="images/fb.jpg" border="0" width="212" height="34" />

[adrian_hm13]

Utilizo html, lo último para ponerlo como deseo es que estén juntos del todo, cosa que he investigado y no saco...
HTML:

Código HTML:

<div class="compartirredessociales"><a href="javascript:var dir=window.document.URL;var tit=window.document.title;var tit2=encodeURIComponent(tit);var dir2= encodeURIComponent(dir);window.location.href=('http://www.facebook.com/share.php?u='+dir2+'&amp;t='+tit2+'');"><img src="images/fb.jpg" border="0" width="212" height="34"></a></div>
<br>
<br>
<div class="compartirredessociales"><a href="javascript:var dir=window.document.URL;var tit=window.document.title;var tit2=encodeURIComponent(tit);window.location.href=('http://twitter.com/?status='+tit2+'%20'+dir+'');"><img src="images/twitter.jpg" border="0" width="212" height="34"></a></div> 

CSS:

Código HTML:

.compartirredessociales{
	float:right;
	margin-bottom:0px;
	margin-top:0px;
	margin-left:0px;
	}

He probado con margenes y nada, queda un pequeño espacio entre ambas imágenes al alinearlas verticalmente.

Siento las molestias ya..jej.

[ArturoGallegos]

ya no las quieres horizontales a hora vas por las verticales mmmm ok

<br>
<br>

genera dos saltos de linea


?¿ no se te ocurrió colocar ambos enlaces en un solo div?

[Rafael]

A ver. Entiendo que quieres una imagen encima de otra. ¿Correcto?

Un elemento <a> es un elemento inline.
Para que estén no en una linea (inline) sino una debajo de otra, te conviene ponerle un class:

<a class="RedesSociales">img bla bla.</a>
<a class="RedesSociales">img bla bla.</a>

Y en tu hoja de estilos convertir esos a, que son inline, repito, a block.

Código CSS:

a.RedesSociales {display: block;}
 

Esa es una, o la otra, como te dice Arturo, ponerlas dentro de un div contenedor.

Código HTML:

<div style="width: 300px;">
<a>img bla bla.</a>
<a>img bla bla.</a>
</div>
 

En realidad la primer opción de a como block también necesita el contenedor.

[adrian_hm13]

Solucionado al fin, gracias a ambos por vuestra colaboración.

Código HTML:

<div style="width:212px; height:34px; float:right;"><a href="javascript:var dir=window.document.URL;var tit=window.document.title;var tit2=encodeURIComponent(tit);var dir2= encodeURIComponent(dir);window.location.href=('http://www.facebook.com/share.php?u='+dir2+'&amp;t='+tit2+'');"><img src="images/fb.jpg"></a>

<a href="javascript:var dir=window.document.URL;var tit=window.document.title;var tit2=encodeURIComponent(tit);window.location.href=('http://twitter.com/?status='+tit2+'%20'+dir+'');"><img src="images/twitter.jpg"></a>

 
<a href="https://plus.google.com/108141328258087945339/"><img src="images/google.jpg"></a>

</div> 

Código CSS:

a.compartirredessociales{
    display:block;
    }