» Div e Slideshow

seifer · 18-01-12, 11:21

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: #000;
margin-top: 7%;
left: 467px;
z-index: 2;
}
#box {
position:absolute;
left:0px;
width:100%;
height:650px;
background-color: #000;
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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css">
.slideshow {
height: 650px;
width: 940px;
margin: auto;
margin-top: 117px;
}
.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;
top:67px;
width:100%;
height:650px;
background-color: #000;
margin-top: 50px;
}
</style>

<script type="text/javascript"

<script type="text/javascript"
<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"> </td>
<td width="152"><img src="images/menu-prova.gif" width="152" height="650" align="right" /></td>
</tr>
</table>
</div>
<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>
</body>
</html>

18-01-12, 11:21	#1 (permalink)
seifer User Data di registrazione: Nov 2011 Ubicazione: bergamo Messaggi: 11	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: #000; margin-top: 7%; left: 467px; z-index: 2; } #box { position:absolute; left:0px; width:100%; height:650px; background-color: #000; margin-top: 7%; } </style> <!-- include jQuery library --> <script type="text/javascript" src="js/jquery.min.js"></script> <!-- include Cycle plugin --> <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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Documento senza titolo</title> <style type="text/css"> .slideshow { height: 650px; width: 940px; margin: auto; margin-top: 117px; } .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; top:67px; width:100%; height:650px; background-color: #000; margin-top: 50px; } </style> <!-- include jQuery library --> <script type="text/javascript" <!-- include Cycle plugin --> <script type="text/javascript" <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"> </td> <td width="152"><img src="images/menu-prova.gif" width="152" height="650" align="right" /></td> </tr> </table> </div> <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> </body> </html>

Condividi questo contenuto nei Social Network:		Tweet
Ti stiamo aspettando: Registrati subito e gratis. Entra a far parte di una delle comunità più attive in Italia. Se hai dimenticato i tuoi dati li puoi recuperare subito.

Strumenti di discussione
Visualizza la versione stampabile Invia la pagina tramite email