Reprise du message précédent :

 
Bonjour,
C'est tout à fait ça; je n'ai pas encore testé, je vais le faire.
Je voulais essayer ça :

 
CSS :

Cette solution est moins "nette", il semble qu'il faille répéter 3 fois le .wraper ...
Merci pour ta réponse, je vais appliquer.
 
 
 
 

Résultat avec les explications en rouge.
https://jsfiddle.net/sb8vfyrz/

Je ne parviens toujours pas à placer le texte à droite des images ... il se place en bas du bloc. Sans texte à gauche, ça va ... quelque chose m'échappe.
https://jsfiddle.net/2fk0su1q/1/

J'ai largement simplifié le truc car c'était un vrai bordel  , enfin si j'ai bien compris ce que tu voulais faire  https://jsfiddle.net/zhx196k5/

Mais bon je suis loin d’être un spécialiste en CSS    il y a surement moyen de faire mieux et plus "propre"

 
Oui, c'est un peu le    
Ton code, séparément fonctionne bien; dès que je le "mélange" avec le mien, pour obtenir la présentation souhaitée, ça devient le cirque   même avec des modifs.
 
Il y a une solution, puisque la notice(d'une carte mère) est présentée de telle manière qu'il y a du texte à gauche, les images superposées au centre, et encore du texte à droite.
J'ai codé cette notice avec du texte à gauche et les images à droite, la présentation est correcte, mais j'aimerais bien trouver la solution.
Il y a encore du chemin à parcourir pour devenir "expert" en CSS.
Merci pour ta réponse; on va continuer à chercher. Je n'ai pas trouvé un exemple dans cette version, sur le Web, malgré tout ce que l'on peut trouver.

Qu'est-ce qui ne fonctionne pas au juste ? Tu as juste a remplacer les images et les textes par les tiens, et ajouter tes modifications personnelle, border-radius, color etc.
 
Ce bout de code, ces 'boites' qui contiennent les 2 images au milieu et du texte de chaque coté elles vont elles-mêmes avoir un parent et c'est sûrement à ce niveau là que ça doit coincer. Tu as peut être certaines propriétés héritées qui foutent le bazar.
 
d'ailleurs tu peux même encore simplifier : https://jsfiddle.net/ghmebtLy/
 
Si tu veux ajouter du texte en dessous tu peux suivre cet exemple : https://jsfiddle.net/0ncjowpq/  les border, margin et padding c'est juste pour que tu puisses bien distinguer les différents éléments.

 
Dans ton exemple, si je code mes images et mon texte, tout va bien, sur JSfiddle.
https://jsfiddle.net/m0zhps8t/
Dans un fichier notepad++ je n'obtiens pas le même affichage, lorsque je mets tout mon texte avec toutes les images, je n'ai pas encore trouvé la raison    
 
Voilà ce que je souhaite, avec les images centrées, et le texte de chaque côté des images; je ne pensais pas galérer autant en voulant effectuer cette autre présentation.
Visiblement, quelque chose m'échappe (je me répéte ...) mais je ne perds pas espoir    
En tout cas, merci pour ta patience    
https://jsfiddle.net/z8ohrjq6/

La dernière tentative n'est pas spectaculaire. Le problème vient du fait que j'ai des div avec seulement du texte, et d'autres avec du texte et des images (texte à gauche, images au centre et texte à droite). Je n'arrive pas à positionner  correctement ces deux types, à tel point que je ne sais plus ce que je fais...
De plus, je ne souhaite pas t'ennuyer plus que nécessaire, tu m'as donné les éléments qui conviennent, mais c'est moi qui patauge ...
J'abandonne cette présentation qui commence  à m'agacer. Rires !
https://jsfiddle.net/2z5dqmhw/

C'est normal le CSS c'est pas toujours évident, surtout quand on débute, mais tu vas y arriver.  C'est pas non plus sorcier ce que tu veux, après de mon côté ce que tu veux faire exactement, c'est pas hyper clair non plus    
 
Je pense que tu devrais reprendre proprement depuis le début, surtout que c'est assez vite fait.  En évitant de multiplier les divs et les classes, mais plutôt les réutiliser (c'est l'idée des classes d'ailleurs ) et éviter de styliser dans ton html (enchainer les <br> etc.)  Je pourrai te donner un coup de pouce en fin de semaine.  
 
 
 

 
J'ai essayé plusieurs manières au niveau du conteneur, sans trop de résultat.
Concernant les </br>, il y a beaucoup de phrases courtes, les unes au dessous des autres; je vais les placer dans des listes non ordonnées ou de description). Ça supprimera pas mal de ces balises.
Pour la présentation, il faut une page partagée en 3 colonnes, avec un espace de 5px entre chaque colonne. Il faut 8 colonnes.
Certaines colonnes ont besoin d'être divisées en trois parties, pour texte à gauche, images centrées (quelque fois une en dessous de l'autre) , texte à droite.
Certaines autres colonnes ne contenant que du texte n'ont pas besoin d'être divisées puisque le texte prendra toute la place.
Et enfin, il y aura des colonnes "mixtes" avec du texte sur tout la largeur de la colonne, et du texte à gauche, images au centre, et texte à droite.
 
