28172 sujets

CSS et mise en forme, CSS3

[Résolu] [multidevice] transition horiz d'un div avec éléments fixed

Bonjour,

Dans une page web multidevice, je veux réaliser une transition CSS d'un bloc div (.carrousel) contenant 3 autres blocs div (.bloc1 à 3) positionnés horizontalement en float left.

Initialement, seuls les blocs 2 et 3 sont affichés (left négatif sur .carrousel et overflow hidden sur le conteneur .global)

Au clic sur le lien 'Show blocs {1, 2}', le .carrousel bouge à droite pour afficher les blocs correspondants (left nul)

Pour réaliser cette transition j'ai adopté la structure HTML dans le code ci-dessous.

Dans les blocs 1 à 3 il y'a des éléments positionnés en fixed (.nav dans .bloc2 et .header dans .bloc3)

Le problème c'est que sous Chrome, IE8, Android 4.03 et 3.02 ces éléments sont positionnés en dehors de leurs conteneurs Smiley decu

Sous Firefox 15.0, IE9 et bizarrement IE7! tout fonctionne normalement.

Est ce que quelqu'un connait un moyen pour palier à cette problématique?

Je suis partant pour modifier la structure HTML si nécessaire, par contre je ne souhaite pas utiliser des Hacks ou CSS spécifique pour chaque device :?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
	<style type="text/css">
	
		* { margin:0; padding:0; }
		a img { border:none; }
		body { font-family:Tahoma; font-size:12px; }
		p { margin:10px 0; }
		
		.global { width:940px; overflow:hidden; position:relative; margin:20px auto; border:#F00 solid 1px; }
		
		.carrousel { width:1660px; overflow:hidden; position:relative; top:0;
			-webkit-transition: left .2s ease-in-out;
			-moz-transition: left .2s ease-in-out;
			-ms-transition: left .2s ease-in-out;
			-o-transition: left .2s ease-in-out;
			transition: left .2s ease-in-out; }
		
		.bloc { float:left; padding:5px; margin:5px; text-aligh:center; }				
		
		.bloc1 { width:700px; height:400px; background-color:#F00; }
		
		.bloc2 { width:200px; height:300px; background-color:#999; }
		.nav { position:fixed; z-index:2; background-color:#F90; width:200px; }
		.nav a { display:block; margin:10px 0; }
		
		
		.bloc3 { width:700px; min-height:300px; position:relative; background-color:#FF0; }
		.header { width:700px; height:50px; position:fixed; z-index:2; background-color:#6FF; }
		.list { height:3000px; padding-top:50px; position:relative; z-index:1; background-color:#9C3; }

		.carrousel.showblocs23 { left:-720px; }
		
		.carrousel.showblocs12 { left:0; }
		.carrousel.showblocs12 .header { position:relative; }			

	</style>
	
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
	
	<title>blocr</title>
	
</head>

<body>

	<div class="global">
	
		<div class="carrousel showblocs23">  

			<div class="bloc bloc1">
			bloc 1				
			</div>
			
			<div class="bloc bloc2">
            bloc 2
				<div class="nav">
                fixed nav<br />
					<a href="#" onclick="$('.carrousel').removeClass('showblocs23').addClass('showblocs12'); return false;">
					Show blocs {1, 2}
					</a>								
					<a href="#" onclick="$('.carrousel').removeClass('showblocs12').addClass('showblocs23'); return false;">
					Show blocs {2, 3}
					</a>
				</div>                
			</div>

			<div class="bloc bloc3">
            
            bloc 3

				<div class="header">
					bloc 3 header fixed
				</div>
				
				<div class="list">
					bloc 3 long list
				</div>
								
			</div>
			
		</div><!-- /carrousel --> 
		   
	</div><!-- /global -->
	
</body>
</html>

Modifié par 3psilon (30 Jan 2013 - 18:28)
Ça dois venir du "position:fixed" qu'on c'est élément

J'ai du mal à comprendre ce que tu veut faire, ta pas un petit schéma ?
Un schéma c'est un dessin... Ton code je les vue et je comprend pas trop ou tu veut en venir.

Tu parle de "sprite de 2 slides" rien que ça déjà j'ai du mal à voir le rapport entre un sprite et des slides.
Ensuite dans ton code y'a 3 class "slide", qui on plus l'aire de grande zone qui structure le document que de slide à proprement parler comme l'on peut les retrouver dans un slider ou un carroussel.
Et pour achever le tout, tu place des éléments en fixed dans des slides qui sont censé bouger ? Hein????? Smiley eek

Non désolé je comprend rien, d'ou ma demande.
J'ai fait un grand effort de rédaction pour expliquer ce que je veux, j'espère que c'est plus clair maintenant Smiley smile
Cancre a écrit :

Et pour achever le tout, tu place des éléments en fixed dans des slides qui sont censé bouger ? Hein????? Smiley eek

mouais... Smiley rolleyes ça parait étrange, je croyais pas à l'idée au début moi non plus mais ça marche sous FF, IE9 et même IE7 hein Smiley lol
Par définition un élément fixe, il bouge pas et il est placer en fonction du body et non de son conteneur. Pour moi c'est plutot FF, IE9 et IE7 qui beug.

La seul façon que je vois c'est de placer l'élément fixe hors des blocs qui bouge.
Et d'afficher/masquer le contenue fixed en fonction de la slide qui est afficher en js ou jquery


<div class="fixed">
<div class="slide2">Content Nav slide2</slide>
<div class="slide3">Content Header slide3</slide>
</div>

<div class="carrousel">
<div class="slide1">content</div>
<div class="slide2">content</div>
<div class="slide3">content</div>
</div>
Oui c'est une solution.
Mais en positionnant les blocs .header et .nav en absolue et en maintenant leur position intacte au scroll il y a un effet visuel indésirable sur ces éléments...

	$(window).scroll(function() {
		$('.header').css('top', $(this).scrollTop() + "px");
	});

J'ai aussi essayé une autre méthode dans le même sens et qui permet en plus d'avoir un effet plus smooth http://jqueryfordesigners.com/fixed-floating-elements/ qui consiste à changer la propriété css "position" en "fixed" au bon moment...
Le problème c'est que, sous Chrome, dès que le bloc .header a la propriété css "fixed" il se décale vers la droite, et on revient au point de départ, un cercle vicieux quoi Smiley ohwell

Le décalage est lié certainement à la structure HTML des blocs (float left) que je pense à modifier...
Finalement ça a été résolu en positionnant le .carousel via "margin-left:-720px" et "margin-left:0" plutôt que "left:-720px" et "left:0" et par conséquent en appliquant la transition CSS sur la propriété "margin-left" plutôt que "left"
Merci Cancre pour tes retours ^^
Sujet clos
Aller à