Como poner nombre debajo de la img?

gjulian · 26 Jun 2012, 11:49 · Solicitar retirada

Hola, quisiera saber como hacer aparecer el nombre de una imagen debajo de ésta.
Me explico: cuando un cliente sube una imagen y se la presento, aparece el nombre debajo.(bien)
Pero cuando hago "While" para mostrar todas sus imagenes, los nombres aparecen al lado y no debajo, como yo quisiera.
¿Como debería hacerlo?
Mirad este es el codigo:

$verificar = mysql_query("SELECT * FROM imagenes WHERE nick='".$_SESSION['usuario']."'");
$numeros = mysql_num_rows($verificar);
if($numeros <= 0)
{
echo "No se han encontrado imagenes";
}
else {
echo "<h2>Estas son tus imagenes ".$_SESSION['usuario']."</h2><br>";
echo "<div style='width:900px; height:auto; flaot:center; margin:auto auto;'>";
while($imagen = mysql_fetch_array($verificar))
{ 
echo "<a href=".$imagen['url']."><img width='100' height='auto' float='left' src=".$imagen['url']."></a>";
echo $imagen['nombre']; //Poniendolo aqui, me sale el nombre al lado
}
echo "</div>";
}

olukarak · 26 Jun 2012, 13:30 · Solicitar retirada

Para ello usa una tabla con bordes de 0px. Eso es HTML básico, no tendrás problemas ;)

gjulian · 26 Jun 2012, 18:16 · Solicitar retirada

Siento contradecirte, pero si creo una tabla y tras el while pongo <td>imagen</td>, resulta que crea una fila interminable de imagenes. Aunque halla limitado la tabla. No se crea un <tr> nuevo.
Y si pongo tras el While <tr><td>imagen</td></tr>, el resultado es una columna interminable.
Es por lo que en el codigo anterior hay un <div style>, para cuando una fila de imagenes halla alcanzado el limite se cree otra fila de imagenes.

skaparate · 26 Jun 2012, 19:50 · Solicitar retirada

Hola:

Una mala práctica es usar tablas para mostrar contenido no tabular; estadísticas e información similar si es apta para tablas. Por lo demás, las tablas son inaccesibles nativamente para los usuarios discapacitados visualmente (o gente que utiliza software lector de pantalla como NVDA o JAWS).

Lo que debes hacer es tener un div padre que envuelva todas las imágenes y además, cada imagen debe estar divida en dos partes:

<div class="wrap"><!-- A este div le debes dar un ancho (80% por ejemplo)
  <?php while( condición ): ?>
  <div class="imagen"><!-- y a este div también debes darle un anco máximo y un margen (para separarlas). -->
    <img src="..." />
    <h5><?php echo $titulo_imagen; ?></h5>
  </div><!-- .imagen -->
  <?php endwhile; ?>
</div><!-- .wrap -->

Con esa estructura no necesitarás modificar el código HTML, simplemente modificarás el CSS para acomodarlo como gustes. Si no queda como quieres, entonces es porque hay estilos que están dañando el diseño.

Saludos.

olukarak · 26 Jun 2012, 19:53 · Solicitar retirada

$verificar = mysql_query("SELECT * FROM imagenes WHERE nick='".$_SESSION['usuario']."'"); 
$numeros = mysql_num_rows($verificar);
$maxColumnas = 5; //Pon aquí el máximo de columnas que quieras para las imágenes.
$numColumna = 1;
if($numeros <= 0) 
{ 
echo "No se han encontrado imagenes"; 
} else { 
echo "<h2>Estas son tus imagenes ".$_SESSION['usuario']."</h2><br>"; 
echo "<table><tr>";
while($imagen = mysql_fetch_array($verificar)) {
if ($numColumna > $maxColumnas) {
$numColumna = 1;
echo "</tr><tr>";
}
echo "<td>";
echo "<a href=".$imagen['url']."><img width='100' height='auto' float='left' src=".$imagen['url']."></a><br>"; 
echo $imagen['nombre'];
echo "</td>";
$numColumna++;
} 
echo "</tr></table>"; 
}

Hace mucho tiempo que no hago esto. Espero no haber cometido errores. Ya me dirás si sale algo ya sea bien o mal.

