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

Discussion: Quadrillage d' images

  1. #1
    Nouveau Candidat au Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    avril 2014
    Messages
    480
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loiret (Centre)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : avril 2014
    Messages : 480
    Points : 0
    Points
    0

    Par défaut Quadrillage d' images

    Bonjour,
    mon problème est le suivant:
    Sur une page html où je dois afficher un quadrillage d'images (3 bandes occupant chacune toute la largeur de l'écran, et l'une en dessus de l'autre, avec 5 images sur chaque bande disposées suivant la longueur), je rencontre le problème que je n'y arrive pas.
    En effet la page est découpée en deux parties:
    dans la partie supérieure de la page il y a un bandeau de haut de page dont la hauteur est exprimée en pixels et en dessous de ce bandeau le quadrillage d'images.
    Je pense que le fait que la hauteur du bandeau soit exprimée en pixels (au lieu de l'être en %) m'empêche de disposer correctement mon quadrillage d'images.

    Qu'en pensez vous?

  2. #2
    Nouveau Candidat au Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    avril 2014
    Messages
    480
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loiret (Centre)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : avril 2014
    Messages : 480
    Points : 0
    Points
    0

    Par défaut

    voici la question posée en termes beaucoup plus simples et compréhensibles:
    sur une page html où la hauteur du bandeau du haut est exprimée en pixels, peut t'on dans la partie inférieure de la page (sous le bandeau donc) disposer plusieurs images (en ne les dimensionnant pas en pixels elles) en bandes remplissant ainsi tout l'espace disponible pour que cet espace disponible soit correctement rempli par ces images sur tous les devices?

  3. #3
    Expert confirmé Avatar de psychadelic
    Profil pro
    Inscrit en
    mai 2010
    Messages
    2 293
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mai 2010
    Messages : 2 293
    Points : 4 415
    Points
    4 415

    Par défaut

    oui, on peut.
    c'est la fonction calc => https://developer.mozilla.org/fr/docs/Web/CSS/calc
    «La pluralité des voix n'est pas une preuve, pour les vérités malaisées à découvrir, tant il est bien plus vraisemblable qu'un homme seul les ait rencontrées que tout un peuple.» [ René Descartes ] - Discours de la méthode

  4. #4
    Modérateur

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

    Informations forums :
    Inscription : janvier 2011
    Messages : 13 665
    Points : 33 408
    Points
    33 408

    Par défaut

    Bonjour,
    je dirais à la louche qu'un mode de rendu flex associé aux MediaQueries devraient faire l'affaire.

  5. #5
    Nouveau Candidat au Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    avril 2014
    Messages
    480
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loiret (Centre)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : avril 2014
    Messages : 480
    Points : 0
    Points
    0

    Par défaut

    Bonjour,
    ici https://blog.lesieur.name/la-proprie...s-inutilement/
    il est écrit:
    Support IE9
    Comme dit en introduction, si vous souhaitez supporter calc() pour des versions plus vieille que IE8, il va falloir vous procurer un polyfill comme celui-ci. En ce qui concerne IE9, il est mentionné qu'elle est partiellement supportée. En réalité, cela vient du fait que si vous écrivez calc(50%-30px) cela fonctionnera partout sauf sur IE9 ou il faut bien mettre des espaces entre les symboles d'opération comme ceci : calc(50% - 30px).
    je ne comprends pas, moi je pensais qu'il fallait utiliser le préfixe -ms pour rendre compatible avec les anciennes versions de IE une propriété CSS récente. Ils parlent ici de mettre des espaces entre les symboles d'opération.

  6. #6
    Expert confirmé Avatar de psychadelic
    Profil pro
    Inscrit en
    mai 2010
    Messages
    2 293
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mai 2010
    Messages : 2 293
    Points : 4 415
    Points
    4 415

    Par défaut

    c'est pour que le polyfill puisse faire correctement son job, ça n'a rien à voir avec l'utilisation des préfixes.

    PS: faut faire des retours, j'avais fini par penser que tu te fichais complètement des réponses qu'on puisse te faire.
    «La pluralité des voix n'est pas une preuve, pour les vérités malaisées à découvrir, tant il est bien plus vraisemblable qu'un homme seul les ait rencontrées que tout un peuple.» [ René Descartes ] - Discours de la méthode

  7. #7
    Nouveau Candidat au Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    avril 2014
    Messages
    480
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loiret (Centre)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : avril 2014
    Messages : 480
    Points : 0
    Points
    0

    Par défaut

    non je m'en fiche pas, puisque je pose les questions.
    Je n'ai toujours pas compris la tournure de la phrase, je ne comprends pas le lien avec le polyfill dont tu me parles, il est question de IE9 et non du polyfill non?

  8. #8
    Modérateur

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

    Informations forums :
    Inscription : janvier 2011
    Messages : 13 665
    Points : 33 408
    Points
    33 408

    Par défaut

    Tu as cité
    En réalité, cela vient du fait que si vous écrivez calc(50%-30px) cela fonctionnera partout sauf sur IE9
    cela marchera nulle part !


    Ressource :
    https://drafts.csswg.org/css-values-3/#calc-syntax
    In addition, white space is required on both sides of the + and - operators. (The * and / operaters can be used without white space around them.)

  9. #9
    Nouveau Candidat au Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    avril 2014
    Messages
    480
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loiret (Centre)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : avril 2014
    Messages : 480
    Points : 0
    Points
    0

    Par défaut

    exact, c'est avec ces espaces que calc doit être écrite, et sans eux cela ne marche très certainement nulle part.
    Je pose maintenant une autre question, comment est implémentée cette fonction calc (ou d'ailleurs toute autre fonction css), je veux dire comment concrètement les espaces dont on parle sont implémentés?

  10. #10
    Expert confirmé Avatar de psychadelic
    Profil pro
    Inscrit en
    mai 2010
    Messages
    2 293
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mai 2010
    Messages : 2 293
    Points : 4 415
    Points
    4 415

    Par défaut

    ben ,il c'est tout de même passé une semaine avant d'avoir un retour de ta part...

    sinon j'ai l'impression que tu n'a pas compris le principe des polyfill :

    la fonction css calc n'est implémentée dans les navigateurs que depuis 2012 ( en gros, pour le détail voir : https://caniuse.com/#search=calc )

    donc les anciens navigateurs IE, antérieurs a la version 9, ne connaissent pas cette fonction. ( ou l'on implémenté de manière partiale)
    Si on veux malgré tout utiliser cette fonction sur un navigateur qui ignore cette fonction, on lui ajoute par le biais d'un polyfill.
    le polyfill est donc un morceau de code JS supplémentaire qu'il faut inclure dans sa page html.

    et pour en revenir à ma phrase :
    c'est pour que le polyfill puisse faire correctement son job
    c'est parce le polyfill en question opère une analyse des descriptions css, et que si ces description sont écrites sans bien mettre des espace, ben ,il passe à coté.

    Dans ce polyfill calc : https://github.com/closingtag/calc-polyfill

    il faut copier le fichier calc.js et le placer avec les autres fichiers de ton projet,
    puis ajouter <script type="text/javascript" src="path/to/calc.js"></script>( juste après tous les fichiers css)
    en remplaçant path/to/ par ton propre chemin
    «La pluralité des voix n'est pas une preuve, pour les vérités malaisées à découvrir, tant il est bien plus vraisemblable qu'un homme seul les ait rencontrées que tout un peuple.» [ René Descartes ] - Discours de la méthode

  11. #11
    Modérateur

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

    Informations forums :
    Inscription : janvier 2011
    Messages : 13 665
    Points : 33 408
    Points
    33 408

    Par défaut

    comment est implémentée cette fonction calc (ou d'ailleurs toute autre fonction css)
    il faut lire ce qui est écrit dans le lien que je t'ai fourni, c'est juste le paragraphe suivant dans lequel il explique la démarche à suivre.
    Pendant que tu y seras lit également la suite.

Discussions similaires

  1. Quadrillage d' images
    Par abc.xyz dans le forum Mise en page CSS
    Réponses: 8
    Dernier message: 24/07/2018, 10h16
  2. extraire un quadrillage d'une image
    Par spiralsatelli dans le forum Traitement d'images
    Réponses: 2
    Dernier message: 23/02/2010, 11h00
  3. Resize d'une image
    Par Anonymous dans le forum C
    Réponses: 6
    Dernier message: 13/07/2008, 22h23
  4. [Image] Quadrillage JPanel
    Par krokmitaine dans le forum AWT/Swing
    Réponses: 11
    Dernier message: 16/06/2006, 01h18
  5. lire une image au format RAW
    Par Anonymous dans le forum OpenGL
    Réponses: 5
    Dernier message: 20/05/2002, 00h11

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