Reprise du message précédent :

Il y'a des solutions pour ça tu peux soit mettre une couleur rgba (rgb + alpha donc plus ou moins transparente) pour unifier le fond de ton bloc text ou mettre du text shadow a l’opposé de ta couleur de texte.
Exemple ici : https://jsfiddle.net/72p5mzgw/1/

 
Ce qui n'est pas évident c'est l'équilibre entre l'image et le texte.
Dans ton exemple le texte l'emporte sur l'image, parce qu'il est noyé dans un background; de ce fait l'image est en partie masquée.
Je testerai quand même; avec une photo minimaliste ce sera peut-être plus simple. Un sujet principal avec rien autour, ça laisse de la place pour du texte ...
Sinon, mon projet est pas mal diversifié, avec une page d'accueil  comportant le menu qui renvoie à d' autres pages secondaires, qui ouvrent d'autres pages par des listes déroulantes.
Retour à la page d'accueil, ou à la page secondaire "principale", au choix selon les besoins.
Ça n'est pas immense, mais j'essaie d'utiliser tout ce que j'ai emmagasiné depuis le début; il y a des oublis inévitablement ... on re-pioche sur le net.

Pour le moment tu t'en sort très bien !
Et oui, chaque arbitrage sera différent entre texte et image parfois on peut utiliser en background et parfois ce n'est pas une bonne idée, on entre dans le domaine un peu flou de la sensibilité "artistique" de chacun...

 
Sur le plan artistique, chacun a sa propre perception, selon son imagination, à laquelle il faut laisser libre cours jusqu'à trouver ses propres limites.

Pour ces pages qui sont d'ordre technique, j'ai choisi de ne pas afficher le texte par dessus l'image, ce qui rend la lecture difficile. L'opacité est à 1.
Des moteurs en coupe, des pistons, des disques de frein, carrosserie .... il vaut mieux bien voir l'image séparément, et faire défiler le texte et l'image, pour une meilleure visibilité de chaque.

J'aimerais insérer dans ma page d'accueil une animation, qui fonctionne séparément, mais qui me met la pagaille dans l'affichage de la page, lorsque j' intègre l'animation ... ce qui ne me surprend pas.
Après plusieurs tentatives, je n'obtiens pas l'affichage correct de la page.
Je veux intégrer https://jsfiddle.net/jeu35pd0/
Dans https://jsfiddle.net/p14bshof/
J' espère ne pas avoir à changer toute la page ...

Je dirais que ton display:flex et ton height 100vh sur le body c'est osé...
En tout cas en virant ça :

Ca semble fonctionner...
si tu veux faire de l’affichage flex, utilise plutôt un <div> conteneur (ou une autre balise sémantique genre <section> ou <article> ) .

 
J'avais pourtant viré body { ...... mais il me semble aussi avoir viré autre chose ... dont je ne me souviens plus, à force de  modifier on s'y perd ...
Pas encore 100% de réussite dans ce genre d'application; ça va venir.  
Merci pour tes réponses pertinentes.
 

OK, c'est parfait. !

Je voudrais pour les mobiles, diminuer la taille du titre et du logo. Les médias queries, je les ai copiées sur un site. Je trouve les possibilités un peu nombreuses.
Avec le code actuel, je n'obtiens pas les résultats espérés, sans doute une mauvaise interprétation de ma part. Pas encore à l'aise avec l'affichage, en fonction du type d'écran.
https://jsfiddle.net/9b52ynr0/

Les medias queries doivent être placées après les règles CSS qu'elles sont censées remplacer, ou alors il faut utiliser l'indication CSS "!important" dans la règle de la media querie :

Ou :

 
   
Tu m'apprends où placer les MQ; comme ça n'est pas indiqué dans la plupart des exercices, je n'avais pas prêté attention à l'emplacement. Après coup, ça paraît logique ...
J'en déduis que ma logique en a pris un coup ...
Il est vrai que dans les exercices divers, les MQ sont bien placées, on n'y prête pas suffisamment attention.
Merci pour ton aide, toujours aussi précieuse.  

