28172 sujets

CSS et mise en forme, CSS3

Problème de mise en forme slideshow et header

Bonjour, je me permets de vous demander votre aide car je suis bloqué.
Je suis en train de créer un site internet, et j'essaie d'introduire un slideshow mais ça bug...
Tout d'abord dans le slideshow, je n'arrive pas à faire apparaitre les flèches de navigation.
Et ensuite je n'arrive pas à mettre mon slideshow sur la même ligne que mon logo.
Meric d'avance.


<!doctype html>
<html lang="fr">

<head>

	<meta charset="utf-8">
	<meta name="author" content="Tintinak">
	<meta name="description" content="">
	<meta name="keywords" content="">
	<meta name="generator" content="">

	<title>Axel LERGA Surf School</title>

	<link rel="stylesheet" href="css/styles.css" type="text/css" media="screen">
	
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script src="jquery/script.js"></script>
	
</head>

<body>
	
	<header>
		<div id="logo">
			<img src="images/logo.jpg">
		</div>
		
		<div id="slideshow">

			<ul class="slides">
    			<li><img src="images/ban/1.jpg" width="752" height="250" alt="" /></li>
        		<li><img src="images/ban/2.jpg" width="752" height="250" alt="" /></li>
        		<li><img src="images/ban/3.jpg" width="752" height="250" alt="" /></li>	
    		</ul>

    		<span class="arrow previous"></span>
    		<span class="arrow next"></span>
    		
		</div>
	
	</header>
	
	<nav>
		<ul>
			<li>L'&eacute;cole:</li>
			<li>Nos formules</li>
			<li>Nous contacter</li>
			<li>Offres promotionnelles</li>
		</ul>
		
		<ul>
			<li>Liens utiles:</li>
			<li>Nos partenaires:</li>
		</ul>
	</nav>
	
	<section>
		<article>
	
		</article>
	</section>
	
	<aside>
	
	</aside>
	
	<footer>
	</footer>
	
</body>

</html>




*{
	margin:0;
	padding:0;
}

body{
	color:red;
	/*background:url('images/bg.jpg') repeat-x #0c0d10;*/
	font:13px "Lucida Sans Unicode",Arial,Helvetica,sans-serif;
	width:1044px;
}

header{
	width:1044px;
	position:absolute;
	height:270px;
	}

#logo{
	width:272px;
	height:270px;
	float:left;

	-moz-box-shadow:0 0 22px #111;
	-webkit-box-shadow:0 0 22px #111;
	box-shadow:0 0 22px #111;
	}
	
#slideshow{
	background-color:#F5F5F5;
	border:1px solid #FFFFFF;
	height:270px;
	/*margin:150px auto 0;*/
	position:relative;
	width:772px;
	float:right;
	
	-moz-box-shadow:0 0 22px #111;
	-webkit-box-shadow:0 0 22px #111;
	box-shadow:0 0 22px #111;
}

#slideshow ul{
	height:270px;
	left:10px;
	list-style:none outside none;
	overflow:hidden;
	position:relative;
	top:10px;
	width:772px;
}

#slideshow li{
	position:relative;
	display:none;
	z-index:10;
}

#slideshow li:first-child{
	display:block;
	z-index:1000;
}

#slideshow .slideActive{
	z-index:1000;
}

#slideshow canvas{
	display:none;
	position:relative;
	z-index:100;
}

#slideshow .arrow{
	height:86px;
	width:60px;
	position:absolute;
	background:url('images/arrows.png') no-repeat;
	top:50%;
	margin-top:-63px;
	cursor:pointer;
	z-index:5000;
}

#slideshow .previous{ background-position:left top;left:0;}
#slideshow .previous:hover{ background-position:left bottom;}

#slideshow .next{ background-position:right top;right:0;}
#slideshow .next:hover{ background-position:right bottom;}





$(window).load(function(){
	
	// We are listening to the window.load event, so we can be sure
	// that the images in the slideshow are loaded properly.


	// Testing wether the current browser supports the canvas element:
	var supportCanvas = 'getContext' in document.createElement('canvas');

	// The canvas manipulations of the images are CPU intensive,
	// this is why we are using setTimeout to make them asynchronous
	// and improve the responsiveness of the page.

	var slides = $('#slideshow li'),
		current = 0,
		slideshow = {width:0,height:0};

	setTimeout(function(){
		
		window.console && window.console.time && console.time('Generated In');
		
		if(supportCanvas){
			$('#slideshow img').each(function(){

				if(!slideshow.width){
					// Taking the dimensions of the first image:
					slideshow.width = this.width;
					slideshow.height = this.height;
				}
				
				// Rendering the modified versions of the images:
				createCanvasOverlay(this);
			});
		}
		
		window.console && window.console.timeEnd && console.timeEnd('Generated In');
		
		$('#slideshow .arrow').click(function(){
			var li			= slides.eq(current),
				canvas		= li.find('canvas'),
				nextIndex	= 0;

			// Depending on whether this is the next or previous
			// arrow, calculate the index of the next slide accordingly.
			
			if($(this).hasClass('next')){
				nextIndex = current >= slides.length-1 ? 0 : current+1;
			}
			else {
				nextIndex = current <= 0 ? slides.length-1 : current-1;
			}

			var next = slides.eq(nextIndex);
			
			if(supportCanvas){

				// This browser supports canvas, fade it into view:

				canvas.fadeIn(function(){
					
					// Show the next slide below the current one:
					next.show();
					current = nextIndex;
					
					// Fade the current slide out of view:
					li.fadeOut(function(){
						li.removeClass('slideActive');
						canvas.hide();
						next.addClass('slideActive');
					});
				});
			}
			else {
				
				// This browser does not support canvas.
				// Use the plain version of the slideshow.
				
				current=nextIndex;
				next.addClass('slideActive').show();
				li.removeClass('slideActive').hide();
			}
		});
		
	},100);

	// This function takes an image and renders
	// a version of it similar to the Overlay blending
	// mode in Photoshop.
	
	function createCanvasOverlay(image){

		var canvas			= document.createElement('canvas'),
			canvasContext	= canvas.getContext("2d");
		
		// Make it the same size as the image
		canvas.width = slideshow.width;
		canvas.height = slideshow.height;
		
		// Drawing the default version of the image on the canvas:
		canvasContext.drawImage(image,0,0);
		

		// Taking the image data and storing it in the imageData array:
		var imageData	= canvasContext.getImageData(0,0,canvas.width,canvas.height),
			data		= imageData.data;
		
		// Loop through all the pixels in the imageData array, and modify
		// the red, green, and blue color values.
		
		for(var i = 0,z=data.length;i<z;i++){
			
			// The values for red, green and blue are consecutive elements
			// in the imageData array. We modify the three of them at once:
			
			data[i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));
			data[++i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));
			data[++i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));
			
			// After the RGB elements is the alpha value, but we leave it the same.
			++i;
		}
		
		// Putting the modified imageData back to the canvas.
		canvasContext.putImageData(imageData,0,0);
		
		// Inserting the canvas in the DOM, before the image:
		image.parentNode.insertBefore(canvas,image);
	}
	
});
[/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i]
Modifié par tintin_btz (15 Feb 2013 - 15:02)
Sujet clos
Aller à