28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Je suis en train de mettre en place une vitrine avec un design vertical (Menu vertical a droite et transitions CSS3 des slides de haut en bas et vice versa) mais sans barre de scroll avec le framework Sequence.js (http://www.sequencejs.com/).

Cependant j'ai un problème, après avoir mis en place mes transitions entre slides la barre de scroll apparait a droite sans qu'aucun élément ne déborde pour autant (j'ai vérifié les outils de Chrome) et j'ai donc un espace blanc sous mon background et mon contenu qui n'est occupé par absolument rien.

voici comment est formatté mon code HTML :

	
<div id="sequence-theme">
		<div id="sequence">
			<ul>
				<li class="animate-in">
					<div class="info info1">
                                             <!-- Contenu -->
                                        </div>
                                </li>
                                <li>
                                        <div class="info info2">
                                        </div>
                                </li>
                       </ul>
               </div>
</div>


Par exemple ci dessus ça correspond a deux slides (je vous ai épargné le menu, le problème ne vient tres certainement pas de la)

Et voici mon CSS qui correspond a mes transitions de slides :

#sequence-theme #sequence li .info {
  top: 70%;
  opacity: 0;
  height: 75%;
  width: 100%;
}

#sequence-theme #sequence .animate-in .info {
  top: 25%;
  opacity: 1;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -ms-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition-duration: 0.5s;
}

#sequence-theme #sequence .animate-out .info {
  top: 0%;
  opacity: 0;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -ms-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition-duration: 0.5s;
}


Alors le problème vient très surement de la descente de la slide et Chrome oublie de masquer l'espace une fois la slide a sa place. Mais j'aimerais savoir si il y a moyen de contourner ce problème qui est très agaçant.

Merci d'avance pour vos réponses
Modifié par cocoggu (04 Feb 2013 - 11:10)
Tu aurais pas un exemple en ligne ou un code plus complet, car j'arrive pas à reproduire ton problème
Merci pour ta réponse mais c'est bon j'ai trouvé un autre moyen même si c'est pas exactement ce que je voulais :

J'ai changé le top 70% en

#sequence-theme #sequence li .info {
  top: 25%;
  opacity: 0;
  height: 75%;
  width: 100%;
}


De cette manière la prochaine slide arrive seulement en fondu et pas en translation.