Pas beaucoup de temps, mais je suis quand même de loin ta progression.

 
Tu m'as accordé beaucoup de ton temps; ça n'est pas comme si je me formais pour obtenir une certification ... ce temps-là est loin.
C'est un loisir, malgré le fait que la mémoire sature plus vite qu'étant jeune; il faut faire avec. J'avais failli abandonner, parce que je me rendais compte que je ne pourrais plus retenir tout ce code, facilement.
Vous m'avez relancé, et je continue, à mon rythme.

Un petit bout d'essai, en attendant mieux ...
 
https://jsfiddle.net/on6fcbst/

Je voudrais créer trois liens, pour ouvrir trois pages; avec <a href> ça ne fonctionne pas. Ou je m'y prends mal ?

https://developer.mozilla.org/fr/do [...] /Element/a

 
   
 
J'avais essayé avec une liste, ça positionne différemment l'affichage de cette liste, par rapport à la position initiale que je souhaite conserver; si ça fonctionne, je repositionnerai en relatif, ou en absolu ...
C'est un ancien exercice que j'adapte, et qui apprenait la barre de navigation, sans rendre les liens actifs.
Si besoin j'afficherai le code complet avec jsfiddle.

Ah oui non mais on s'en fout du conteneur du <a>, j'ai mis des <ul><li> mais ça pourrait être des <header><section> ou bien <div> c'est surtout la syntaxe du <a> qui est importante...
 
Dans ton exemple tu n'as même pas de <a href="destination du lien">texte affiché par le lien</a>.

 
Dans cet exemple, je m'emmêle les crayons, je ne sais pas pourquoi ...
Normalement, j'arrive à créer des liens internes, externes, mais là, il y a plusieurs class et ça m'embrouille ...c'est fou    
Qui plus est, en ce moment je ne peux pas être à 100%, j'en ai encore pour un mois ... patience.
Je pourrais simplement retranscrire des pages que j'ai créées et qui fonctionnent, mais cet exemple, parce qu'il me pose un problème, j'ai envie de trouver la solution.
 
   

Tout compte fait, simplifions les choses ...

J'ai repositionné la div au bon endroit, et ça roule. Il ne reste plus qu'à coder les trois pages.
Pourquoi se compliquer le code ?

Bonjour,
Je voudrais afficher une image sur toute la largeur de la page, et que le texte en dessous, placé dans une div, ait une largeur définie (ex: 1000 px). J'ai bien l'affichage souhaité, tant que je ne réduis pas la largeur de l'écran. En plaçant le texte dans la div, j'ai perdu en flexibilité, il y a un ascenseur latéral.
https://jsfiddle.net/qhoL9r0a/

 
 
Pour le texte, j'ai ajouté une média queries :
 
@media screen and (maxiwidth: 640px) {
 width: auto;
}
 
C'est bon pour le texte, mais pas pour l'image ... qui a pourtant une class .resp avec un width: auto
Je ne suis pas encore à 100% pour les mq    

