IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Code n'est pas fonctionnel sur tous les navigateurs


Sujet :

CSS

  1. #1
    Membre du Club
    Femme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2015
    Messages
    56
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : Swaziland

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Janvier 2015
    Messages : 56
    Points : 51
    Points
    51
    Par défaut Code n'est pas fonctionnel sur tous les navigateurs
    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%; 
    }

  2. #2
    Membre habitué
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2015
    Messages
    98
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Seine et Marne (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Juin 2015
    Messages : 98
    Points : 184
    Points
    184
    Par défaut
    bonjour,

    Quel est le problème sur safary ?

  3. #3
    Membre du Club
    Femme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2015
    Messages
    56
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : Swaziland

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Janvier 2015
    Messages : 56
    Points : 51
    Points
    51
    Par défaut
    Le problème que sur le navigateur safary le style ne reste plus le même.

    le height devient trés grand.

  4. #4
    Membre habitué
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2015
    Messages
    98
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Seine et Marne (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Juin 2015
    Messages : 98
    Points : 184
    Points
    184
    Par défaut
    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;"

  5. #5
    Membre du Club
    Femme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2015
    Messages
    56
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : Swaziland

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Janvier 2015
    Messages : 56
    Points : 51
    Points
    51
    Par défaut
    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

  6. #6
    Membre habitué
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2015
    Messages
    98
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Seine et Marne (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Juin 2015
    Messages : 98
    Points : 184
    Points
    184
    Par défaut
    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 ?

  7. #7
    Membre du Club
    Femme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2015
    Messages
    56
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : Swaziland

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Janvier 2015
    Messages : 56
    Points : 51
    Points
    51
    Par défaut
    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

  8. #8
    Membre habitué
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2015
    Messages
    98
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Seine et Marne (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Juin 2015
    Messages : 98
    Points : 184
    Points
    184
    Par défaut
    Il faudrait que tu montres l'ensemble de ton CSS et au minimum la partie qui concerne imageMenu et tous ses parents.

  9. #9
    Membre du Club
    Femme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2015
    Messages
    56
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : Swaziland

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Janvier 2015
    Messages : 56
    Points : 51
    Points
    51
    Par défaut
    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"

  10. #10
    Membre habitué
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2015
    Messages
    98
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Seine et Marne (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Juin 2015
    Messages : 98
    Points : 184
    Points
    184
    Par défaut
    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%;
    }

  11. #11
    Membre du Club
    Femme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2015
    Messages
    56
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : Swaziland

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Janvier 2015
    Messages : 56
    Points : 51
    Points
    51
    Par défaut
    comment je le corrige alors du coté html ou css

  12. #12
    Membre habitué
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2015
    Messages
    98
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Seine et Marne (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Juin 2015
    Messages : 98
    Points : 184
    Points
    184
    Par défaut
    Je ne sais pas, tu n'as toujours pas montrer ton code CSS.
    Edit l'intégralité de ton fichier CSS.

  13. #13
    Membre du Club
    Femme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2015
    Messages
    56
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : Swaziland

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Janvier 2015
    Messages : 56
    Points : 51
    Points
    51
    Par défaut
    Le code en haut

  14. #14
    Membre habitué
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2015
    Messages
    98
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Seine et Marne (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Juin 2015
    Messages : 98
    Points : 184
    Points
    184
    Par défaut
    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 ?

  15. #15
    Membre du Club
    Femme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2015
    Messages
    56
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : Swaziland

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Janvier 2015
    Messages : 56
    Points : 51
    Points
    51
    Par défaut
    Merci pour ta réponse

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


  16. #16
    Membre habitué
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2015
    Messages
    98
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Seine et Marne (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Juin 2015
    Messages : 98
    Points : 184
    Points
    184
    Par défaut
    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.

  17. #17
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    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.

  18. #18
    Invité
    Invité(e)
    Par défaut
    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;
    }

  19. #19
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    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é

Discussions similaires

  1. Pas de transparence PNG sur tous les navigateurs
    Par Alex-L dans le forum Webdesign & Ergonomie
    Réponses: 3
    Dernier message: 19/04/2011, 19h02
  2. Code body et balises compatibles sur tous les navigateurs ?
    Par sun69 dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 03/03/2011, 08h26
  3. [WD11] Application qui ne tourne pas correctement sur tous les postes
    Par ivichou dans le forum WinDev
    Réponses: 5
    Dernier message: 18/05/2010, 16h55
  4. Réponses: 4
    Dernier message: 26/01/2010, 12h48
  5. optimiser code sql access par boucle sur tous les chkbox
    Par thiefer dans le forum Requêtes et SQL.
    Réponses: 8
    Dernier message: 25/09/2008, 22h46

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo