alinear DIV

caraplo · #1 (**permalink**) 26/07/2007, 02:24

hola a todos,

estoy haciendo una especie de galeria de fotos sencilla, pero tengo el siguiente problema:

muestro en pantalla 4 fotos por fila cada fila la hago con un div, y cada foto en una columna que es otro div, debajo de cada foto pongo un pequeño texto de dos lineas. Pero lo que ocurre es que cuando las fotos de una fila tienen distinta altura, el texto que hay debajo de ellas tambien queda a distinta altura logicamente.

Me gustaria saber cómo hacer para que las fotos de una misma fila queden alineadas en su parte superior a la misma altura, y que el texto (parte inferior) queden alineados tambien a la misma altura.

¿Alguna sugerencia?

Gracias por anticipado a todos.

:.SMITEXX.: · #2 (**permalink**) 26/07/2007, 03:15

Checa con este codigo.

Saludos

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>Untitled Document</title>
<style type="text/css">
<!--
#contenedor {
	height: 500px;
	width: 500px;
}
.todasLasFotos {
	float: left;
	height: 500px;
	width: 250px;
}
.foto {
	float: left;
	height: 200px;
	width: 250px;
	background-color: #D4D0C8;
}
.descripcionFoto {
	float: left;
	height: 50px;
	width: 250px;
	background-color: #000000;
	color: #FFFFFF;
}
-->
</style>
</head>

<body>
<div id="contenedor">
  <div class="todasLasFotos">
    <div class="foto">ACA VA LA FOTO</div>
    <div class="descripcionFoto">ACA EL TEXTO</div>
    <div class="foto">ACA VA LA FOTO</div>
    <div class="descripcionFoto">ACA EL TEXTO</div>
  </div>
  <div class="todasLasFotos">
    <div class="foto">ACA VA LA FOTO</div>
    <div class="descripcionFoto">ACA EL TEXTO</div>
    <div class="foto">ACA VA LA FOTO</div>
    <div class="descripcionFoto">ACA EL TEXTO</div>
  </div>

</div>
</body>
</html>

caraplo · #3 (**permalink**) 26/07/2007, 03:53

Gracias por responder tan rapido, pero el caso es que tu codigo no me funciona. Y creo que no me es util porque no puedo limitar el tamaño vertical de las fotos. Yo recorro el contenido de un directorio del servidor y cojo las fotos que hay, y las redimensiono en su ancho a 100px, el alto lo redimensiona la funcion de GD proporcionalmente al ancho que le pongo, por eso en principio no sé cual será el alto de cada imagen, no puedo poner height a 120px por ejemplo.

Este es el css que uso:

Código:

div.tabla {
    width: 800px;
    clear: none;
    overflow: auto;
}

div.fila {
    width: 800px;
    border: 2px;
    clear: both;
    color: #000000;
}


div.col {
   width: 190px;
   border: 1px;
   float: left;
   padding: 5px;
   color: white;
   border-color: #F0E0A0;
   border-style: solid;
   border-right-width: 0px;
   border-left-width: 0px;
   border-top-width: 0px;
   border-bottom-width: 0px;
}

Y este como genero en PHP la galeria, recuerda, 4 fotos por fila:

Código:

<div class="tabla">
                   <?
                   include_once('xxx.inc.php');
                   $fotos = get_ruta_image($x); //me da un array de rutas a imagenes
                   $filas = $fotos[0] / 4; //$fotos[0] almacena el nº de eltos. del array
                   if (($fotos[0]/4) != 0)
                      $filas++;
                   for ($m=1; $m<=$fotos[0]; $m++) {
                       if ($m == 1)
                         echo '<div class="fila" align="center">';
                       echo '<div class="col">';
                              //aqui muestro una imagen con su texto debajo          
                       echo '</div>';
                       if (($m % 4)==0)
                          echo '</div><div class="fila">';

                   }          
                   ?>
        </div>

lo que me gustaria es que todos los textos se alinearan en la misma linea horiontal

:.SMITEXX.: · #4 (**permalink**) 26/07/2007, 11:25

Independiente del alto de la imagen, siempre van a estar a la misma altura los textos con este codigo. Lo del php, que la fuerza te acompañe, pues no lo domino.

Chau

Código:

<!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>Untitled Document</title>
<style type="text/css">
<!--
#contenedor {
	height: auto;
	width: 500px;
}
.todasLasFotos {
	float: left;
	width: 500px;
}
.foto {
	float: left;
	height: auto;
	width: 250px;
	background-color: #D4D0C8;
}
.descripcionFoto {
	float: left;
	height: 50px;
	width: 250px;
	background-color: #000000;
	color: #FFFFFF;
}
-->
</style>
</head>

<body>
<div id="contenedor">
  <div class="todasLasFotos">
    <div class="foto"><img src="" alt="" name="imagen02" width="150" height="250" id="imagen" /></div>
    <div class="foto">    <img src="" alt="" name="imagen02" width="150" height="150" id="imagen02" /></div>
</div>

  <div class="todasLasFotos">
    <div class="descripcionFoto">ACA EL TEXTO</div>
    <div class="descripcionFoto">ACA EL TEXTO</div>
  </div>
</div>
</body>
</html>

loreber · #5 (**permalink**) 28/07/2007, 13:45

hola!

soy algo nueva en esto... alguin podria sugerirme algun sitio o tutorial donde me explique como utilizar divs

mil gracias!

lobe