Foros del Web » Creando para Internet » HTML »

Columna de imagenes desalineada...

Estas en el tema de Columna de imagenes desalineada... en el foro de HTML en Foros del Web. Buenas, tengo un problemilla con esta página que estoy haciendo . Basicamente es, como podéis comprobar, que algunas de las portadas de la columna del ...
  #1 (permalink)  
Antiguo 26/05/2009, 05:05
 
Fecha de Ingreso: septiembre-2003
Mensajes: 70
Antigüedad: 14 años, 2 meses
Puntos: 1
Pregunta Columna de imagenes desalineada...

Buenas, tengo un problemilla con esta página que estoy haciendo. Basicamente es, como podéis comprobar, que algunas de las portadas de la columna del centro, salen un poco desalineadas del resto, ya sea a la izquierda o a la derecha, aunque no se nota mucho en Firefox, en IE sí se nota bastante.

El código html de la tabla es el siguiente:

Código:
<table class="ordenar" width="560" border="0" cellpadding="3" cellspacing="0">
<tr>
	<td width="150"></td>
    <td width="120"></td>
    <td width="150"></td>
    <td width="50"></td>
    <td width="70"></td>
</tr>
Y el css es el siguiente

Código:
.ordenar {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #FFFFFF;
	text-align: center;
	text-decoration: none;
}
A ver si alguno me puede echar un cable pq no se exactamente como cambiarlo para que se quede totalmente recto.
__________________
Salu2
  #2 (permalink)  
Antiguo 26/05/2009, 05:26
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Columna de imagenes desalineada...

y si miras de aplicarle una clase a todas las imágenes, aún que yo en FF e IE lo veo bien.

Además te diría que no uses tablas para diseñar, es lo peor que se puede ahcer, por que hace tu código lioso, poco legible y no es amigable con los buscadores, aprende CSS y el sistema de divs.
__________________
No diseñes usando tablas.
  #3 (permalink)  
Antiguo 26/05/2009, 05:43
 
Fecha de Ingreso: septiembre-2003
Mensajes: 70
Antigüedad: 14 años, 2 meses
Puntos: 1
Respuesta: Columna de imagenes desalineada...

Si te fijas bien, en algunas de las imagenes de la columna central está un pixel desalineadas a la izquierda o a la derecha, en FF casi no se nota. Hay que fijarse mucho, por ejemplo, el disco de Alice Cooper y justo el de debajo, las dos portadas no están perfectamente alineadas verticalmente.

Respecto a diseñar con divs... el problema es que yo no hice el diseño de la web, ya me lo pasaron así y basicamente estoy remendando y ordenando cosillas. Si cuando termine todo puedo hacer una V2 a base de divs, pues lo haré, pero hasta ese momento, tengo ke tirar de tablas.
__________________
Salu2
  #4 (permalink)  
Antiguo 26/05/2009, 05:45
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Columna de imagenes desalineada...

Ok, entonces nada. Las imágenes son todas del mismo tamaño? o cada una tiene una anchura diferente? por que si es así te quedarán un poco movidas.
__________________
No diseñes usando tablas.
  #5 (permalink)  
Antiguo 26/05/2009, 05:51
 
Fecha de Ingreso: septiembre-2003
Mensajes: 70
Antigüedad: 14 años, 2 meses
Puntos: 1
Respuesta: Columna de imagenes desalineada...

A ver, el código completo es este:

Código:
<table class="ordenar" width="560" border="0" cellpadding="3" cellspacing="0">
<tr>
	<td width="150"></td>
    <td width="120"></td>
    <td width="150"></td>
    <td width="50"></td>
    <td width="70"></td>
</tr>
<?php
$id=$datos['id'];
?>
	
      <tr class="menu">
              <td><?php echo $datos['grupo']; ?></td>
              <td><img src="../files/<? echo $datos['portada'] ?>"  width="120" height="120" border="0" /></td>
              <?php echo "<td><a href='reviewsv2.php?id=".$id."'>".$datos['album'] ."</a></td>";?>
              <td><?php echo $datos['rate'] ?></td>
              <td><?php echo $datos['fecha']; ?></td>
      </tr>
