Foros del Web » Creando para Internet » HTML »

Espacio Vertical entre Imagenes

 Estas en el tema de Espacio Vertical entre Imagenes en el foro de HTML en Foros del Web. Que tal amigos, necesito una ayuda bastante sencilla para ustedes los conocedores de HTML. Diseñe un template JPG y lo recorte en 4 partes para ...
  #1 (permalink)  
Antiguo 09/05/2012, 17:12
Avatar de bathory84  
Fecha de Ingreso: junio-2010
Ubicación: Venezuela
Mensajes: 257
Antigüedad: 14 años, 5 meses
Puntos: 1
Espacio Vertical entre Imagenes
Que tal amigos, necesito una ayuda bastante sencilla para ustedes los conocedores de HTML. Diseñe un template JPG y lo recorte en 4 partes para colocar URL en cada una de las imagenes, de manera que cuando estas 4 imagenes se unan Verticalmente parezcan una sola.

Hice un documento en HTML bastante sencillo y coloque las 4 imagenes una debajo de otra dentro de una Tabla pero queda un espacio en Blanco entre Imagenes pues cada vez que colocaba una Imagen le daba ENTER para colocar la otra debajo.

Como puedo quitarle ese espacio en Blanco para que todas las imagenes queden pegadas Verticalmente?. HEEEEEEELP!
Última edición por bathory84; 09/05/2012 a las 18:58
  #2 (permalink)  
Antiguo 09/05/2012, 20:16
Avatar de emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años, 5 meses
Puntos: 1567
Respuesta: Espacio Vertical entre Imagenes
Ya que estás usando una tabla, te lo hago con una tabla.

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6. <title>4 x 1</title>
  7. </head>
  8. <body bgcolor="#FFFFFF">
  9. <table border="0" cellpadding="0" cellspacing="0" width="1029" height="400">
  10. <tr>
  11. <td width="1029" height="100"><img src="bg21x1.jpg" width="1029" height="100" border="0" alt="bg21x1.jpg" /></td>
  12. </tr>
  13. <tr>
  14. <td width="1029" height="100"><img src="bg22x1.jpg" width="1029" height="100" border="0" alt="bg22x1.jpg" /></td>
  15. </tr>
  16. <tr>
  17. <td width="1029" height="100"><img src="bg23x1.jpg" width="1029" height="100" border="0" alt="bg23x1.jpg" /></td>
  18.  
  19. </tr>
  20. <tr>
  21. <td width="1029" height="100"><img src="bg24x1.jpg" width="1029" height="100" border="0" alt="bg24x1.jpg" /></td>
  22. </tr>
  23. </table>
  24. </body>
  25. </html>

como ves no tiene ningún secreto, obviamente se sobreentiende que los anchos y altos (en tu caso solo el alto) están bien definidos y se corresponden al tamaño de tus imágenes.
incluso podrías omitir todos los tamaños en el html, y se debería ver bien igual
Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6. <title>4 x 1</title>
  7. </head>
  8. <body bgcolor="#FFFFFF">
  9. <table border="0" cellpadding="0" cellspacing="0">
  10. <tr>
  11. <td><img src="bg21x1.jpg"  border="0" alt="" /></td>
  12. </tr>
  13. <tr>
  14. <td><img src="bg22x1.jpg"  border="0" alt="" /></td>
  15. </tr>
  16. <tr>
  17. <td><img src="bg23x1.jpg"  border="0" alt="" /></td>
  18. </tr>
  19. <tr>
  20. <td><img src="bg24x1.jpg"  border="0" alt="" /></td>
  21. </tr>
  22. </table>
  23. </body>
  24. </html>

Lo que no debés omitir, son los atributos
border="0" cellpadding="0" cellspacing="0" en la tabla, y declarar un Doctype Válido en la página
Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #3 (permalink)  
Antiguo 09/05/2012, 21:06
Avatar de bathory84  
Fecha de Ingreso: junio-2010
Ubicación: Venezuela
Mensajes: 257
Antigüedad: 14 años, 5 meses
Puntos: 1
Respuesta: Espacio Vertical entre Imagenes
Cita:
Iniciado por emprear Ver Mensaje
Ya que estás usando una tabla, te lo hago con una tabla.

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6. <title>4 x 1</title>
  7. </head>
  8. <body bgcolor="#FFFFFF">
  9. <table border="0" cellpadding="0" cellspacing="0" width="1029" height="400">
  10. <tr>
  11. <td width="1029" height="100"><img src="bg21x1.jpg" width="1029" height="100" border="0" alt="bg21x1.jpg" /></td>
  12. </tr>
  13. <tr>
  14. <td width="1029" height="100"><img src="bg22x1.jpg" width="1029" height="100" border="0" alt="bg22x1.jpg" /></td>
  15. </tr>
  16. <tr>
  17. <td width="1029" height="100"><img src="bg23x1.jpg" width="1029" height="100" border="0" alt="bg23x1.jpg" /></td>
  18.  
  19. </tr>
  20. <tr>
  21. <td width="1029" height="100"><img src="bg24x1.jpg" width="1029" height="100" border="0" alt="bg24x1.jpg" /></td>
  22. </tr>
  23. </table>
  24. </body>
  25. </html>

como ves no tiene ningún secreto, obviamente se sobreentiende que los anchos y altos (en tu caso solo el alto) están bien definidos y se corresponden al tamaño de tus imágenes.
incluso podrías omitir todos los tamaños en el html, y se debería ver bien igual
Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6. <title>4 x 1</title>
  7. </head>
  8. <body bgcolor="#FFFFFF">
  9. <table border="0" cellpadding="0" cellspacing="0">
  10. <tr>
  11. <td><img src="bg21x1.jpg"  border="0" alt="" /></td>
  12. </tr>
  13. <tr>
  14. <td><img src="bg22x1.jpg"  border="0" alt="" /></td>
  15. </tr>
  16. <tr>
  17. <td><img src="bg23x1.jpg"  border="0" alt="" /></td>
  18. </tr>
  19. <tr>
  20. <td><img src="bg24x1.jpg"  border="0" alt="" /></td>
  21. </tr>
  22. </table>
  23. </body>
  24. </html>

Lo que no debés omitir, son los atributos
border="0" cellpadding="0" cellspacing="0" en la tabla, y declarar un Doctype Válido en la página
Saludos

Eso quedo excelente amigo, Muchas Gracias...

Etiquetas: espacio, imagenes, tabla, vertical
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 23:00.