Re dimensionar table para que se vea bien una imagen

[diego007]

Tengo una galería de imagenes y mi problemaes el siguiente:
Cuando tengo imágenes largas, estas se topan con la parte inferior del footer donde esta el "Copyright © 2013"
Como puedo hacer para que automáticamente el table se re dimensione en la parte inferior para que no tope con el mismo y permita ver bien las imágenes.

Código HTML:

<script type='text/javascript'>
var gal = {
init : function() {
if (!document.getElementById || !document.createElement || !document.appendChild) return false;
if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal';
var li = document.getElementById('jgal').getElementsByTagName('li');
li[0].className = 'active';
for (i=0; i<li.length; i++) {
li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')';
li[i].title = li[i].getElementsByTagName('img')[0].alt;
gal.addEvent(li[i],'click',function() {
var im = document.getElementById('jgal').getElementsByTagName('li');
for (j=0; j<im.length; j++) {
im[j].className = '';
}
this.className = 'active';
});
}
},
addEvent : function(obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn, false);
}
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent("on"+type, obj[type+fn]);
}
}
}
gal.addEvent(window,'load', function() {
gal.init();
});
</script>
<style type='text/css'>
#jgal { list-style: none; width: 200px; } 
#jgal li { opacity: .5; float: left; display: block; width: 60px; height: 60px; background-size: cover; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 14px; margin-bottom: 14px; }
#jgal li img { position: absolute; top: 20px; left: 200px; display: none; }
#jgal li.active img { display: block; }
#jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99 /* safari bug */ }

/* styling without javascript */
#gallery { list-style: none; display: block; }
#gallery li { float: left; margin: 0 10px 10px 0; }
</style> 

Código PHP:

 <table style="background:#ffffff; width: 1000px; height:0px; position: relative; margin-left: auto; margin-right: auto; 
-moz-border-radius: 5px; -webkit-border-radius: 5px;  behavior:url(border-radius.htc);"> 
<tr><td> 
<ul id="gallery"> 
<?php 
    $query=sprintf("SELECT * FROM imagen WHERE anuncio = '%s' ", mysql_real_escape_string($codigo)); 
    $result = mysql_query($query, $con);  
    while($row1 = mysql_fetch_array($result)) 
    { 
        $foto = $row1['foto']; 
        echo "<li><a href=\"fotos/$foto\" rel=\"lightbox[roadtrip]\"><img src=\"fotos/$foto\" alt=\"$foto\"></a></li>"; 
    } 
 
 
?> 
</ul> 
</td></tr> 
</table> 
<table style="background:#D8D8D8; width: 1000px; height:0px; position: relative; margin-left: auto; margin-right: auto; 
-moz-border-radius: 5px; -webkit-border-radius: 5px;  behavior:url(border-radius.htc);"> 
<tr><td> 
        <p class="footer" align="center">Copyright © 2013</p> 
</td></tr> 
</table>  

[quinqui]

Holas, diego007.

Por cosa de tiempo, no puedo leer todo el código que colocas, pero según lo que preguntas, podrías intentar colocar un elemento entre la tabla y el footer, que tenga el estilo clear:both, de modo que haga de quiebre entre tus imágenes y el pie de página.

Código HTML:

<!-- tus imágenes -->
<table>...</table>
<!-- el quiebre -->
<div style="clear:both"></div>
<!-- el footer -->
<table>...</table> 

Saludos!

[diego007]

Hola quinqui, no me funciono tu idea :(

[quinqui]

Mmh, tal parece que tienes declaradas las imágenes con posición absoluta... Prueba asignarle posición relativa al contenedor de las imágenes, de modo que lo absoluto sea contra el contenedor y no contra toda la página...

Saludos!

[diego007]

:( con position:relative; las imágenes ya no se alinean a la parte superior del table. ahora se alinean a la altura de los thumbnail que se muestran de 2 en 2 en la parte izquierda.

[quinqui]

El position:relative es para el contenedor de las imágenes, no para las imágenes ¿lo hiciste así? En tu caso, me parece que el contenedor es el UL, no?
De cualquier forma es para probar, porque esto te lo sugiero desde la segura teoría de mi cabeza, de pronto en la práctica no funciona Oo....

Saludos!

[diego007]

he estado haciendo combinaciones poniendole al table, td, tr, li, ul, etc y nada, el footer asoma en medio de las imagenes

[quinqui]

Sí me ha pasado eso, de hecho todavía tengo un sitio con ese fallo sin arreglar xD jejeje... Pero la solución podría ser una de dos:

a) Colocarle el elemento que genere el quiebre entre la tabla de las fotos y la tabla del footer, como te lo expuse en mi primer post. Lo que podrías hacer para que funcionara sería hacer algo como esto:

Código HTML:

<!-- tus imágenes -->
<div>
 <table>...</table>
</div>

<!-- el quiebre -->
<div style="clear:both"></div>

<!-- el footer -->
<div>
 <table>...</table> 
</div> 

b) Que no uses el UL y el LI para generar la galería, sino aprovechar realmente la tabla, pues siendo una tabla con posibilidad de crearle filas y columnas, estás llenando una sola celda, cuando para eso podrías simplemente usar un DIV. Si aprovechas las celdas de la tabla, éstas se ajustan automáticamente al contenido.

Espero haberte aportado algo. Saludos!

[pzin]

diego007 no uses tablas para estructurar tu sitio. Las tablas no están hechas para eso sino para mostrar datos tabulados.

[diego007]

Hola quinqui y pzin, gracias por sus respuestas
Cambie el contenido de los table a div, pero sigue el problema. En teoría yo también pensé que clear:both debería hacer el quiebre entre los dos dov o table, pero en mi caso no funciona.

Por si acaso hay algún contenedor para ul y li? algo asi como FIELDSET pero que actué a nivel de estos dos?
PS pzin, termine de estructurar la pagina con div, pero tengo el mismo problema y ademas, tengo una montonera de puntos negros creados por el div que no se como eliminar :)

[madman_18]

Yo lo que haría de estructura es:
- Un contenedor, que engloba tanto las miniaturas como la foto vista en grande.
- Las miniaturas metería un <div> con float izquierda y dentro un <ul><li></li></ul> para las fotografías.
- Las fotos en tamaño más grande con un div que flote a la derecha y ahí la imagen.
- Luego pondría un clear:both (podrías poner un div para que se encarge de ello, yo siempre lo genero y simplemente aplicandole la clase ya se que me va a hacer el clear).
- Al poner el clear, justo debajo pondría el footer.

No sé si tendrás algo parecido a eso ahora que ya no usas tablas ( ), si no, podrías probarlo y ya nos comentas