transition CSS horizontale d'un div contenant des éléments positionnés en fixed

**3psilOn** · 30/01/2013, 16h31

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 [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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!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>

**3psilOn** · 01/02/2013, 17h55

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"

transition CSS horizontale d'un div contenant des éléments positionnés en fixed

CSS

Vue hybride

Discussions similaires

Partager

Partager