28172 sujets

CSS et mise en forme, CSS3

Bonjour et merci d'avance pour votre aide.

<div id="content">
	<div id="left">Nos produits</div>
        <div id="right">Détails du produits, sur lequel on a cliqué</div>
</div>


La DIVright se positionne à coté de la DIVleft, mais dois rester hors du viewport donc sans scrool vertical.
L'idée est de faire glisser DIVright sur DIVleft à l'aide d'un jQuery animate.
L'animation est exécuté de droite vers la gauche, comme une porte coulissante. Smiley biggol
DIVright se retrouve donc au dessus de DIVleft et un href permet de faire revenir DIVright à sa position initiale.

Tout fonctionne, le soucis est que l'overflow:hidden de la DIVcontent ne s'applique pas sur DIV_right qui est en position:absolute. Du coup, j'ai un scroll horizontale à cause de DIVright.


#content {
	padding: 20px;
	margin-left: 230px;
	height: 100%;
	overflow: hidden;
}
#leftFrame {
	float: left;
	position: relative;
	width: 100%;
	z-index: 0;
}
#rightFrame {
	float: left;
	left: 100%;
	width: 100%;
	position: absolute;
	z-index: 1;
}


Comment contourner se problème, merci.
Modifié par Rifton007 (06 Feb 2013 - 16:29)
Non, le soucis ne vient pas du padding,
Mon scroll horizontale est égale à deux fois le viewport 100%

Si je met la DIVright en relative, le probléme du scroll est réglé.
Mais celui ci se repositionne dans le flux et se retrouve sous la DIVleft malgré le float left que j'ai appliqué.

Je pense que l'overflow ne s'applique pas au au bloc en absolute.
Reste à savoir comment faire autrement.
Modifié par Rifton007 (06 Feb 2013 - 16:29)

#content {
 position:relative;
}
#left {
  position:absolute;
  top:0;
  left:-100%;
  width: 100%;
}
#right {
	position:absolute;
  top:0;
  left:0;
	width: 100%;
}

Et tu change la valeur des left sur #left et #right en jquery