Code n'est pas fonctionnel sur tous les navigateurs

Version imprimable

Bonjour,

Mon problème que mon code fonctionne sur tous les navigateurs sauf safary

je besoin d'une solution pour que le code fonctionne aussi sur safary :?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="row">
    <div class="col-md-6">
        <a style="display: flex; margin: 10px; color: #000;" ng-click="openModalFiltre()">
            <img src="images/home/ic_filtre.png" class="imageMenu">
        </a>
    </div>
    <div class="col-md-6">
        <h2 class="textMenu">Filtra</h2>
    </div>
    </a>
</div>
<div class="row">
    <div class="col-md-6">
        <a style="display: flex; margin: 10px; color: #000;" ng-click="logout()">
            <img src="images/home/ic_import.jpg" class="imageMenu">
        </a>
    </div>
    <div class="col-md-6">
        <h2 class="textMenu">Logout</h2>
    </div>
    </a>
</div>>

Code:

1
2
3
4
5
 
.imageMenu {
	height: 70%;
	width: 70%; 
}

22/06/2015, 16h09
www.diazis.com

bonjour,

Quel est le problème sur safary ?
22/06/2015, 16h14
fidbell84

Le problème que sur le navigateur safary le style ne reste plus le même.

le height devient trés grand.
22/06/2015, 16h47
www.diazis.com

Je ne sais pas pourquoi tu mets tes <a> en flex mais sous safary il faut rajouter le préfixe.

Code:

<a style="display: flex; display: -webkit-flex; margin: 10px; color: #000;"
23/06/2015, 10h37
fidbell84

Merci pour la réponse mais pas fonctionnel.

qu'est je dois modifier?? je dois supprimer flex
mais qu'est je mets pour le remplacer
23/06/2015, 10h51
www.diazis.com

Comme ca et sachant que tu n'as qu'un element dans le div parent, je vois pas l'intérêt du display dans ton lien.
Que se passe t il si tu le supprimes ?

Code:

<a style="margin: 10px; color: #000;"...

Ensuite le height de ton image est en pourcentage. Il se réfère donc au height d'un de ses parents.
Le premier qui a un height défini.
col-md-6 a t il une height ?
23/06/2015, 11h17
fidbell84
j ai supprimé flex. l code est fonctionnel sur tous les navigateurs sauf safary je dois changer le style de classe d image
Code:

1 2 3 4 .imageMenu { height: 30%; width: 55%; }
Mais comment je le modifie sur safary seulement. et est ce qu il y a une autre methode pour corriger ce problème?

Et, si je reduit l'ecran (celle de taille du tablette ou téléphone), affichage devient text sous image et non pas prés de l'image :oops:
23/06/2015, 12h20
www.diazis.com

Il faudrait que tu montres l'ensemble de ton CSS et au minimum la partie qui concerne imageMenu et tous ses parents.

le code se trouve ci-dessous :

Code:

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
<div class="dropdown-menu" style="width: 20%" role="menu">
 
    <div class="row" style="padding: 2px">
 
        <div class="row" style="margin: 2% 0;">
            <div class="col-md-6">
                <a style="margin: 10px; color: #000;" href="#createEvent">
                    <img src="images/home/ic_crea.png" class="imageMenu">
                </a>
            </div>
            <div class="col-md-6" style="margin-top: -3px;">
                <h2 class="textMenu">Crea</h2>
            </div>
        </div>
 
        <div class="row" style="margin: 2% 0;">
            <div class="col-md-6">
                <a style="margin: 10px; color: #000;" href="#onMap">
                    <img src="images/home/ic_mappa.png" class="imageMenu">
                </a>
            </div>
            <div class="col-md-6" style="margin-top: -3px;">
                <h2 class="textMenu">Mappa</h2>
            </div>
        </div>
 
        <div class="row" style="margin: 2% 0;">
            <div class="col-md-6">
                <a style="margin: 10px; color: #000;" ng-click="openModalFiltre()">
                    <img src="images/home/ic_filtre.png" class="imageMenu">
                </a>
            </div>
            <div class="col-md-6" style="margin-top: -3px;">
                <h2 class="textMenu">Filtra</h2>
            </div>
        </div>
 
        <div class="row" style="margin: 2% 0;">
            <div class="col-md-6">
                <a style="margin: 10px; color: #000;" ng-click="logout()">
                    <img src="images/home/ic_import.jpg" class="imageMenu">
                </a>
            </div>
            <div class="col-md-6" style="margin-top: -3px;">
                <h2 class="textMenu">Logout</h2>
            </div>
        </div>
 
    </div>
</div>
</div>

mais il parrait que le problème dans class="col-md-6"

23/06/2015, 12h58
www.diazis.com
c'est pourquoi je te demandais l'ensemble du CSS (pas du html).
Là où tu as
Code:

1 2 3 4 .imageMenu { height: 30%; width: 55%; }
23/06/2015, 14h29
fidbell84

comment je le corrige alors :( du coté html ou css
23/06/2015, 14h50
www.diazis.com

Je ne sais pas, tu n'as toujours pas montrer ton code CSS.
Edit l'intégralité de ton fichier CSS.
26/06/2015, 12h25
fidbell84

Le code en haut ;)
26/06/2015, 15h04
www.diazis.com
on se comprend pas :weird:
Le code suivant :
Code:

1 2 3 4 .imageMenu { height: 30%; width: 55%; }
Est dans quel fichier ? un fichier CSS séparé ? Si oui il n'y a que ca dans ton fichier CSS ?

Quel code CSS gère la mise en page de col-md-6 ?
29/06/2015, 11h33
fidbell84

Merci pour ta réponse

la class "col-md-6" est une classe par défaut dans bootstrap.

;)
29/06/2015, 13h15
www.diazis.com

Tu aurais du préciser que tu utilisais bootstrap...
Tu devrais clore ce sujet et en rouvrir un en mettant que tu utilises bootstrap.
La seule chose que je peux te recommander est de regarder dans l'inspecteur d'élément de ton navigateur quelles sont les propriétés de col-md-6.
29/06/2015, 22h20
NoSmoking

Bonjour,
regarde ce que représente ta class col-md-6, je t'ai donné la réponse dans ton autre discussion, http://www.developpez.net/forums/d15...p/#post8297080, il serait peut être temps que tu synthétises tout cela.
30/06/2015, 08h01
Invité
Bonjour,
Code:

1 2 3 4 .imageMenu { height: 30%; width: 55%; }
Quel genre d'image a besoin qu'on en déforme les proportions ? :koi:
essaie en enlevant le height :
Code:

1 2 3 .imageMenu { width: 55%; }
ou
Code:

1 2 3 4 .imageMenu { width: 55%; height: auto; }
30/06/2015, 20h03
NoSmoking

Pour enfoncer le clou...

Avec une width: 50%;, si la largeur de la page diminue la largeur de l'élément diminuera pour toujours faire 50% de la largeur de la page, oui MAIS le contenu lui ne changeant pas il va passer à la ligne et repousser le bas de l'élément donc en augmenter sa hauteur et là MISERE la hauteur de l'image qui est exprimée en % va grandir jusqu'à ne ressembler à rien, un peu comme le nez de Pinoccio(*), donc acte.

(*)toujours difficile de placer cette métaphore alors là je ne me suis pas gêné :mrgreen: