Bonjour

je comprends pas dans ce jsfiddle https://jsfiddle.net/j2evdb0u/1/

pourquoi l'image ne rentre pas dans le cadre .case-depart?

l'image est fluid et elle est contenue dans cette div, et elle n'est pas du tout responsive  car elle garde toujours sa taille 80x160px

Il y a manifestement qq chose que je n'ai pas compris

-
Edité par ciocciu 12 décembre 2024 à 10:57:50

Bonjour, Pour t'aider pose toi ces questions :

• Quelles sont les propriétés de la class .img-fluid?
• Quel est la hauteur d'un contenu remplacer avec une valeur tel que définie dans la class .img-fluid?

Tu devrais trouver la solution.

Tiens salut abcabc6

le img-fluid met le max-width à 100% et le height:auto

la 2eme question je la comprends pas  :-)

 je pense qu'en mettant .case_depart img{ height:100%;}  on lui dit de mettre les img de la class case_depart à 100%

donc ça fonctionne effectivement

maintenant mon pb c'est que pour que ça fonctionne je dois fixer la height du container .case_depart en px (70px dans le jsfiddle)

mais en px c'est moyennement responsive , sur téléphone ça va 70px mais sur un ecran de pc ça fait trop fin et ça tronque l'image de background

j'ai essayé de mettre la height en 10% mais ça fonctionne plus

-
Edité par ciocciu 12 décembre 2024 à 16:17:01

>> et le height:auto

Exact

>> le img fluid devrait le reduire à 70    non?

Non, je reprécise la deuxième question : Quel est la hauteur d'une image (qui est un contenu remplacer) avec une valeur height:auto?

La hauteur de l'image sera ... sa hauteur, soit 160px.

Le responsive s'adapte à la largeur du viewport, pas à la hauteur. Une page n'a pas de hauteur.

La class .img-fluid rend les images responsive car la largeur (max-width à 100%) adapte la largeur de l'image. Quand à la hauteur elle est en auto pour garder le ratio et ne pas avoir d'image déformée. 

Solution : Donne une hauteur à ton image, la même que son parent soit 70px, soit inherit

Édit : vu ton édit

>>  mais en px c'est moyennement responsive , sur téléphone ça va 70px mais sur un ecran de pc ça fait trop fin et ça tronque l'image de background

>> j'ai essayé de mettre la height en 10% mais ça fonctionne plus

Pour qu'une hauteur en % fonctionne pour un élément block, il faut que la hauteur du parent soit définie d'une façon. Tu souhaites la hauteur de 10% de quoi? Le parent n'a pas de hauteur ici.

Tu as à ta disposition d'autre unité de mesure, je pense à vh qui est la hauteur du viewport.

-
Edité par AbcAbc6 12 décembre 2024 à 16:42:39

ah oui ok ...effectivement j'ai surement mélangé la gestion des width et height mais l'ecran n'a pas de hauteur .... c'est évident quand tu le dis :-)

ok pour vh je vais creuser de ce coté là pour que ce soit responsive

merci beaucoup pour tes explications claires

Tu peut aussi t'appuyer sur grid-layout qui te permettra de valider un min-height:100%; ou autre règle de dimension même si le parent n'a pas de height explicite dans les styles.

C'est une particularité de grid et flex, les hauteurs sont calculés et les enfants occupent 100% de la hauteur avec un  height:100% par défaut de leur espace alloué/occupé.

Le contenu donnera imposera une hauteur , qui sera utilisable

exemple https://jsfiddle.net/hc7vn6Lo/

ton html pour ajouter du contenu et un padding :

        <div id="case-0" class="ms-2 case_depart">
          <img
            class="img-fluid"
            src="https://i.ibb.co/4s5Km8Z/queen.jpg"
            alt="queen"
            border="0"
          />
          <div class>Texte ou contenu pour donner une hauteur .</div>
        </div>

et un exemple CSS pour forcer l'image à avoir 100% de hauteur du contenu en démarrant avec un height:0; pour l'image.

.case_depart {
  background: url("https://media.istockphoto.com/id/178149253/fr/photo/espace-profond-arri%C3%A8re-plan.jpg?s=1024x1024&w=is&k=20&c=sywq-QOKS7RsY4QVSR_xLFIBVOkoo-fR5B838TYWYhU=")
    no-repeat top;
  background-size: 100%;
  max-width: 100vw;
  padding: 0;
  color: white;
  margin-bottom: 1%;
  display: grid;
  grid-template-columns: min(100px, 15vw) 1fr;
}
img.img-fluid {
  height: 0;
  min-height: 100%;
  max-height:100%;
  object-fit:cover;/* pour la coupé au lieu de l'étirer*/
}
.case_depart div[class] {
  padding: 2em;
}

ok merci

en fait mon pb se situe dans le fait que l'image de la tour est en fait le pion de l'exo précédent tu sais avec le jeu de l'oie:-))

donc ce pion doit être en position: absolute  avec z-index pour pouvoir être positionné comme il faut et se déplacer (comme tu me l'avais expliqué)

or cette position absolute sur le pion me flingue tout

cf fiddle https://jsfiddle.net/pxLwqd0n/

idéalement il faudrait que mon pion rentre dans la case départ (donc même hauteur) pour pouvoir démarrer son jeu de l'oie situé en dessous et tout ça en responsive bien sur ( sinon trop facile  :-))

-
Edité par ciocciu 12 décembre 2024 à 19:49:47

>> tout ça en responsive bien sur

responsive veut dire : s'adapte à la largeur du viewport (en gros la largeur de l'écran)

