18041 sujets

Questions générales et questions de débutants

Problème d'insertion d'un slide dans une page html

Bonjour à tous,
J'essaie depuis plusieurs jours d'intégrer un slide qui vient de Tiny Carousel à ma page html. Lorsque je créé le slide sur une page html vierge, il n'y a pas de problèmes - j'arrive à le faire fonctionner et à le visualiser.
Par contre, dès que j'essaie de l'intégrer dans ma page html, rien à faire, il semble "caché" quelque part...

Je dois préciser que pour faire mon site, j'ai utilisé photoshop et j'ai ensuite coupé mon visuel avec imageready (je sais, ce n'est pas très joli pour les puristes Smiley decu mais je viens du graphisme, alors j'apprends doucement...)
*
Bref...

Quelqu'un peut-il me dire s'il voit où se trouve le problème - je galère depuis plusieurs jours déjà...
Je mets tout le code, mais le problème se trouve bien sur au niveau du SLIDE. J'ai donc deux feuilles de style une pour la page et le menu (Hugo.css) et une pour le silde (slide.css)
J'ai également mis les fichiers .js dans le dossier js (je ne mets pas les codes, puisqu'ils fonctionnent très bien par ailleurs...

Voici donc le code qui se trouve sur ma page htlm

<html>
<head>
<title>Titre de ma page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

	
<link rel="stylesheet" type="text/css" media="all" href="css/hugo.css"/>
<link rel="stylesheet" href="css/slide.css" type="text/css" media="screen"/>

/* MENU */ 
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
 
    $(document).ready(function() {
     
        //Set the even row to different color
        $('ul#menu li:even').addClass('even');
         
        //configure the animations
        $('ul#menu li a').mouseover(function() {
         
            $(this).animate( { paddingLeft:"20px" }, { queue:false, duration:500 } );
        }).mouseout(function() {
            $(this).animate( { paddingLeft:"0" }, { queue:true, duration:500 } )
        }).click(function() {
            $(this).animate( { fontSize:"20px" }, { queue:false, duration:500 } )
        });
             
    });  
       
</script>

/* POLICE ARNO PRO */

<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/ArnoPro_400-ArnoPro_700-ArnoPro_italic_400-ArnoPro_italic_700.font.js" type="text/javascript"></script>


	<script type="text/javascript">
	Cufon.replace('#menu', {
	hover: true
	});
	</script>

/* SLIDE */

	<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="js/jquery.tinycarousel.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$('#slider1').tinycarousel();	
		});
		</script>

</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="page">

	<table width="1000" height="600" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
	<tr>
		<td rowspan="3"><img src="images/index_01.jpg" width="100" height="600" alt=""></td>
		<td colspan="2">
			<img src="images/header.jpg" width="800" height="150" alt=""></td>
		<td rowspan="3">
			<img src="images/index_03.jpg" width="100" height="600" alt=""></td>
	</tr>
	<tr>
		<td height="350" width="121" valign="top" bgcolor="#3a3637">
		<p >
		<div id="menu">
			<ul id="menu">
    <li><a href="blank1.html">Acceuil</a></li>
    <li><a href="blank1.html">Présentation</a></li>
    <li><a href="blank1.html">Fauteuils</a></li>
    <li><a href="blank1.html">Commodes</a></li>
    <li><a href="blank1.html">Bureaux</a></li>
    <li><a href="blank1.html">Trumeaux</a></li>
	<li><a href="blank1.html">Divers</a></li>
    <li><a href="blank1.html">Plan d'accès</a></li>
    <li><a href="blank1.html">Contact</a></li>
</ul></p>
		</div></td>
	  <td width="679" height="350">
	  <div id="slider1">
		<a class="buttons prev" href="#">left</a>
		<div class="viewport">
			<ul class="overview">
				<li><img src="images/slide/001.jpg" /></li>
				<li><img src="images/slide/002.jpg" /></li>
				<li><img src="images/slide/003.jpg" /></li>									
				<li><img src="images/slide/004.jpg" /></li>
				<li><img src="images/slide/005.jpg" /></li>
				<li><img src="images/slide/006.jpg" /></li>
				<li><img src="images/slide/007.jpg" /></li>
				<li><img src="images/slide/008.jpg" /></li>
				<li><img src="images/slide/009.jpg" /></li>
			</ul>
		</div>
		<a class="buttons next" href="#">right</a>
	</div>			
	  </td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="images/foot.jpg" width="800" height="100" alt=""></td>
	</tr>
	</table>

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



et ma feuille de style slide.css :



body {
	background-color: #3a3637;
}

/* Tiny Carousel */
#slider1 { 
	height: 1%; 
	overflow:hidden; 
	padding: 0 0 10px;   
	}
#slider1 .viewport { 
	float: left; 
	width: 650px; 
	height: 330px; 
	overflow: hidden; 
	position: relative; 
	}
#slider1 .buttons { 
	background:url("../images/buttons.png") no-repeat scroll 0 0 transparent; 
	display: block; 
	margin: 300px 0 0 0; 
	background-position: 0 -38px; 
	text-indent: -999em; 
	float: left; 
	width: 30px; 
	height: 37px; 
	overflow: hidden; 
	position: relative; 
	}
#slider1 .next { 
	background-position: 0 0; 
	margin: 300px 0 0 0px;  
	}
#slider1 .disable { 
	visibility: hidden; 
	}
#slider1 .overview { 
	list-style: none; 
	position: absolute; 
	padding: 0; 
	margin: 0; 
	width: 650px; 
	left: 0 top: 0; 
	}
#slider1 .overview li{ 
	float: left; 
	margin: 0 20px 0 0; 
	padding: 1px; 
	height: 326px; 
	width: 646px;
	}


Si vous avez besoin d'autres informations pour m'aider, n'hésitez pas à me contacter !

Merci beaucoup,
Caroline
Sujet clos
Aller à