HTML - Problema al alinear una imagen enlace con texto.

   
Vista:

Problema al alinear una imagen enlace con texto.

Publicado por Gustavo (87 intervenciones) el 07/07/2013 16:35:43
Hola gente otra vez necesito de sus consejos, el tema es asi.
Casi en el pie de página tengo en la misma linea 3 imagenes q son botones con flechas con
referencias a anclas ( es decir son imagenes enlace) , la de la izquierda me lleva al documento
index,la del medio me lleva al principio de la página y la de la derecha a la sección anterior,al
lado de estas imagenes puse un texo comun (no es enlace)que explica a donde lleva cada flecha, la flecha de la izquierda no tuve problema el texto se alineo solo a la derecha de la misma, la del
centro la alinie con la etiqueta center y el texto me quedaba arriba , le hice un align=middle a
la imagen y lo resolvi, el problema es con la flecha de la derecha al poner la imagen alineada a
la derecha y poner el texto antes (lo pongo antes para porque no me queda margen a la derecha) se me va a la izquierda y se me junta con el texto de la flecha izquierda, lo resolvi de una forma
poco ortodoxa, le hice un align=top a la imagen para q se vaya a la izquierda junto con el texto
y despues fui corriendo el texto y la imagen a la derecha con la entidad de caracter  .
Mi pregunta es : es necesario hacer todo este lio o hay una forma mas sencilla de hacerlo ?


les dejo el codigo antes de resolverlo con  y ponerle align top a la imagen (es la tercera
imagen la que contiene parís 1 en el href) asi se dan una idea. (el   de la primer flecha es
solo para que el texto comun no quede tan cerca de la imagen)


1
2
3
4
5
6
7
<center><a href="#arriba1"> <img
src="http://i1177.photobucket.com/albums/x348/TANGO2013/91.png"  width="32"height="32" alt="Imagen flecha arriba" border="0" align="middle" /></a>&nbsp;Al  principio</center>
<a href="/index75.html"><img src="http://i1177.photobucket.com/albums/x348/TANGO2013/81.png"
align="left" width="32" height="32" alt="Imagen flecha izquierda" border="0" /></a>A la página
principal
A la sección anterior<a href="#parís1"><img src="/Gifs/91.png" align="right" width="32"
height="32" alt="Imagen flecha arriba" border="0" /></a>
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
información
Otras secciones de LWP con contenido de HTML
- Código fuente de HTML
- Cursos de HTML
- Temas de HTML
- Chat de HTML
información
Códigos de HTML
- Seguridad en web
- Formulario personalizado
- Top Links
Imágen de perfil de xve

Problema al alinear una imagen enlace con texto.

Publicado por xve (1178 intervenciones) el 07/07/2013 18:31:57
Hola Gustavo, no entiendo muy bien como tiene que quedar, pero en el código que muestras, creo que tendrias que poner cada enlace en un div, de esta manera podrás posicionarlos correctamente.

El tag <center> desaparece en html5.

Para posicionarlo mas o menos como lo entiendo, yo lo haría algo así... es un poco mas de lineas, pero creo que es mas correcto...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<style>
.link               {float:left;width:33%;}
.link img           {width:32px;height:32px;}
.link div           {padding:0px 5px;}
.link_izquierdo a   {float:left;}
.link_izquierdo div {float:left;margin-top:6px;}
.link_izquierdo     {text-align:left;}
.link_centro        {text-align:center;}
.link_derecho       {text-align:right;}
.link_derecho a     {float:right;}
.link_derecho div   {float:right;margin-top:6px;}
</style>
 
<div class="link link_izquierdo">
    <a href="/index75.html"><img src="http://i1177.photobucket.com/albums/x348/TANGO2013/91.png" alt="Imagen flecha izquierda" border="0" align="middle" /></a>
    <div>A la página principal</div>
</div>
<div class="link link_centro">
    <a href="#arriba1"><img src="http://i1177.photobucket.com/albums/x348/TANGO2013/81.png" alt="Imagen flecha arriba" border="0" align="middle" /></a>
    <div>Al principio</div>
</div>
<div class="link link_derecho">
    <a href="#paris1"><img src="http://i1177.photobucket.com/albums/x348/TANGO2013/91.png" alt="Imagen flecha arriba" border="0" align="middle" /></a>
    <div>Al principio</div>
</div>

Coméntanos, ok?
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

Problema al alinear una imagen enlace con texto.

Publicado por Gustavo (87 intervenciones) el 07/07/2013 21:24:56
Hola, vos usas hojas de estilo y div , mis conocimientos limitados todavia no llegan a eso, jaja recien voy a empezar a ver tablas en mi estudio , pero copie el codigo y queda perfecto otra vez gracias xve ;)
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