18041 sujets

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

[résolu] - Slider et contenu étirable

Bonjour à tous !

Je débute en webdesign (original, je sais…) et je commence à monter un site pour présenter mes travaux graphiques.

Je rencontre un problème que je n'arrive pas à résoudre et j'espère que la communauté pourra m'aider.

Voilà, je souhaite intégrer un slider tout simple sur la page d'accueil du site.

Seulement voilà, je voudrais que le slider soit d'une certaine façon extensible et qu'il occupe 100% en largeur de la fenêtre du navigateur ET que le contenu, les images soient toujours centrées par rapport au slider.

Les images dans le slider ont une dimension de 1919 x 611 pixels.

Jusqu'ici tout va bien, le plugin jQuery récupéré s'étire sur toute la largeur du navigateur, mais lorsque je réduis la fenêtre en largeur, les images du slider ne suivent pas.

Je ne trouve pas de solution à ceci. Pourriez-vous m'aider à faire en sorte que les images du slider restent toujours centrées ?

Merci par avance pour votre aide !

L'adresse du plugin jQuery : http://rhinoslider.com/demo-download/

Le code : 

<body>

<!-- This is the background image -->
	<img id="background" src="../../images/fond_spatial.jpg" / alt="">
    
<div id="general">

	<div id="header">
	</div>

	<section id="top_main">
    	<header id="top_name">
        	<h1>Nom Prénom</h1>
        </header>

    
      <h1 id="top_title">Le titre principal</h1>
      <h2 id="subtitle">Le sous-titre / baseline</h2>
    
   <!-- <nav>
    	<p><a href="#">menu01</a><a href="#">menu02</a><a href="#">menu03</a></p>
    </nav> -->

</section>

<div id="page">
			<ul id="slider">
				<li><img src="../../images/test-01.jpg" alt="" /></li>
				<li><img src="../../images/test-02.jpg" alt="" /></li>
				<li><img src="../../images/test-03.jpg" alt="" /></li>
				<li><img src="../../images/test-04.jpg" alt="" /></li>
				<li><img src="../../images/test-05.jpg" alt="" /></li>
			</ul>
		</div>

<section>
  
</section>

<footer>
<p id="credits">Les crédits et mentions complémentaires</p>
</footer>

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


Le bout de css du slider :


		
#slider {
	width:100%;
	height:611px;
	
	/*IE bugfix*/
	padding:0;
	margin:0;
}

#slider li { list-style:none; }

#page {
	width:100%;
	margin:50px auto;
}

Modifié par Aessian (06 Jun 2013 - 11:05)
.edit

Je trouve peut-être une solution avec cette modification :


#slider {
	width:100%;
	height:611px;
	
	/*IE bugfix*/
	padding:0;
	margin:0;
}

#slider li { list-style:none; }

#page {
	width:1919px;
   height:700px;
   left:50%;
   margin:0 0 0 -959.5px; /* La moitié de la valeur de width */
   position:relative;
}


Ca m'a l'air un peu moche en fait…
Il y a t-il un moyen de transformer les pixels en pourcentage pour que ce soit plus "propre" ?

Quand je le fais ça ne donne rien.
salut,
tu pourrais commencer par virer les "width:100%" inutiles sur les <div> et les <ul>. Dans ton cas tu dois mettre les <li> en position relative et tes <img> en position absolue.

#slider li {position: relative}
#slider img {position: absolute; margin-left: -960px; left: 50%}
Merci de prendre le temps de m'aider, c'est bien sympa.

Je suis un peu perdu avec ce truc.

Bon j'ai modifié le code que voici, comme je ne suis pas sur de tout comprendre pourrais-tu y jeter un coup d'oeil et me dire si c'est bien ce dont tu parlais s'il te plait ?

Le code HTML ne change pas donc, et voici la modification sur le CSS :


/* Slider d'images */		
		
#slider {
	height:611px; /*ici la hauteur du slider*/
	/*IE bugfix*/
	padding:0;
	margin:0;
}

#slider li {
	position: relative;
}

#slider img {
	position: absolute; margin-left: -960px; left: 50%;
}

#page {
	width:1919px;
   	height:700px;
   	left:50%;
   	margin:0 0 0 -960px; /* La moitié de la valeur de width */
   	position:relative;
}


Merci encore !

/* Slider d'images */		
		
#slider {
	height:611px; /*ici la hauteur du slider*/
	/*IE bugfix*/
	padding:0;
	margin:0;
}

#slider li {
	overflow: hidden;
	position: relative;
	width: 100%;
}

#slider img {
	position: absolute; margin-left: -960px; left: 50%;
}

#page {
   	height:700px;
}

ça devrait le faire
ok, merci pour ton aide Zelalsan !

Je passe le post en résolu, ce que je cherche à faire fonctionne avec :

#slider {
	height:611px; /*ici la hauteur du slider*/
	/*IE bugfix*/
	padding:0;
	margin:0;
}

#slider li {
	position: relative;
}

#slider img {
	position: absolute; margin-left: -960px; left: 50%;
}

#page {
	width:1919px;
   	height:700px;
   	left:50%;
   	margin:0 0 0 -960px; /* La moitié de la valeur de width */
   	position:relative;
}


Mais impossible d'utiliser la dernière astuce.
Ca vient du slider en lui-même je pense. Il faudrait regarder de plus près son fonctionnement sur : http://rhinoslider.com

En tout cas, merci pour ton aide c'est super !

Je reviens très vite avec d'autres questions…
Sujet clos
Aller à