Acomodar imagenes en HTML

Lea1987 · #1 (**permalink**) 10/04/2011, 18:46

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.

DataLore · #2 (**permalink**) 10/04/2011, 19:24

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**) 12/04/2011, 08:48

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>

gines86 · #4 (**permalink**) 13/04/2011, 08:40

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:

alex_dh · #5 (**permalink**) 16/10/2011, 01:10

no uses div!