Foros del Web » Creando para Internet » HTML »

error al alinear fotos

Estas en el tema de error al alinear fotos en el foro de HTML en Foros del Web. buenas! soy nuevo en lo que a html se refiere, y tengo un problema estoy haciendo una prueva con unas imagenes y usandolas como link. ...
  #1 (permalink)  
Antiguo 26/03/2008, 10:30
 
Fecha de Ingreso: junio-2005
Mensajes: 119
Antigüedad: 12 años, 6 meses
Puntos: 0
error al alinear fotos

buenas!
soy nuevo en lo que a html se refiere, y tengo un problema estoy haciendo una prueva con unas imagenes y usandolas como link.
este es el codigo que estoy usando:

<html>

<head>
<title>aling imagen</title>
</head>

<body background="misaki.png" link="#0000ff" alink="#00ff00" vlink="#ff0000">
<a href="misaki2.png"><img src="misaki2.png" align="left" height="50" weidth="50"></a>

<div align="center">
<a href="misaki3.png"><img src="misaki3.png" height="50" width="50"></a>
</div>
<div align="right">
<a href="misaki4.png"><img src="misaki4.png" height="50" width="50"></a>
</div>

</body>

</html>


la que alineo a la derecha se coloca mas para abajo que todas las demas.
y si la etiqueta <div> no es necesaria, se que puedo poner el atributi align en la etiqueta <img> directamente pero esto era par auna prueba que estaba haciendo.

gracias!!
  #2 (permalink)  
Antiguo 26/03/2008, 11:13
 
Fecha de Ingreso: marzo-2008
Mensajes: 342
Antigüedad: 9 años, 8 meses
Puntos: 4
Re: error al alinear fotos

Cita:
Iniciado por chrno Ver Mensaje
buenas!
soy nuevo en lo que a html se refiere, y tengo un problema estoy haciendo una prueva con unas imagenes y usandolas como link.
este es el codigo que estoy usando:

<html>

<head>
<title>aling imagen</title>
</head>

<body background="misaki.png" link="#0000ff" alink="#00ff00" vlink="#ff0000">
<a href="misaki2.png"><img src="misaki2.png" align="left" height="50" weidth="50"></a>

<div align="center">
<a href="misaki3.png"><img src="misaki3.png" height="50" width="50"></a>
</div>
<div align="right">
<a href="misaki4.png"><img src="misaki4.png" height="50" width="50"></a>
</div>

</body>

</html>


la que alineo a la derecha se coloca mas para abajo que todas las demas.
y si la etiqueta <div> no es necesaria, se que puedo poner el atributi align en la etiqueta <img> directamente pero esto era par auna prueba que estaba haciendo.

gracias!!
no entiendo lo que estas pidiendo. especifica por favor
  #3 (permalink)  
Antiguo 26/03/2008, 16:24
 
Fecha de Ingreso: junio-2005
Mensajes: 119
Antigüedad: 12 años, 6 meses
Puntos: 0
Re: error al alinear fotos

lo que quiero hacer es poner una foto a la izquierda una en el centro y la otra a la derecha.
todas en la misma linea arriba.
pero la de la derecha se me pone mas para abajo que las demas.
  #4 (permalink)  
Antiguo 27/03/2008, 01:00
Avatar de Edypu  
Fecha de Ingreso: octubre-2003
Ubicación: La Paz - Bolivia
Mensajes: 394
Antigüedad: 14 años, 2 meses
Puntos: 1
Re: error al alinear fotos

Si estas maquetando en HTML podrías usar tablas, si usas XHTML podrías usar DIVs

Saludos.
  #5 (permalink)  
Antiguo 29/03/2008, 11:27
Avatar de RedFox  
Fecha de Ingreso: noviembre-2007
Ubicación: mAdRiD - sPaiN
Mensajes: 49
Antigüedad: 10 años, 1 mes
Puntos: 0
Re: error al alinear fotos

mediante tablas, tipo a esto:

Código:
<table style="text-align: left; width: 487px; height: 31px;"
 border="1" cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td style="text-align: center;"><img alt=""
 src="imagen1.jpg"></td>
      <td style="text-align: center;"><img alt=""
 src="imagen1.jpg"></td>
      <td style="text-align: center;"><img alt=""
 src="imagen1.jpg"></td>
    </tr>
  </tbody>
</table>
Es un ejemplo, puedes modificarle el tamaño, etc...
  #6 (permalink)  
Antiguo 29/03/2008, 15:03
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 10 meses
Puntos: 997
Re: error al alinear fotos

Cita:
Iniciado por Edypu Ver Mensaje
Si estas maquetando en HTML podrías usar tablas, si usas XHTML podrías usar DIVs
diseñar y maquetar con tablas está semanticamente mal independientemente si es html o xhtml....

chrno, usa CSS para posicionar esos divs... algo sencillo como
Código:
float:left;
width:33%
deberia funcionar...
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #7 (permalink)  
Antiguo 30/03/2008, 23:49
 
Fecha de Ingreso: marzo-2008
Mensajes: 73
Antigüedad: 9 años, 8 meses
Puntos: 0
Re: error al alinear fotos

Cita:
Iniciado por chrno Ver Mensaje
buenas!
soy nuevo en lo que a html se refiere, y tengo un problema estoy haciendo una prueva con unas imagenes y usandolas como link.
este es el codigo que estoy usando:

<html>

<head>
<title>aling imagen</title>
</head>

<body background="misaki.png" link="#0000ff" alink="#00ff00" vlink="#ff0000">
<a href="misaki2.png"><img src="misaki2.png" align="left" height="50" weidth="50"></a>

<div align="center">
<a href="misaki3.png"><img src="misaki3.png" height="50" width="50"></a>
</div>
<div align="right">
<a href="misaki4.png"><img src="misaki4.png" height="50" width="50"></a>
</div>

</body>

</html>


la que alineo a la derecha se coloca mas para abajo que todas las demas.
y si la etiqueta <div> no es necesaria, se que puedo poner el atributi align en la etiqueta <img> directamente pero esto era par auna prueba que estaba haciendo.

gracias!!
Al usar divs, puedes posisionarlas de manera absoluta con el código "position: absolute" de CSS.

Usa:


Código:
div.left
{position: absolute; top: 10px; left: 10px}


/*Esta quedará en todo el medio de la página*/
div.center
{margin-left: auto; margin-right; auto; text-align: center; width: 200px}

/*O puedes usar este que puedes ponerlo donde gustes*/
div.center
{position: absolute; top: 10px; left: 110px}

div.right
{position: absolute; top: 10px; left: 210px}
Todo eso en el <head> dentro de un tag <style type="text/css"></style>

Y en el HTML:


Código:
<html>

<head>
<title>aling imagen</title>
</head>

<body background="misaki.png" link="#0000ff" alink="#00ff00" vlink="#ff0000">
<a href="misaki2.png"><img src="misaki2.png" align="left" height="50" weidth="50"></a>

<div class="center">
<a href="misaki3.png"><img src="misaki3.png" height="50" width="50"></a>
</div>
<div class="right">
<a href="misaki4.png"><img src="misaki4.png" height="50" width="50"></a>
</div>

</body>

</html>
Verás una mágica diferencia :P Solo ajusta el "left: 10px" o cual sea para ponerlo a x distancia de el borde izq. de la pantalla.

Espero haber ayudado n.n

Última edición por AeroCross; 30/03/2008 a las 23:53 Razón: Puntos y Comas D:
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:32.