En gros :
|Texte à gauche | image |Texte à droite |  type de colonne
                       | image |
 
 
| aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa|  autre type de colonne  
 
 
|aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa|  colonne "mixte"
|Texte à gauche | image | Texte à droite|
 
Je continue mes listes ...
 
 

Salut, avec cette base tu peux normalement tout agencer et mixer comme tu souhaites : https://harmo88-layout.netlify.app/
 
 
C'est assez simple,  
 
1/ Tu as le body qui qui va centrer tous tes éléments (conteneur ou autre) et les afficher en colonne, donc chaque fois que tu rajoutes un élément qui a pour parent direct <body> il va toujours les superposer et les centrer  
2/ Chaque container peut contenir X éléments (bloc de base (.box)) et va toujours essayer des les afficher en row (ligne) en fonction de l'espace disponible, sinon l'élément passe en dessous et ainsi de suite.
3/ Chaque container s'adapte à la hauteur du/des "bloc de base" enfant le plus haut, bloc qui lui même s'adapte à son contenu.
 
 
J'ai mis une largeur min/max arbitraire au bloc de base (.box) (c'était surtout pour voir ce que je faisais) mais à toi d'adapter.
 
 
En fait quand tu veux ajouter texte/image/texte tu ajoutes simplement un bloc .mixed à l'intérieur de .box avec les classes qui vont bien. du coup a l'intérieur d'un bloc (.box) tu peux ajouter autant de (.mixed) que tu veux.  
 
Si tu veux 2 (ou plus) images dans ton bloc .mixed, tu les ajoutes simplement dans .image-container et elles viendront se superposer.
 
Tu peux même faire texte/texte/image ou image/texte/texte
 
 
En bas de la page t'as les sources + Il y a quelques commentaires dans le fichier css qui pourront t'aider
 
 
 
Je précise que je ne suis pas un savant en CSS, il y a plein de façons de faire, mon exemple n'est pas du tout un guide des "bonne pratiques"
mais ça fonctionne tout en étant plus simple que ce que tu avait fait, et avec peu de classes au final, et qui sont toutes réutilisables.

 
   
Si avec çà je ne m'en sors pas, je suis bon pour la retraite (j'y suis depuis un bon moment ...).
Tu as raison, il y a plusieurs façons pour obtenir le même résultat, il y en a qui sont parfois un peu déroutantes.
Apprendre le code en autodidacte n'est pas toujours facile; pour ma part, c'est sans prétention, vu l'âge ...
Je vois que tu t'en sors honorablement au niveau codage.
Merci encore pour ta réponse; j'attaquerai demain.
 
 

Bonjour HyppO,
 
Ca prend forme, gentiment; tu es en avance sur moi, en ce qui concerne le codage; ta présentation est belle, merci.

Faut dire aussi que ça fait bien 15 ans que je bidouille    mais tu verras avec un peu de pratique ça ira tout seul.
 
Oui apprendre en autodidacte c'est pas toujours simple, mais avec de l'obstination et des bonnes sources on finit toujours par y arriver.  
 
Je ne sais pas quels sont tes objectifs, si c'est juste faire ce site, ou apprendre a coder de façon générale.
 