Dans ce genre de cas, tu peux utiliser min-width et/ou max-width (ça existe aussi pour height), ça évite une media query (dans ton cas de 640 a 999px de largeur d'écran tu auras quand même un ascenseur).
 
https://developer.mozilla.org/fr/docs/Web/CSS/max-width
 

 
Tu auras ainsi ton bloc de texte centré et ne faisant jamais plus de 1000px de large mais qui restera "responsif".

 
J'avais essayé, j'avais sans doute commis une erreur ...
J'avais également essayé img srcset, est-ce toujours d'actualité ? A revoir.
Une dizaine de pages à modifier; j'aime bien la présentation du texte dans cette configuration, ça parait plus lisible que d'utiliser toute la largeur, sur un grand écran.
Merci pour ta réponse.

Bonjour,
 
Aperçu de quelques pages; que penser de cette présentation ?
 
https://jsfiddle.net/spr0eh5u/
 
https://jsfiddle.net/uqe6zcm9/

Bonjour,
Dans une page d'accueil d'un site que j'ai créé, je souhaiterais, à partir d'un lien interne, afficher une page qui contiendrait les rensignements de la clientèle d'une entreprise.
Deux possibilités, semble t'il :
- Créer un tableau Excel et l'incorporer à la page. Facile dans Access, mais moins en HTML ...
- Créer un formulaire en HTML, mais je n'ai pas de serveur, pour recueillir les données; je travaille en local, et cela ne me semble pas plus facile.
Laquelle de ces deux méthodes serait la plus appropriée ?

Ta question n'est pas très clair, désolé de te le dire.
Il me semble que tu voudrais enregistrer des informations relative au gens qui passent sur le site (du type : formulaire de contact, livre d'or, forum, etc.).
Si c'est le cas Excel ne vas pas t'aider, au mieux il va te générer le code html du formulaire de soumission de donnée.
Tu auras forcément besoin d'une technologie "coté serveur" pour stocker les données du "client".
https://www.google.com/search?q=web+client+serveur
 
Ça n’empêche pas l'auto hébergement, lorsque l'on développe un site, il est courant qu'on le test "en local", le plus souvent sur un serveur de l'entreprise mais ça peut être sur un serveur sur la machine.
Par exemple : https://www.wampserver.com/
 
Par contre il va falloir apprendre un nouveau langage de programmation (voir 2 en comptant celui de la base de donnée qui est le mode de stockage le plus "pratique" )...

 
 
Désolé si je me suis mal exprimé ... En fait, je veux créer une liste de clients, avec nom, prénom, adresse, code postal, ville, N° de tél, adresse mail .... et plus si affinité ...
Est-ce qu'un tableau suffirait ?
Je me contenterai de lister quelques clients, puisque c'est un site local; je ne le mettrai pas en ligne, je n'ai pas renouvelé le nom de domaine, concernant le site de modélisme créé il y a un an.
Et Orange a supprimé cette fonction; de ce fait le site n'est plus en ligne.
J'avais, il y a quelque temps survolé Wamp, il va faaloir que j'approfondisse le sujet.

La première question a se poser est : Ton site est il accessible depuis internet ?
Par défaut, en développement (et en local) on est seul a visualiser le site, on peut l'ouvrir vers l’extérieur mais globalement il est préférable de passer par un hébergeur.
 
Deuxième question : Si ton site est ouvert et consultable par d'autre, comment enregistrer les données qu'ils nous renseignent ?
Faire un formulaire html n'est que la première partie du problème, il faut ensuite les envoyer au serveur et les enregistrer.
Pour cela tu auras besoin de nouveaux langages de programmations (php et sql par exemple).
https://openclassrooms.com/fr/cours [...] p-et-mysql

 
Non, je te l'ai dit, je travaille en local, ce site n'est pas hébergé sur Internet et ne le sera pas.
J'ai réinstallé la version 3 ... en 64 bits, mais il ne s'ouvre pas; je clique sur l'icône, quelques petites fenêtres clignotent et c'est tout, wamp ne se lance pas.
Le téléchargement s'est bien passé, pas de message d'erreur, ni à l'installation. Comprends pas ...
 
OK pour le formulaire, je comprends le principe, mettre en application en est une autre ... n'étant pas encore expert (et ne le serai sans doute pas   ).
Je crois que je vais me contenter de créer un tableau en HTML ... vu l'utilisation personnelle de ce site.

Mon mauvais j'avais mal compris, tu voulais afficher des informations client sur ta page, pas en enregistrer...
Un tableau semble approprié, pour l'affichage tu peut soit le faire "en dur", soit apprendre un langage qui va te permettre d'automatiser ça.
En gros tu gère l'affichage d'une ligne et après tu demandes à l'ordinateur d'utiliser ton dictionnaire de donnée pour afficher toutes tes lignes d'après le modèle.

Je me suis tourné vers Mamp, plus simple et au moins il fonctionne. Maintenant je comprends mieux comment fonctionne l'affichage d'un site.
La création de la table « Clients » est terminée; il est vrai qu'automatisée cela serait moins fastidieux que de rèpéter sans cesse des tr, td, th, surtout si il y a une centaine de clients, voir plus.
Bien, les petits pas forment les grands trajets ... Non, pas Confucius ... Harmo  

Je ne vois pas bien comment opèrer avec le dictionnaire de données ( je ne savais même pas que ça existait ...), je vais me pencher sur la question, car ça ne me dit rien pour l'instant.

En fait, c'est l'appellation dictionnaire de données qui m'a leurré, il s'agit d'une base de données; dans un fichier Access j'ai une liste toute prête de clients, il ne me reste plus qu'à l'utiliser, je ne sais pas encore comment,
pour la relation entre HTML et Access. J'avais essayé de créer une gestion de stocks, clients, produits, facturation, mais je bloque dans la gestion des formulaires avec sous-formulaires; je n'avais jamais touché à ce domaine qui est assez complexe à réaliser.

C'est un terme de vulgarisation que je trouvais parlant mais ce n'est pas vraiment du jargon officiel...
Ça peut être un fichier text au format xml ou json ou au contraire une base de donnée.
 
Par contre de ton coté tu as réussi à installer un environnement serveur et monter une table client en un après-midi !?
Je penses que pas mal de boite serait ravi de t'embaucher si tu t'ennuies et/ou que tu as besoin d'argent ! ^^
 
En tout cas au boulot j'ai vu des gens bien moins adaptable et rapide a comprendre que toi !
 
Edit: j'ai pas vu ton edit (même sur le forum tu t’améliores !^^).
Si tu as un fichier Excel et un mamp tu dois pouvoir importer via phpmyadmin ton excel ce qui te créera une table dans ta base de donnée cf. mon tuto plus haut php/mysql

Je suis comme le bon vin, je m'améliore avec le temps  
Il y a une table en Excel importée dans Access, donc j'ai les deux fichiers. On verra la suite demain.

https://jsfiddle.net/5Ltxar93/
 
Dans la partie basse de cette page, il y a une photo d'un connecteur (en position horizontale), en dessous je voudrais placer la même image (en position verticale) ; ces deux images je les voudrais centrées, pour pouvoir écrire du texte de chaque côté (à gauche et à droite).
Je n'arrive pas à placer le texte à gauche et à droite; un côté ou l'autre ça va, mais pas les deux ...

Pour faire des colonnes il y' a eu plusieurs révolutions.
Il y'a 30 ans, on avait rien donc on mettait tout dans des <table><tr><td> avec des taille fixé sur les cellules.
Après on a eu le float, qui permettait de mettre des éléments block cote a cote (mais c'était encore bien compliqué).
Enfin sont arrivé Flex et Grid qui eux étaient déjà beaucoup plus puissant, logique et au final vraiment fait pour ça.
https://www.alsacreations.com/artic [...] ayout.html

J'ai déjà travaillé sur le sujet, mais dans le cas présent, je n'arrive pas au résultat souhaité ... je me contente de placer les images à gauche et le texte à droite. La présentation n'en souffre pas, même si elle ne correspond pas à l'originale.
Il me reste à approfondir le sujet des grid, dans le cas qui m'intéresse pour arriver à reproduire la notice originale qui est sur papier.
On n'en finit pas de découvrir de nouvelles possibilités.

Je sais pas si j'ai bien compris mais c'est ça que tu cherches à faire ? https://jsfiddle.net/mwp3dob8/
 
Si tu veux centrer verticalement les blocs rouge et bleu (qui seront tes images si j'ai bien compris) tu peux appliquer : justify-content: center; sur le conteneur parent.

 
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.