Div e Slideshow

seifer

Div e Slideshow

Ciao a tutti
Ho creato una pagina in cui ci sono dei div e una tabella a 3 colonne, nella cella centrale della tabella c'è un div dove c'è lo slideshow, nelle celle a sinistra e a destra dello slide ci sono due immagini. Quello che non riesco a capire è perchè si ridimensiona verticalmente ma non orizzontalmente.

Ho rpvato a rifare tutta la pagina cambiando qualcosina e ora si ridimensiona orizzontalmente (ma non verticalmente) ma quando rimpicciolisco la finestra lo slide mi va a coprire l'immagine che sta alla sua sinistra, potete aiutarmi? Grazie

Questo è il codice della prima prova (quello che si ridimensiona solo verticalmente):

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css">
.slideshow {
height: 650px;
width: 850px;
margin: auto;
margin-top: 0px;
}
.slideshow img {
border: 0;
background-color: #000;
}
body {
background-color: #222;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#contenitore {
position:relative;
left:0;
top:0;
width:100%;
height:100%;
z-index:0;
}
#base {
position:absolute;
width:1059px;
height:650px;
background-color:;
margin-top: 7%;
left: 467px;
z-index: 2;
}
#box {
position:absolute;
left:0px;
width:100%;
height:650px;
background-color:;
margin-top: 7%;
}
</style>

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="js/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>
</head>
<body>
<div id="contenitore"></div>
<div id="base">
<table width="1059" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="57"><img src="images/logo-prova.gif" width="57" height="638" align="left" /></td>
<td width="800"><div class="slideshow"> <img src="gallery/album1/large/img1.jpg" width="850" height="650" /> <img src="gallery/album1/large/img2.jpg" width="850" height="650" /> <img src="gallery/album1/large/img3.jpg" width="850" height="650" /> <img src="gallery/album1/large/img4.jpg" width="850" height="650" /> </div></td>
<td width="152"><img src="images/menu-prova.gif" width="152" height="650" align="right" /></td>
</tr>
</table>
</div>
<div id="box"></div>
</body>
</html>

Questo è il codice della seconda prova (si ridimensiona orizzontalmente ma copre l'immagine):

<head>

</div>
</body>
</html>