Une bonne ressource de façon générale c'est https://developer.mozilla.org/fr/docs/Web/CSS
pour apprendre un peu flexbox : https://flexboxfroggy.com/
 
et si t'as besoin d'aide ben tu peux toujours demander.
 
Et si tu veux aller plus loin je te conseille d'installer visual studio code + un petit serveur de développement local (c'est juste un plugin c'est pas compliqué) Avec l'autoreload afin de voir tes modifications en temps réel, et pouvoir ajouter des url relatives etc.

 
Cela fait seulement un an environ que je me suis lancé dans le HTML5 et le CSS3, avec l'aide de quelques adhérents( qui m'ont bien aidé, merci encore à eux) et je ne pratique pas 8 h d'affilée.
Je fais des exercices, j'essaie d'en faire des pages diverses; j'avais mis en ligne un site d'hélicoptères radio commandés sur Orange mais les domaines ont été supprimés.
Le problème, la plupart du temps, je ne pratique pas l'anglais (je ne vais pas m'y mettre à 76 ans, mes neurones ne résisteraient pas   ).
J'ai acheté des bouquins traitant de flexbox et grid; comme tu as pu le constater, je maîtrise mal le positionnement des box ... pourtant c'est important.
Et l'autre problème, dû à l'âge, c'est la mémoire qui est moins performante   , on fait avec ... pour cette raison, j'hésite à me lancer dans le javascript, pHP, SQL, je pense que ça serait un peu trop.
De formation, j'étais plutôt mécanique, électricité , électronique, automatisme pneumatique, hydraulique, en me formant en dehors du boulot, en stages intensifs ... de la folie pure  
Maintenant, cool ...

Bon, c'est terminé, quelques vérifications (fautes de frappe éventuelles, erreurs d'images ... ).
Egalement augmenter l'espace entre deux photos superposées pour que le texte corresponde bien à l'image concernée.
Merci pour ton aide, elle m'a été très utile. Hardware est un bon site, on y trouve une aide sérieuse.

Cool    Est-ce que tu as mis ton site en ligne quelque part ?  Est-ce que tu as d'autres projets ensuite ?

 
   
