Foros del Web » Creando para Internet » CSS »

alinear DIV

Estas en el tema de alinear DIV en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 26/07/2007, 02:24
 
Fecha de Ingreso: julio-2006
Ubicación: Sevilla
Mensajes: 94
Antigüedad: 17 años, 8 meses
Puntos: 1
alinear DIV

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.
  #2 (permalink)  
Antiguo 26/07/2007, 03:15
 
Fecha de Ingreso: noviembre-2002
Ubicación: Cerca de todo, lejos de la nada.
Mensajes: 82
Antigüedad: 21 años, 4 meses
Puntos: 0
Re: alinear DIV

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> 
  #3 (permalink)  
Antiguo 26/07/2007, 03:53
 
Fecha de Ingreso: julio-2006
Ubicación: Sevilla
Mensajes: 94
Antigüedad: 17 años, 8 meses
Puntos: 1
Re: alinear DIV

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

Última edición por caraplo; 26/07/2007 a las 03:55 Razón: no aparece la imagen que importo con las etiquetas IMG del foro
  #4 (permalink)  
Antiguo 26/07/2007, 11:25
 
Fecha de Ingreso: noviembre-2002
Ubicación: Cerca de todo, lejos de la nada.
Mensajes: 82
Antigüedad: 21 años, 4 meses
Puntos: 0
Re: alinear DIV

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>
  #5 (permalink)  
Antiguo 28/07/2007, 13:45
 
Fecha de Ingreso: julio-2007
Mensajes: 1
Antigüedad: 16 años, 8 meses
Puntos: 0
Re: alinear DIV

hola!

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

mil gracias!

lobe
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 08:11.