error al alinear fotos

chrno · #1 (**permalink**) 26/03/2008, 09:30

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!!

cehojac · #2 (**permalink**) 26/03/2008, 10:13

Cita:

Iniciado por chrno

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

chrno · #3 (**permalink**) 26/03/2008, 15:24

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.

Edypu · #4 (**permalink**) 27/03/2008, 00:00

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

Saludos.

RedFox · #5 (**permalink**) 29/03/2008, 10:27

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...

webosiris · #6 (**permalink**) 29/03/2008, 14:03

Cita:

Iniciado por Edypu

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...

AeroCross · #7 (**permalink**) 30/03/2008, 22:49

Cita:

Iniciado por chrno

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