</table>
<? } ?>
Todas las portadas estás redimensionadas de la original a 120x120. Las originales se encuentran en la review del disco, a las que se pueden acceder a traves del nombre del cd en cuestión.
__________________
Salu2
  #6 (permalink)  
Antiguo 26/05/2009, 05:59
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Columna de imagenes desalineada...

Pues acabo de medirlas y he visto que todas encaja, de todas formas no podrías ahcer una clase para ellas?
__________________
No diseñes usando tablas.
  #7 (permalink)  
Antiguo 26/05/2009, 06:12
 
Fecha de Ingreso: septiembre-2003
Mensajes: 70
Antigüedad: 14 años, 2 meses
Puntos: 1
Respuesta: Columna de imagenes desalineada...

Mmmm, he estado probando con varias diferentes y ninguna da resultado (vertical-align, float, height, width, min/max... lo que sea, position...)

¿Alguna idea?
__________________
Salu2
  #8 (permalink)  
Antiguo 26/05/2009, 12:12
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Columna de imagenes desalineada...

Pues ya no se que hacer, no tendrán algunas un borde o algo y por eso quedan "descentradas"?
__________________
No diseñes usando tablas.
  #9 (permalink)  
Antiguo 26/05/2009, 12:54
 
Fecha de Ingreso: septiembre-2003
Mensajes: 70
Antigüedad: 14 años, 2 meses
Puntos: 1
Respuesta: Columna de imagenes desalineada...

No tendría nada que ver, aunque las imagenes tuvieran un borde serían redimensionadas igualmente a 120x120. Si te refieres a un borde mediante html, nop, no tienen ninguno.

Pues será un misterio, pq yo estoy sin ideas también.
__________________
Salu2
  #10 (permalink)  
Antiguo 26/05/2009, 14:08
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Columna de imagenes desalineada...

Prueba a modificar el texto que tienes a la derecha de la imagen. Verás el movimiento de la carátula.
¿Por qué? no lo he investigado, anda algo liado con tantas tablas y estilos genéricos el código que has heredado.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #11 (permalink)  
Antiguo 26/05/2009, 14:54
 
Fecha de Ingreso: septiembre-2003
Mensajes: 70
Antigüedad: 14 años, 2 meses
Puntos: 1
Respuesta: Columna de imagenes desalineada...

No tiene ningún sentido... ya haga el texto más grande, más pequeño, modifique el width de la tabla o de las columnas, cambie las clases de cualquiera de los elementos que puedan modificar la tabla... las imagenes siguen haciendo lo mismo, y asistemáticamente. O sea, en una pagina es la sexta, la octava, y decimotercera, y en la siguiente página es la cuarta, la novena y decimoprimera siendo el mismo código.
__________________
Salu2
  #12 (permalink)  
Antiguo 26/05/2009, 17:35
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Columna de imagenes desalineada...

Si coges cualquiera de tus tablas y le pones un borde (border="1"), verás lo que ocurre: si una tabla no tiene el tamaño fijado, aunque indiques el ancho de cada celda, éstas se irán adaptando al contenido, por lo que a mayor o menor texto en la primera celda, por ejemplo, ésta va creciendo y por tanto recortando el tamaño de las demás.

Prueba a ponerle a esa tabla table-layout="fixed" y se resolverá, porque impide que la tabla se redibuje adaptándose automáticamente al tamaño del contenido.

Podrías añadirlo de forma genérica a la clase .ordenar

Última edición por Mikmoro; 26/05/2009 a las 17:41
  #13 (permalink)  
Antiguo 27/05/2009, 03:22
 
Fecha de Ingreso: septiembre-2003
Mensajes: 70
Antigüedad: 14 años, 2 meses
Puntos: 1
Respuesta: Columna de imagenes desalineada...

¡Gracias Mikmoro!. Era eso, le he añadido table-layout="fixed" de forma genérica a la clase .ordenar y resuelto!.
__________________
Salu2
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 12:09.