[Resolu] Z-index pour un slideshow

Bonjour,

Je suis un peu embêté, je fais un slideshow et les onglets sur le côté dépassent lorsque l'on fait un hover (c'est le but recherché) sur l'intérieur du slideshow. Mais ça pousse le contenu de celui-ci vers la droite. Hors j'aimerai que l'onglet sélectionné se mette sur le slideshow sans décaler son contenu.

J'ai direct pensé à un z-index. Mais je ne m'en sort pas (malgré la lecture d'un tuto de ce site)

il faut bien mettre un z-index plus grand pour l'onglet et mettre une position à chaque élément ?
Modifié par gorn (13 Sep 2011 - 10:42)

Salut,

On a sans doute de très bonnes capacités de voyance, mais on préfère quand même un peu de code, ou mieux, une page en ligne de ton problème.

je ne peux mettre la page en ligne mais finalement j'ai recouru à une autre solution (un padding pour le contenu du slideshow.

Je suis bien d'accord que sans code c'est difficile de donner une aide, mais c'était plus pour un conseil d'ordre général. S'il y avait une faute classique qui revenait souvent sur ce genre de cas.

Ton problème est quand même vachement spécifique et non général.

Bonjour,

Seuls les éléments positionnés peuvent avoir un z-index, c'est, il me semble, l'erreur la plus récurrente.

Cordialement,
Sylvain

* Il me semblait bien qu'il y avait une astuce dans le coin :
Comment fonctionne la propriété CSS z-index ? by fvsch
Modifié par 6l20 (13 Sep 2011 - 10:33)

bon ben je reviens vers vous avec un peu de code car je n'y arrive pas =/
et je ne comprends pas mon erreur :

au niveau du html :

<!-- Partie 1 - le choix de rubriques -->
				<div id="content_slideshow">
					<div id="slideshow">
						<ul id="menu_slideshow">
							<li id="actualites">Actualité</li>
							<li id="vousetes" >Vous êtes :</li>
							<li id="particuliers">Particuliers</li>
							<li id="professionnels">Professionnels</li>
							<li id="collectivites">collectivités</li>
							<li id="prescripteurs">Prescripteurs</li>
							<li id="offre7">Offre 7</li>
						</ul>
						<div id="interieur_slideshow">
							<!-- Slide 1 -->
							<div id="slide1" class="slide">
								SLIDE 1
							</div>
							<!-- Slide 2 -->
							<div id="slide2" class="slide">
								SLIDE 2
							</div>
							<!-- Slide 3 -->
							<div id="slide3" class="slide">
								SLIDE 3
							</div>
							<!-- Slide 4 -->
							<div id="slide4" class="slide">
								SLIDE 4
							</div>
							<!-- Slide 5 -->
							<div id="slide5" class="slide">
								SLIDE 5
							</div>
							<!-- Slide 6 -->
							<div id="slide6" class="slide">
								SLIDE 6
							</div>
							<!-- Slide 7 -->
							<div id="slide7" class="slide">
								SLIDE 7
							</div>
						</div>
					</div>

au niveau du css :

/*---------------------------------------------------------------------------*/
/* Partie 1 - le choix de rubriques */
/*---------------------------------------------------------------------------*/

/*      Slideshow        */

#content_slideshow {
	float: left;
	width: 755px;
	height: 330px;
}

#menu_slideshow {
	width: 200px;
	padding-left: 0;
}

#menu_slideshow li {
	float: left;
	width: 180px;
	height: 44px;
	line-height: 44px;
	list-style: none;
	background: url(../images/onglet_bordure.png) no-repeat center bottom;
}

.slide {
        position: relative;
        z-index: 1;
	margin-left: 180px;
	padding-left: 20px;
	width: 500px;
	height: 308px;
	background-color: red; 
}

.active {
        position: relative;
        z-index: 2;
	padding-left: 15px;
	width: 200px !important;
	line-height: 44px;
	color: #fff !important;
	background: url(../images/onglet_hover.png) no-repeat !important;
}

.select {
        position: relative;
        z-index: 2;
	padding-left: 15px;
	width: 200px !important;
	line-height: 44px;
	color: #fff !important;
	background: url(../images/onglet_hover.png) no-repeat !important;
}

est ce qu'a vue de nez vous voyez une énormité de ma part ?

ah ben j'ai trouvé !
la slide qui ne bouge pas et donc reste en dessous devait être en position: absolute;

Ah bon ?...