Discussion :

[artenis]

Bonjour,

je cherche desesperement à adapter le flex-box sur le navigateur safari. sur Firefox ça marche normalement ainsi que sur tout les autres navigateurs!
le lien du site
voici les codes: CSS

Code :

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
90
91
92
93
94
95
96
97
98
99
100
101
102
#Menu{
	display: -webkit-box;
    	display:    -moz-box;
	display:     -ms-box;
    	display:         box;
 	-webkit-box-orient: horizontal;
    	-moz-box-orient: horizontal;
    	-ms-box-orient: horizontal;
    	box-orient: horizontal;
	display: -webkit-flex;
	display:    -moz-flex;
	display:     -ms-flex;
	display:         flex;
	-webkit-flex-direction: column;
	-moz-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-flex: 1;-moz-box-flex: 1;-ms-box-flex: 1;box-flex: 1;
	-webkit-flex: 1;-moz-flex: 1;-ms-flex: 1;flex: 1;
	height:130px;
	margin-bottom:10px;
}
#Menu  ul{
	height:80px; 
	margin:0; padding:0;
	margin:0; padding:0;
	display: -webkit-box;
    	display:    -moz-box;
	display:     -ms-box;
    	display:         box;
 	display: -webkit-flex;
    	display:    -moz-flex;
    	display:     -ms-flex;
    	display:         flex;
  	position:relative;
}
#Menu li{
	display: -webkit-box;
    	display:    -moz-box;
	display:     -ms-box;
    	display:         box;
 	display: -webkit-flex;
    	display:    -moz-flex;
    	display:     -ms-flex;
    	display:         flex;
  	background:#333333;
	list-style:none;
  	height:80px;
	margin:0; padding:0;
	display:inline-block;
	-webkit-box-flex: 1;-moz-box-flex: 1;-ms-box-flex: 1;box-flex: 1;
 	-webkit-flex: 1;-moz-flex: 1;-ms-flex: 1;flex: 1;
  	background:height:80px; text-align:center;
	border-right:2px solid #bababa;
}
#Menu li:last-child{border-right:0;}
#Menu li a{display:block; }
#Menu ul ul{
	height:50px; 
	margin-top:5px; padding:0;
	display: -webkit-box;
    	display:    -moz-box;
	display:     -ms-box;
    	display:         box;
 	-webkit-box-orient: vertical;
    	-moz-box-orient: vertical;
    	-ms-box-orient: vertical;
    	box-orient: vertical;
    	display: -webkit-flex;
    	display:    -moz-flex;
    	display:     -ms-flex;
	display:         flex;
    	-webkit-flex-direction: column;
	-moz-flex-direction: column;
	-ms-flex-direction: column;
    	flex-direction: column;
	-webkit-box-flex: 1;-moz-box-flex: 1;-ms-box-flex: 1;box-flex: 1;
 	-webkit-flex: 1;-moz-flex: 1;-ms-flex: 1;flex: 1;
}
#Menu li li{
	display: -webkit-box;
    	display:    -moz-box;
	display:     -ms-box;
    	display:         box;
 	display: -webkit-flex;
    	display:    -moz-flex;
    	display:     -ms-flex;
    	display:         flex;
	list-style:none;
	margin:0; padding:0;
	display:inline-block;
	-webkit-box-flex: 1;-moz-box-flex: 1;-ms-box-flex: 1;box-flex: 1;
 	-webkit-flex: 1;-moz-flex: 1;-ms-flex: 1;flex: 1;
  	flex-grow:1;
	background:#ccff00;height:50px; text-align:center;
	border-right:2px solid #333333;
}
#Menu li li:last-child{border-right:0;}
#Menu li li a{
	color:#333333; text-decoration:none; font-size:16px; font-family:open; text-align:center; line-height:50px;
	display:block; 
}

[Bovino]

J'imagine que tu testes avec Windows ?
Dans ce cas, pas la peine d'insiter : le développement de Safari pour Windows a été stoppé il y a plusieurs années déjà.

Ceci dit, je te conseille de mettre un peu d'ordre dans ton code, parce que là, c'est vraiment du grand fouillis de trucs contradictoires (notamment, les multiples définitions de la propriété display qui s'annulent les unes les autres...

[artenis]

Oui effectivement, je testais avec windows, mais après réflexion je me dis que le nombre de personnes qui utilise safari sur windows doit être minime.
Par contre si on peut m'aider sur safari Apple , car j'ai vérifié sur le Mac d'une amie et ça donne le même problème que sur windows !

je crois qu'il y a des hack css, mais n'arrive pas à bien les utilisé !

Bovino, je suis tout a fait d'accord, il y a en a trop, le probleme c'est que je ne suis pas certain des conteneurs qui doivent possèder ces "display: ..flex.." ?
est-ce que je le mets uniquement sur le conteneur principal , c'est à dire "#Menu "

[NoSmoking]

Bonjour,
peut être revoir la conception CSS et avoir une structure plus simple, le tout pour une meilleur prise en charge par les différents navigateurs.!

[artenis]

Merci, mais je connais déjà la solution plus simple et qui marche sur tous les navigateurs !

J'aimerais tout de même profiter des derniers codes CSS afin que lorsqu'on ajoute un nouvel onglet à un menu Wordpress, celui-ci s'intègre dans le menu en adaptant automatiquement la largeur des autres onglets
Imaginons: j'ai actuellement 7 onglets dans mon menu, demain le gestionnaire du site veux ajouter un nouvel onglet, il pourra alors le faire sans internvention d'un webmaster !

je précise que ce menu, en tout cas son conteneur, s'adapte automatiquement à la largeur du bloc parent (1280px). Les 7 onglets de ce menu ont pour but de remplir l'espace total de ce conteneur!

n'auriez vous pas quelque conseils ou bottes secrètes afin que mon code css puisse convenir à Safari
ce code marche sur tous les navigateurs (le splus utilisés) sauf Safari.
merci pour votre aide
voici le site en question !

[NoSmoking]

mais je connais déjà la solution plus simple et qui marche sur tous les navigateurs !

j'ai du mal à comprendre pourquoi tu ne l'utilises pas !!

...demain le gestionnaire du site veux ajouter un nouvel onglet,...

rien ne t'empêche de le former, si besoin, aux rudiments de la modification.

...n'auriez vous pas quelque conseils ou bottes secrètes afin que mon code css puisse convenir à Safari

il existe bien display:table, mais il ne s'agit pas vraiment (sic)"des derniers codes CSS" puisque CCS2.

Je te livre un exemple en ligne Utilisation de display:table sur base d'un HTML moins tortueux que celui que tu utilises.