gjulian · 26 Jun 2012, 21:23 · Solicitar retirada

Hola skaparate, lo de darle un div a cada img con el while lo intenté y se me "desbarajustan" las img. Y en estilos 'parece que todo anda bien'.
Y en cuanto a poner un nº maximo de <tr>, tambien lo intenté olukarak, y sale el nombre de la img al lado y no es lo que quiero.
Como volver a revisar todos los estilos es bastante arduo, crearé unos estilos solo para estos archivos, a ver si es que se cruza algo por ahí.
Ya os contaré.
Gracias

skaparate · 27 Jun 2012, 19:54 · Solicitar retirada

En teoría lo siguiente debería crear la galería como quieres:

<head>
  <style media="screen" type="text/css">
    div.wrap { width: 100%; }
    div.imagen { float: left; width: 27%; margin: 0 3% 0 0; }
    div.imagen img { display: block; width: 27%; }
    /* Al usar floats se crean problemas con los elementos internos del elemento flotado, así que se debe usar un hack */
    /* For modern browsers */
   .cf:before, .cf:after { content:""; display:table; }
   .cf:after { clear:both; }
   /* For IE 6/7 (trigger hasLayout) */
   .cf { *zoom:1; }
   /* Aquí termina el hack */
   div.otra-clase { clear: both; }
  </style>
</head>
<body>
<div class="wrap"><!-- A este div le debes dar un ancho (80% por ejemplo)
  <?php while( condición ): ?>
  <div class="imagen cf"><!-- y a este div también debes darle un anco máximo y un margen (para separarlas). -->
    <img src="..." />
    <h5><?php echo $titulo_imagen; ?></h5>
  </div><!-- .imagen -->
  <?php endwhile; ?>
</div><!-- .wrap -->
<div class="otra-clase"></div>
</body>

gjulian · 28 Jun 2012, 21:45 · Solicitar retirada

Hola skaparate, te agradezco mucho las molestias que te estas tomando conmigo.
He estado probando tu script, que está muy bien, y retocandolo aqui y alli, pero no sale como yo quiero. Que es igual que cuando abres una carpeta de img con windows.
Me imagino que para que se vea así, habría que hacerlo con C++, o cualquier lenguaje de estos que usa windows.
De modo que de moment se va quedar así, mas adelante ya veré.
Gracias

SurKaiser · 29 Jun 2012, 07:03 · Solicitar retirada

hahahahahah
me has hecho reir bastante, c++ en web ?? lol .... no amigo, si se puede hacer pero debes explicarte mejor skaparate y olukarak entendieron que debajo de la imagen y de hecho yo igual, asi que podemos ayudarte pero manda un impr pant de como lo quieres y nosotros lo resolvemos :cool:

Un saludo

gjulian · 29 Jun 2012, 19:46 · Solicitar retirada

Hombre me alegra saber que mi desconocimiento del lenguaje de programacion que usa windows, te haga reir. La risa es muy sana.
Y entendisteis bien, exactamente es eso lo que quiero hacer, que debajo de cada imagen aparezca su nombre.
Mira ahi tienes la impr pant. Donde pone "nombre" se entiende que debe de ir el nombre de la img ¿no?

olukarak · 29 Jun 2012, 22:19 · Solicitar retirada

Mi solución de la tabla debería conseguir eso que quieres. ¿Podrías hacer una captura de cómo te queda con mi opción?

gjulian · 30 Jun 2012, 15:46 · Solicitar retirada

Bueno olukarak, como dije hace 2 ó 3 post anteriores, ya intente hacerlo con un nº maximo de <td>. Pero se ve que no lo hice bien,pues me salía el nombre al lado.
He copiado tu script y SI sale el nombre de la imagen debajo de ésta... pero, al estar la imagen y el nombre en el mismo <td>, no salen las imagenes alineadas al bottom del <td>.
Mira
¿Como se podría arreglar?
Gracias

gjulian · 30 Jun 2012, 16:14 · Solicitar retirada

SOLUCIONADO, tengo mucho que aprender todavía. Y las tablas...es que las uso poco.
Con <td valign="bottom"> ya se ve como quería.
Gracias chicos.