>> il faudrait que mon pion rentre dans la case départ (donc même hauteur)

Quelle hauteur à la case du jeu? Je vois 20% (inopérant?) dans le CSS et un float pourquoi??

Je n'ai pas tester, mais je me demande si il ne serait pas préférable de placer la class .pion sur un div avec l'image dedans. De cette façon ce conteneur pourrait avoir une hauteur et largeur définie en px de la dimention souhaitée et le reste des propriétés (left et top) pourraient varier pour le déplacement du pion sur le plateau de jeu?

Édit : Autre question : pour quelle raison souhaites tu placer le pion (donc l'image) à l'intérieur de la case-0 puisque celui-ci serra positionner et c'est cette position qui varie au cours du jeu.

Édit 2 : choisir une autre image de dimension autre

Autre chose l'attribut border est obsolète en HTML5 et opacity n'a pas de valeur en % mais varie entre 0 et 1 Lire 

  https://developer.mozilla.org/fr/docs/Web/CSS/opacity

  @gcyrillus Histoire que tu puisses raccrocher les wagons voir le sujet précédant. 

-
Edité par AbcAbc6 12 décembre 2024 à 20:45:11

ok effectivement les question que tu poses sont légitimes... j'ai fait des copier coller un peu rapidement

en fait j'ai abandonné le row et col de boostrap car avec le dé ça devenait compliquémais ptet j'y reviendrais...on verra

du coup l'idée est de faire la case départ tout haut sur la largeur de l'écran (un  bandeau quoi )  qui contiendrait les pions au départ (qui vont donc bouger) et le dé, et en dessous le jeu de l'oie. j'arrive a faire un truc correct mais dès que je passe en mode ecran de téléphone ça fiche tout en l'air

demain dès que je trouve 5min je te ferai un jsfiddle du bazar complet

merci

Pour le développement de ce projet je pense que je procéderais dans cet ordre :

1. Réalisation du plateau de jeu (design, nombre et position des cases en ce compris la case de départ, ordre des cases)
2. Position des pions sur la case de départ (en ce compris le design du dé)
3. Implémentation des déplacements d'un pion selon les règles de déplacements et les règles du jeu
4. Implémentation des règles du jeu multi joueur

Ces points peuvent nécessité le découpage en sous points pour plus de facilité de réalisation. 

 >> demain dès que je trouve 5min je te ferai un jsfiddle du bazar complet

Si je comprends bien tu commences un développement d'un jeu sans avoir au préalable :

• une maquette graphique, 
• une étude de faisabilité,
• un plan d'organisation,
• une analyse fonctionnel,
• cahier des charges? 

Ceci est le prérequis pour tout projet!! Avant tout développement, je t'encourage à détailler ces différents points par des documents appropriés. Tu auras l'impression de perdre du temps au début mais tu seras grandement gagnant par la suite. 

PS jsfiddle c'est bien pour des petits exemples de démo d'un point/particularité à implémenter dans le projet final. Je trouve que ce n'est pas un bon système pour déboguer et développer. Tu ne disposes pas d'un espace d’hébergement (de test même gratuit? )

PS2 : Si tu dois tenir compte d'une vue mobile, commence par celle-ci, on appelle cela le Mobile First.

Tu comprends parfaitement bien

Je me suis lancé ce defi un peu comme ça, pour le challenge

donc pas de maquette graphique (trop long, je suis nul en graphisme  et personne pour me la faire) mais j'ai une idée en tête

La faisabilité c'est tout le challenge , je pense que c'est largement faisable...c'est juste un jeu de l'oie

Le plan d'organisation bin c'est  ...j'essaie ... je demande de l'aide sur les forums ou des gens très sympas me répondent

L'analyse fonctionnelle je ne sais pas ce que c'est

pas vraiment de cahier des charges , puisque y'a rien de financier derrière , c'est un defi

j'ai un espace d'hebergement test , je t'envoie l'adresse en mp

je vais suivre ce plan, il me parait très bien

1. Réalisation du plateau de jeu (design, nombre et position des cases en ce compris la case de départ, ordre des cases)
2. Position des pions sur la case de départ (en ce compris le design du dé)
3. Implémentation des déplacementsd'un pion selon les règles de déplacements et les règles du jeu
4. Implémentation des règles du jeu multi joueur

Merci encore en tous cas

@AbcAbc6 merci, remis dans le contexte la question se relit différemment en effet

du coup visuellement:

* la position de l'image n'est pas fixe

* l'image doit tenir dans une case. mais n'y est pas forcément

* garder toute les cases a l'écran

Avec l'unité vmin et du padding qui s'annule tout seul , on peut essayer quelque chose comme https://codepen.io/gc-nomade/pen/qEWqRmb

pour le tableau.

Reste de l'espace pour du texte et un dés à lancer

Chaque case se trouve à 10vmin de l'autre.

Enfin, l'image n'est dessiné qu'en background d'une image transparent.

cdt

Merci beaucoup à tous les 2

je vais regarder le plateau de gcyrillus de près voir si je peux l'adapter ...mais y'a pas de raison que je ne puisse pas (bon il va me falloir 6mois pour bien comprendre tout le code du plateau mais je devrais y arriver )

bonne soirée

-
Edité par ciocciu 15 décembre 2024 à 22:18:14

Coucou, après réflexion, je pense que mon exemple , n'est pas un exemple à suivre en l'état .

Bonnes fêtes et fin d'année à tous

ah bon pourquoi?

J'arrive progressivement à l'adapter ...bon j'ai toujours un petit pb de taille d'image de background qui ne rempli pas complètement la case mais j'avance