Foros del Web » Creando para Internet » HTML »

Acomodar imagenes en HTML

Estas en el tema de Acomodar imagenes en HTML en el foro de HTML en Foros del Web. Buenas, ando precisando de la ayuda de ustedes, soy nuevo en esto y me acabo de registar recien. Estoy haciendo una página web por un ...
  #1 (permalink)  
Antiguo 10/04/2011, 19:46
 
Fecha de Ingreso: abril-2011
Mensajes: 2
Antigüedad: 6 años, 8 meses
Puntos: 0
Busqueda Acomodar imagenes en HTML

Buenas, ando precisando de la ayuda de ustedes, soy nuevo en esto y me acabo de registar recien. Estoy haciendo una página web por un trabajo práctico que me pidieron y puse fotos las cuales me salen una abajo de la otra y quisiera que que me salga una al lado de la otra y no abajo. Acá les dejo el código:

Código:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="shortcut icon" href="log/Logo icono.ico"> 
<title>Todos debemos saber</title>
<link rel="stylesheet" href="css.css" type="text/css">
</head>

<body>

<div class="container">
  <div class="header"><img src="log/Logo.jpg" width="20%" height="120" id="Insert_logo" style="background: #8090AB; display:block;" /> 
  </div>
  <div class="sidebar1">
  <div class="header"><a href="http://www.jgm.gov.ar/"><img src="publ/Subsecretaria de gestion y empleo publico.jpg" width="100%" height="100"/></a>
  </div>
  <div class="header"><a href="http://www.trabajo.gov.ar/"><img src="publ/Ministerio de trabajo.jpg" width="100%" height="100" /></a>
  </div>
  <div class="header"><a href="http://www.msal.gov.ar/"><img src="publ/Ministerio de salud.jpg" width="100%" height="100" /></a>
  </div>
  <div class="header" align="center"><a href="http://portal.educacion.gov.ar/"><img src="publ/Ministerio de educacion.jpg" width="75%" height="145" /></a>
  </div>
  <div class="header"><a href="http://www.censo2010.indec.gov.ar/"><img src="publ/censo2010.jpg" width="100%" height="100" /></a>
  </div>
    <!-- end .sidebar1 --></div>
  <div class="content">
  
  	<div class="menu">
        <center><ul class="nav" id="navlist">
            <li><a href="index.html">Home</a></li>
            <li><a href="imagenes.html">Imágenes</a></li>
            <li><a href="contactenos.html">Contactenos</a></li>
        </ul></center>
    </div>


<div class="container">
  <div class="header"><a href="img/Clases.jpg"><img src="img/Clases.jpg" width="25%" height="175" /></a>


  <div class="header"><a href="img/Clases 1.jpg"><img src="img/Clases 1.jpg" width="25%" height="175" /></a>
  </div>


  <div class="header"><a href="img/Clases 2.jpg"><img src="img/Clases 2.jpg" width="25%" height="175" /></a>
  </div>


  <div class="header"><a href="img/Clases 3.jpg"><img src="img/Clases 3.jpg" width="25%" height="175" /></a>
  </div>


  <div class="header"><a href="img/Clases 4.jpg"><img src="img/Clases 4.jpg" width="25%" height="175" /></a>
  </div>


  <div class="header"><a href="img/Clases 5.jpg"><img src="img/Clases 5.jpg" width="25%" height="175" /></a>


  <div class="header"><a href="img/Comedor.jpg"><img src="img/Comedor.jpg" width="25%" height="175" /></a>
  </div>


  <div class="header"><a href="img/Fin de curso.jpg"><img src="img/Fin de curso.jpg" width="25%" height="175" /></a>
  </div>


  <div class="header"><a href="img/Fin de curso 1.jpg"><img src="img/Fin de curso 1.jpg" width="25%" height="175" /></a>
  </div>

<br>
  <div class="footer">
    <!-- end .footer --></div>
  <!-- end .container --></div>

<div>
</body>
</html>
Y acá les dejo para que se descarguen mi página desde Megaupload ya que no se que le paso a mi servidor gratuito que no anda: http://www.megaupload.com/?d=EXQ1PHVU

Desde ya muchas gracias.

Última edición por Lea1987; 10/04/2011 a las 20:08
  #2 (permalink)  
Antiguo 10/04/2011, 20:24
Avatar de DataLore  
Fecha de Ingreso: junio-2008
Mensajes: 58
Antigüedad: 9 años, 6 meses
Puntos: 5
Respuesta: Acomodar imagenes en HTML

Estas utilizando DIVs para encerrar imágenes. Ten en cuenta que este tipo de tags por defecto ocupan todo un bloque horizontal. Deberías probar modificando esto mediante css, prueba el atributo float.

Para mas detalle chequea este tutorial como para darte una idea de como trabajar con div's a instancias de table's

http://www.forosdelweb.com/f53/aporte-pequena-guia-migracion-xhtml-css-648073/
  #3 (permalink)  
Antiguo 12/04/2011, 09:48
Avatar de sergio87  
Fecha de Ingreso: octubre-2007
Ubicación: Buenos Aires
Mensajes: 323
Antigüedad: 10 años, 1 mes
Puntos: 8
Respuesta: Acomodar imagenes en HTML

Como dice DataLore, te recomiendo que utilices css para poder hacer lo que necesites, ahora te pego el código que te armé para que lo tomes de ejemplo, lo pruebes y puedas modificar en tu archivo las imágenes que necesites que estén una al lado de la otra, ten en cuenta siempre flotar los elementos, eso te da posibilidad de hacer que la imagen vaya a donde quieras.

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Todos debemos saber</title>
<style type="text/css">
<!--
.imagenes {
	float: left;
}
.imagenes img{
	margin: 5px 0 0 20px;
	border: 1px solid #006;
}
-->
</style>
</head>
<body>
	<p class="imagenes">
    	     <img alt="imagen1" src="loquequieras.jpg">
	     <img alt="imagen2" src="hola.jpg">
        </p>
</body>
</html> 
  #4 (permalink)  
Antiguo 13/04/2011, 09:40
Avatar de gines86  
Fecha de Ingreso: abril-2011
Ubicación: Murcia
Mensajes: 20
Antigüedad: 6 años, 8 meses
Puntos: 2
Respuesta: Acomodar imagenes en HTML

Bueno, veo que ya te han dado la solución.
Lo más recomendable es que pongas float, y luego en el la etiqueta div puedes asignarle el tamaño que quieras.
Ej:
Cita:
<div style="width: 30px; height: 10px;">
  #5 (permalink)  
Antiguo 16/10/2011, 02:10
Avatar de alex_dh  
Fecha de Ingreso: septiembre-2011
Ubicación: Kreuzberg
Mensajes: 235
Antigüedad: 6 años, 3 meses
Puntos: 14
Respuesta: Acomodar imagenes en HTML

no uses div!

Etiquetas: imagenes
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 11:14.