Salve ragazzi, mi sono nuovamente inceppato in un problema, ho 10 immagini e dovrei collocarle in una tabella di 5 immagini e altre 5... ._. ma il mio attuale codice mi da errore...
Questo è come dovrebbe venire:
TAB.jpg
Invece con questo codice mi viene solo la prima riga sopra
sono depresso ormai:
HTML e CSS (nell'head):
codice HTML:
<!doctype html><html><head><style>table{ border-spacing:0}
body,table,th,td,body,html{ height:100%; margin:0; padding:0; border:2;}
table,th,td,button{ background-repeat:no-repeat; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover;}
table{ width:100%; table-layout:fixed;}
#btC, #btP, #btA {border: 0;}
#btC{ outline:none; width: 33.3%; height: 100%;left: 0; top:0; background-color:transparent; background-repeat:no-repeat; background-position:center; background-position: top; position: fixed; z-index:2;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}
#btP{ outline:none; width: 33.3%; height: 100%;left:33.3%; top:0; background-color:transparent; background-repeat:no-repeat; background-position:center; background-position: top; position: fixed; z-index:2;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}
#btA{ outline:none; width: 33.3%; height: 100%;right:0; top:0; background-color:transparent; background-repeat:no-repeat; background-position:center; background-position: top; position: fixed; z-index:2;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}
.u1{ background-position:center; background-image:url(Capri.jpg); -webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;; }
.u1:hover { background-position:center; background-image:url(Amalfi.jpg); -webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}
.u2{ background-position:center; background-image:url(Positano.jpg); -webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}
.u2:hover { background-position:center; background-image:url(Amalfi.jpg); -webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}
.u3{ background-position:center; background-image:url(Amalfi.jpg); -webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}
.u3:hover { background-position:center; background-image:url(Capri.jpg); -webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}
.testo{ width:100%; height:50px; text-transform:uppercase; text-align:center; line-height:50px;}
.t1{ background-color:#70E8F6;}
.t2{ background-color:#F29DC4;}
.t3{ background-color:#FCBC74;}</style><meta charset="utf-8"><title>Documento senza titolo</title></head>
<body><table> <tbody> <tr> <td background="Procida.jpg"> </td> <td background="Procida.jpg"> </td> <td background="Procida.jpg"> </td> <td background="Procida.jpg"> </td> <td background="Procida.jpg"> </td> </tr> <tr> <td background="Procida.jpg"> </td> <td background="Procida.jpg"> </td> <td background="Procida.jpg"> </td> <td background="Procida.jpg"> </td> <td background="Procida.jpg"> </td> </tr> </tbody></table></body></html>
P.s.: ho inserito la stessa immagine solo per vedere se riuscivo ad allinearle ma senza successo