<div id="slider">
	
		
			<div id="slider-window">
			
			<!--Fleche de gauche du slide-->
			<div id="prevSlide">
			<img src="fond/logo/gauche.jpg" alt="précédent"/>
			</div>
	
	
			<!--Image se trouvant au début du slide javascript(logo d'argences avec message de bienvenue-->
			<ul id="slides"> 
				<li class="slide"> 
					<img src="fond/logo_integ.png" class='img_slide' alt="Logo F.C. Argences"/> 
						<div class="slide-content"> 
							<h2 class='titre_slide'>Bienvenue : </h2>
								<br/>
								<br/>
								<span class='article_slide'>Bienvenue sur le site du F.C. Argences</span> 
									
						</div> 
				</li> 
		


<?php
//Connexion à la base pour récupérer les infos des prochains évenements
	include('cnx.php');

	$req_evenement = "SELECT *, DATE_FORMAT(date_evenement, '%d/%m/%y')AS date_formate FROM $table_5 WHERE date_evenement >= CURRENT_DATE()";
	
	$query_evenement = mysql_query($req_evenement);
	
	while($evenement= mysql_fetch_array($query_evenement))
	{
		$max = 100;  

			if (strlen($evenement['description']) >= $max)
			{
			$chaine = substr($evenement['description'], 0, $max);  
			$espace = strrpos($chaine, " ");  
			$chaine = substr($chaine, 0, $espace)."...";
?>

		<!--Affichage des différents évenements se trouvant dans la base de données et ne soyant pas arrivés à date-->
			<li class="slide">
				<img src="<?php echo $evenement['chemin_photo'];?>" class='img_slide' alt="Image de l'évenement"/>
					<div class="slide-content">
						<h2 class='titre_slide'><?php echo stripslashes($evenement['nom']);?> </h2>
						<span class='article_slide'><?php echo stripslashes($chaine);?>
							<a href='article_accueil.php?num_article=<?php echo $evenement['id'];?>' class='lien_slide'>(Lire la suite)</a></span>
							<!--<a class="lien_slide" href="#">Lire l'article</a>
								Photo : <a href="http://www.flickr.com/photos/papazimouris/" target="_blank">flickr</a>-->
					</div>
			</li>
		
		<?php
		}
		}
		 
		?>
		</ul>
		
	</div>
	<!--Fleche de droite du slide-->
	<div id="nextSlide">
		<img src="fond/logo/droite.jpg" alt="suivant"/>
	</div>
	
	
</div>

*	{
	margin-top:0;
	padding:0;
	}
	
.titre_slide
	{
	color:#FFF;
	border-bottom:1px solid #CC0;
	margin-bottom:10px;
	}
.article_slide
	{
	color:#F0F0F0;
	margin-bottom:10px;
	font-size: 14px;
	font-weight: bold;	
	}
	
.lien_slide
	{
	color:#CC0;
	}

#slider
	{
	width:560px;
	position:relative;
	margin-top: 2%;
	margin-left: 1%;
	float: left;
	}

#slider-window
	{
	
	border: white 2px solid;
	width:500px;
	height:333px;
	overflow:hidden;
	margin:0 auto;
	}

#prevSlide,#nextSlide
	{
	width:30px;
	height:50px;
	position:absolute;
	top:150px;
	cursor:pointer;
}
#prevSlide{left:0;}
#nextSlide{right:0;}

.slide
	{
	float:left;
	position:relative;
	list-style-type:none;
	width:500px;
	height:333px;
}
 
.slide-content
	{
	text-align: left;
	position:absolute;
	left:0;
	bottom:0;
	background:rgba(0,0,0,0.5);
	height:100px;
	width:480px;
	padding:10px;
}
 
.read-more{
	float:right;
}

.img_slide
	{
	width: 500px;
	height: 333px;
	}