Non, je ne le mets pas en ligne, je n'ai pas renouvelé le domaine cette année; le site de l'hélico radio commandé n'étant plus guère fréquenté (le drone a supplanté  l'hélico) et le domaine gratuit d'Orange  
ayant été supprimé, je "travaille" en local. J'ai installé Mamp.
De plus cette page est le reflet d'une notice livrée avec un nouveau PC que j'ai voulu coder, comme je le fais avec d'autres, ça n'a guère d’intérêt collectif.  
Parfois je traduis le texte en anglais avec un traducteur, avant d'éditer le texte, à condition que l'anglais n'ait pas d'abord été traduit depuis du chinois, ou autre langue    
Un jour, depuis un traducteur, j'ai trouvé une musaraigne dans une notice technique, j'étais mort de rire !
Ça prend du temps, ainsi, je ne m'ennuie pas.
Je passe également beaucoup de temps à retoucher mes photos (principalement animalières que je pratique depuis une cinquantaine d'années); en période hivernale, c'est plus calme.  
Pour un nouveau projet, je ne sais pas encore ce que je veux faire ... c'est tellement vaste et j'ai encore beaucoup à apprendre.
Un exercice me donne parfois des idées de pages à réaliser, je me lance.
Je regarde aussi le code de sites importants et je me dis que pour en arriver là, il va me falloir beaucoup de temps ...

Je reprends un site que j'aimerais rendre responsif, au niveau des images; pour le texte c'est bon.
Sur la page d'accueil, il y a une photo dont la taille est 1360 x 378 px.
Jusqu'à 1360 px à l'écran, je souhaite l'afficher à 453 x 126 px avec une médiaqueries, mais je n'y parviens pas ...
https://jsfiddle.net/o4t7v380/
Pour les pages suivantes, je suppose qu'il faudra appliquer le même méthode.

Pour rendre une image responsive, le plus simple c'est de lui donner une largeur maximum de 100% et une hauteur automatique.

 
Si tu veux aller plus loin (en chargeant des images de poids différent par exemple) :
https://developer.mozilla.org/fr/do [...] ive_images

 
Bonjour mechkurt,
 
J'avais essayé ton code, sans résultat ... on ne voyait que la partie centrale de la photo. C'est pourquoi je voulais la réduire en taille et la charger avec une mq.
Parfois ça fonctionne, parfois pas; je dois trouver pourquoi.
J'avais aussi  placé la photo dans un div, pas bon non plus.
Je vais regarder le site que tu m'as indiqué; il y a aussi un sujet sur Openclassrooms qui a l'air intéressant, en ce qui concerne les images responsives.
Merci pour ta réponse.

Salut, tu peux aussi regarde du coté de la propriété object-fit, ça pourrait t'aider.
 
 

 
Salut HyppO,"
OK merci; avec picture, source media ... ça ne fonctionne pas correctement, soit j'affiche la "petite" photo, soit la "grande" mais pas de changement en fonction de la taille de l'écran.
Ou alors je m'y prends mal ... j'ai regardé sur Alsa création, ça parait compliqué avec le ratio différent selon les iphones 3-4 ... pour l'instant je découvre et je patauge ...
Avec les exercices ça se passe toujours bien, mais sur un site, c'est différent.
On va décortiquer tout ça ...

ça doit pas être le bout du monde, poste ton code pour voir ce que ça donne.
 
Souvent c'est le conteneur parent et les propriétés héritées qui posent problème.
 
 
Après rassure toi, le CSS c'est facile et compliqué à la fois, c'est pas comme en JavaScript où ça plante et t'as une erreur avec un message. Le CSS ça fonctionne toujours, mais ça ne fait pas ce que tu veux, et tu sais pas pourquoi  

 
Je crois qu'il faut revoir tout le code; en ajoutant des médias queries cela modifie l'affichage, alors que je ne m'y attendais pas, sans doute l'héritage que j'ai du mal à gérer.
C'est un problème de mèmoire ... ce que je n'utilise pas souvent se perd ...
Pourtant, sur cette page, il y peu de lignes ... ça devrait rouler tout seul    
 
Je vais faire une copie et coder différemment au niveau de l'affichage des photos.

Je pense que tu te prends un peu la tête en effet, et qu'une image qui s'adapte à son container serait suffisant, avec les media queries tu t’embêtes pour rien.

Après d'un point de vue optimisation utiliser srcset c'est pas mal, d'ailleurs je l'utilise sur mon site : j'ai deux versions de mes images, une va cibler les écrans de type smartphone/retina,
l’autre les écran non-retina, mais ça n'a rien à voir avec le fait de les rendre responsives, c'est simplement pour avoir une qualité de rendu qui s'adapte au type d'écrans.

Tu utilises aussi trop de classes j'ai l'impression, ce qui forcément te faire perdre un peu le fil.

Sinon l'idéal si tu veux de l'aide c'est de poster ton code ici : https://codepen.io

et idéalement remplacer tes images par un placeholder de la même dimension https://placehold.co/

Comme ça on parle de la même chose, et on voit directement quel est le problème.  

 
OK je regarderai ça demain.

 
Je crois que pour ces propriétés c'est max-width et min-width (sans les i).

 
[code)
<picture class="div1">
 <img src="Images/Helico1B.jpg"  alt="Photo hélico"/>
 <source media="(max-width:799px)" srcset="Images/Helico1Ba.jpg"/>
 <source media="(min-width:801px)" srcset="Images/Helico1B.jpg"/>
</picture>
[/code]
 
 
Tu as raison, mais ça ne change rien, ça ne fonctionne toujours pas ...
 Si je ne mets pas la 1ère ligne "img src ....", la photo ne se charge pas.
 
Je laisse tomber cette manière de procéder; effectivement une image qui s'adaptera à son conteneur sera plus simple. Je l'ai déjà fait sur un autre site et ça fonctionne bien au changement de largeur d'écran.
A vouloir tout tester, je m'enlise sans doute, mais comment évoluer ?

Je dirais, commencer par bien assimiler les basiques.

Les principales valeurs de la propriété display : block, inline, flex, grid...

Pour ça tu as : https://flexboxfroggy.com/ ou encore  https://cssgridgarden.com/#fr

Les positionnement : relative, absolute, static, sticky...

Quelques conseils généraux et idées en vrac.

1/ Ne pas rajouter trop de couches de complexités, commence par ce que tu connais, et renforce ces connaissances (faut que tu puisses comprendre ton code).

2/ Évite le syndrome de la classite aiguë, qui fait qu'on a tendance à créer des classes pour tout et n'importe quoi

=> penser réutilisation des classes.

3/ Essaie de "visualiser" ce que tu fais, imagine tes éléments comme des boites, qui entretiennent des relations les une par rapport aux autres.

Essaie de visualiser cette hiérarchie parent/enfant. Pense ça comme un ensemble de boite, qui contient des boites, qui contient..

4/ En CSS, certaines propriétés sont héritées de l'élément parent, tandis que d'autres ne le sont pas. L "héritage" signifie que si une propriété est définie pour un élément parent, cette même propriété sera appliquée par défaut à tous ses éléments enfants, sauf si ces derniers ont une valeur explicite pour cette propriété.

5/ Essaie de reproduire des sites qui te plaisent, s'il sont bien conçus c'est encore mieux.

6/ Pas obligatoire mais ça aide bien, utilise un bon éditeur de code (genre VSCode), avec de l’autocomplétion, un petit serveur de développement (avec de l'auto refresh) et pourquoi pas ajouter un code formatter comme Prettier pour avoir "visuellement" un code "propre".
Tu pourras aussi installer un thème personnalisé qui te plait, ce sera plus lisible et plus agréable pour travailler : il en existe une infinité https://vscodethemes.com/

Exemple mon vscode :

Tu vois j'ai une extension qui me permet de bien visualiser les couleurs, il existe des milliers d'extensions pour tout et n'importe quoi.

Et quand tu seras plus avancé tu pourras aussi utiliser un preprocesseur CSS, qui te permettra entre autre de spliter ton code pour le rendre plus lisible, et faire plein d'autres choses.

7/ Regarder des videos/tutos, si tu comprends l'anglais je te conseille cette chaine qui est géniale : https://www.youtube.com/@KevinPowell/videos

8/ utilise chatGPT, pour te faire expliquer certain concepts quand tu ne comprends pas, ou pour trouver tes erreurs quand ça ne marche pas.
Même si chatGPT est pas super bon en css, la version 3.5 gratuite est déjà bien suffisante pour débuter.

Bref, avec le code on a pas le temps de s'ennuyer  

 
Ah ! Pour ne pas s'ennuyer, on ne s'ennuie pas    
Visual code, je n'arrive pas à l'exploiter correctement, je n'arrive même pas à exècuter un code ... trop de renseignements en anglais (je maudis cette langue   que je ne connais pas suffisemment pour lire un texte ...).
Je vérifie mon code avec un vérificateur, ça m'aide à corriger certaines erreurs (quand il y en a, ça arrive).
 
Problème avec l'héritage .... ça oui. Pas toujours évident, tu t'aperçois que ce que tu as codé n'est pas correct, il faut parfois un bon moment avant de trouver pourquoi.
Je comprends le principe, quant à l'appliquer ... ça n'est pas du 100%.
 
Des sites, j'en regarde, tant que c'est du HTMl et du CSS ça va (encore qu'il y a des balises que je ne connais pas, dans ce cas je recherche sur le net) mais dès qu'il y a du JS, ou autre, je ne comprends plus.
Je prends des notes, pour contrer les problèmes de mèmoire, je fais un "plan" sur papier pour définir ce que je veux faire.  
 
Parfois, ma logique me déroute   je pense qu'elle faiblit au cours des années    
Le côté positif : j'arrive quand même à coder de belles choses, c'est déjà bien. Quant à devenir un "crac" du codage ............. faut p'tet pas que je vise trop haut    
   
 
 

Normal, Visual Studio Code n’exécute aucun code    c'est un éditeur, et tu peux sans problème le mettre en français.
 
et le "vérificateur" est intégré.  
 

 
Elle est bien bonne celle-là    
Le menu exécution sert à quoi ? Exécuter avec ou sans debugage ... il demande des tas de trucs, j'ai essayé, rien ne se passe, j'ai laissé tomber.
Oui il peut être mis en français, ce que j'ai fait, mais les explications sont beaucoup en anglais ...
 
Notepad ++ me va, au moins je comprends ce que je fais.
Imgur demande d'accepter la pub ... pas question, je suis allergique à la pub ...    
Merci pour toutes tes infos.

Elle est bonne, mais pourtant, vraie. Comment dire, oui tu peux en effet appuyer sur ce bouton et utiliser le mode debugger , mais pour ce qui t'intéresse, à savoir construire des pages en html/css ça n'est d'aucune utilité.
Surtout qu'il faut configurer le mode debogage, je crois pas me tromper en disant que c'est absolument pas ce que tu veux faire, et c'est normal que rien ne se passait.

De plus, il va de toute façon falloir quelque chose pour interpréter ton code, si tu fais du js, un navigateur, ou node.js. Vscode tout seul ne peut pas faire grand chose. Ce n'est pas un interpréteur de code, mais un éditeur de code, certes très avancé.

Je pensais que ça te serait profitable de l'utiliser, avec ses fonctions d’autocomplétion, un live server et plein de chose pour se simplifier la vie.

Si tu arrêtes dès que tu n'arrives pas quelques chose, ça va être compliqué    personne ne s'est levé un matin en sachant programmer et manier tous ces outils.

En tout cas je t'ai donné des infos pour progresser, après tu en fais effectivement ce que tu veux    

j'ai pas compris l'histoire d'imgur par contre.

 
Si je clique sur le lien Imgur que tu m'as indiqué, un éditeur s'ouvre avec une fenêtre qui me demande de le mettre en liste blanche, pour recevoir la pub.
Un code commence à la ligne 19 (je suppose que les lignes précédentes sont masquées.
Une erreur est indiquée : proprièté inconnue : "boder: none;" au lieu de "border: none;" je nai pas accès à la correction, puisque je n'autorise pas la pub ...
 
" Si tu arrêtes dès que tu n'arrives pas quelques chose, ça va être compliqué    personne ne s'est levé un matin en sachant programmer et manier tous ces outils. "
 
Tout à fait d'accord, j'atteins peut être le sommet de mes possibilités ... auquel cas il me faut l'admettre ... je ne vais pas rajeunir, mes neurones non plus    
Je ne vais pas non plus vous mobiliser sans cesse et abuser de votre temps. J'apprécie ce que vous faites, je n'ai pas votre niveau, je ne comprends pas tout, surtout certains mots franco-anglais.
C'est de votre époque, il est normal que vous y soyez à l'aise.
 
J'ai fait un test de maths, je ne suis plus capable de résoudre une équation à  deux inconnus ... Rien à dire, c'est un fait. Est-ce grave docteur ? Pour moi non.
Tout cela na va pas m'empêcher de continuer, à mon rhytme.
   
 
 

C'est un forum d'entraide ici, il y'a toujours quelqu'un pour conseiller quelqu'un de motivé (on est au moins 6 ici à l'avoir fait pour toi à un moment ou à un autre,c a fera bientôt 2 ans que tu as commencé ce fil de discussion).
Continue à poser des questions !
 
Ou en tout cas ne cesse pas d'en poser par peur de nous ennuyer ou nous faire perdre notre temps ! ^^

Dites, ôtez-moi d'un doute. Les cordons USB-A vers USB-C sont bien tous bidirectionnels, n'est-ce pas ?

Je penses oui mais je crois surtout que tu t'ai trompé de post ! ^^

ah oui zut

 
Une question concernant placehold. Je suppose qu'il simule l'emplacement d'une image ... comment l'utiliser pour placer les images dans codepen ?
J'ai essayé ça :

Sûrement pas la bonne méthode, ça ne fonctionne pas.
Est-ce qu'il faut ouvrir un compte pour avoir accès aux différentes possibilités ?
Idem pour codepen ?
 
Avec les MQ j'ai réussi à rendre les images responsives, sauf deux qui se trouvent sur la page d'accueil; elles héritent du width de  la première photo affichée, mais je ne sais pas comment annuler cet héritage.    
J'ai essayé all ou display none, sans résultat. Pour cela je voulais utiliser codepen pour que tu puisses voir le résultat.
 

T'as oublié un "  à la fin