foto ben allineate in una tabella

[Tristal]

Salve a tutti!!

Qualcuno sa dirmi perchè nell'esempio che segue la tabella non mi allinea le foto?

http://www.ebol.it/test/prova5/default.html

il fuxia e il giallo perchè non si allineano? Eppure l'interno di ogni cella l'ho allineata a sinistra e in alto come opzione...

[Vincent.Zeno]

io le vedo allineate. tu cosa intendi?

[Tristal]

deve risultare un rettangolo alla fine... il fuxia e il giallo non li vedi un po' piu' in basso?

[Vincent.Zeno]

li vedo allineati in alto ma, essendo di dimensioni diverse dal primo a sn, non possono esserlo in basso

[vitren54]

Ciao

Se bordi le celle ti rendi conto di quello che succede, le foto più lunghe fanno aumentare l'altezza delle celle anche se contengono foto più piccole, se è quello che intendevi...

tabella bordata

[Tristal]

Ecco infatti vitren54, è quello che intendo...non si puo' risolvere in qualche modo? Ho bisogno di quel tipo di schema perchè nel mio sito al posto dei colori devo mettere delle foto, e deve risultare un rettangolo alla fine, non una foto sopra e una sotto...


ecco l'esempio

http://www.ebol.it/test/prova5/esempio.jpg

[vitren54]

Ciao

prova con questo codice, in pratica si tratta di due livelli sovrapposti.

Il primo contiene una tabella con le foto allineate in alto e il secondo con le foto allineate in basso.

Mi dà un piccolo spostamento della foto in basso a destra ma dipende dal fatto che nel livello inferiore la cella vicina è vuota (puo riempirla con un'immagine trasparente larga 260 px).

Insomma è un po' da adattare, se ti funziona provalo con diversi browser.

</p>


</p>
<div id="layer1" style="width:1100px; height:500px; position:absolute; left:90px; top:30px; z-index:2;">
    <table border="1" cellspacing="0" width="1100" bordercolordark="white" bordercolorlight="black">
        <tr>
            <td width="260" valign="top">
                

[img]foto1p.jpg[/img]</p>
            </td>
            <td width="200" valign="top">
                

[img]foto3p.jpg[/img]</p>
            </td>
            <td width="200" valign="top">
                

[img]foto4p.jpg[/img]</p>
            </td>
            <td width="260">
                

[img]foto6p.jpg[/img]</p>
            </td>
            <td width="180" valign="top">
                

[img]foto7p.jpg[/img]</p>
            </td>
        </tr>
    </table>
    

</p>
</div>
<div id="layer2" style="width:1100px; height:258px; position:absolute; left:90px; top:271px; z-index:0;">
    <table border="1" cellspacing="0" width="1100" bordercolor="white" bordercolordark="white" bordercolorlight="black">
        <tr>
            <td width="260" valign="bottom">
                

[img]foto2p.jpg[/img]</p>
            </td>
            <td width="400" valign="bottom">
                

[img]foto5p.jpg[/img]</p>
            </td>
            <td width="260">
                

</p>
            </td>
            <td width="180" valign="bottom">
                

[img]foto8p.jpg[/img]</p>
            </td>
        </tr>
    </table>
    

</p>
</div>

[Tristal]

potrebbe essere una soluzione, va ben adattata... oppure risolvo dando la stessa alle foto di sopra e stessa altezza alle foto di sotto...

http://www.ebol.it/test/prova5/esempio2.jpg

[Vincent.Zeno]

non conosco le caratteristiche che deve avere la faccenda...
forse conviene, se vuoi sfasare, usare 4 div affiancati e regolare poi il contenuto come serve

[vitren54]

Originariamente inviato da Tristal
potrebbe essere una soluzione, va ben adattata... oppure risolvo dando la stessa alle foto di sopra e stessa altezza alle foto di sotto...

Anche questa è una soluzione...
Comunque hai provato ad usare il codice postato? dovrebbe funzionare da subito.

Ciao