Code n'est pas fonctionnel sur tous les navigateurs

**fidbell84** · 22/06/2015, 15h50

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

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

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

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

bonjour,

Quel est le problème sur safary ?

**fidbell84** · 22/06/2015, 16h14

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

le height devient trés grand.

**www.diazis.com** · 22/06/2015, 16h47

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

Code html :

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

 <a style="display: flex; display: -webkit-flex; margin: 10px; color: #000;"

**fidbell84** · 23/06/2015, 10h37

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

**www.diazis.com** · 23/06/2015, 10h51

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 html :

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

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

**fidbell84** · 23/06/2015, 11h17

j ai supprimé flex. l code est fonctionnel sur tous les navigateurs sauf safary je dois changer le style de classe d image

Code :

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

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

**www.diazis.com** · 23/06/2015, 12h20

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

**fidbell84** · 23/06/2015, 12h52

le code se trouve ci-dessous :

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

**www.diazis.com** · 23/06/2015, 12h58

c'est pourquoi je te demandais l'ensemble du CSS (pas du html).
Là où tu as

Code :

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

1
2
3
4
.imageMenu {
  height: 30%;
  width: 55%;
}

**fidbell84** · 23/06/2015, 14h29

comment je le corrige alors

du coté html ou css

**www.diazis.com** · 23/06/2015, 14h50

Je ne sais pas, tu n'as toujours pas montrer ton code CSS.
Edit l'intégralité de ton fichier CSS.

**fidbell84** · 26/06/2015, 12h25

Le code en haut

**www.diazis.com** · 26/06/2015, 15h04

on se comprend pas

Le code suivant :

Code :

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

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 ?

**fidbell84** · 29/06/2015, 11h33

Merci pour ta réponse

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

**www.diazis.com** · 29/06/2015, 13h15

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.

**NoSmoking** · 29/06/2015, 22h20

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.

Invité · 30/06/2015, 08h01

Bonjour,

Code :

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

1
2
3
4
.imageMenu {
  height: 30%;
  width: 55%;
}

Quel genre d'image a besoin qu'on en déforme les proportions ?

essaie en enlevant le height :

Code :

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

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

ou

Code :

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

1
2
3
4
.imageMenu {
  width: 55%;
  height: auto;
}

**NoSmoking** · 30/06/2015, 20h03

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é

Code n'est pas fonctionnel sur tous les navigateurs

CSS

Discussions similaires

Partager

Partager