Informatique

Bordel je vais devenir zinzin

je veux juste superposer un texte sur une image, je comprends rien, quand je reduis mon navigateur c'est plus du tout au meme endroit

quelqu'un aurait un tuto CLAIR ET PRECIS a ce sujet svp

Montre ce que tu as fait

Le 29 décembre 2021 à 18:17:13 :
Montre ce que tu as fait

j'ai fais de la merde comme tout ce que j'entreprends dans ma vie de merde
je sors de 7 ans de déscolarisation, je trouve le courage de me lancer dans le dev web et tout ce que je j'entreprends tourne au drame

le site quand je mets pleine écran :
le site quand je rétrécie de plus en plus : les texte au dessus des images se décentre des images

le html :
le css :

le pb vient du html, fais une div pour chaque texte + image

Dédramatise ta situation un peu. Le responsive ce n’est pas le plus simple, et il faut bien faire des erreurs quand on débute. Si tu crois qu'on a tous fait un site 100% responsive du premier coup, les frameworks css avec des aides au responsive ne seraient pas si nombreux.

Déjà ta structure HTML n’est pas bonne. Si tu veux que ton texte soit "relatif" à ton image, alors tu dois mettre ton titre à l'intérieur.

<div id="container2"> 
   <img src="img/chauffeur1.jpeg" id="client02">
   <div id="texte1">prenez la route en tant que chauffeur TOP CHRONO</div>
<div>

En faisant ça, ton titre sera probablement en dessous de ton image. Il faut mieux appliquer une image de fond à ton élément "container02" comme ceci : ( https://developer.mozilla.org/fr/docs/Web/CSS/background )

 #container2 { 
   background-image: url('img/chauffeur1.jpeg'); 
   background-position:center; 
   background-size:cover;
}

Utilise plutôt les classes au lieu des ID pour appliquer du CSS. Les ID c'est bien pour récupérer un élément précis et unique avec du Javascript. Les ID doivent être uniques alors que les classes peuvent être réutilisées à l'infinie sur plusieurs éléments. ( https://developer.mozilla.org/fr/docs/Web/CSS/Class_selectors )

Depuis quelques années maintenant, tu peux utiliser les flexbox pour avoir un responsive plus pratique pour les listes d'éléments. Les flexbox t'aident à passer des "cases" les unes en dessous des autres si la taille de la page n'est pas assez grande. Par contre le concept de flexbox est assez difficile à comprendre au début, mais c'est un bon outil quand on sait s'en servir : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Sinon il y a des frameworks CSS qui fonctionnent avec un système de grille (une page est découpée en 12 colonnes). Tu peux alors dire que chaque vignette fait 4 colonnes en version bureau (3 vignette sur une même ligne), mais 6 en version tablette (2 vignette sur une même ligne) et 12 en version mobile (une vignette sur une même ligne).
Ex : https://materializecss.com/grid.html

De mon côté j'utilise surtout les flexbox avec une bonne structure HTML et en faisant attention à ne pas utiliser n'importe quelle règle de CSS (les marges ont par exemple tendance à déclarer les éléments sur la droite sans prendre en compte la taille horizontale maximum). Si un moment je fais un peu n'importe quoi, soit je recommence tout, soit j'applique des médias queries (https://developer.mozilla.org/fr/docs/Web/CSS/Media_Queries/Using_media_queries)

t'as pas tant l'air d'avoir un problème avec le responsive qu'un problème avec le css tout court (et le html aussi du coup)

pourquoi t'utilises des unités relatives à la hauteur ou la largeur de la fenêtre ?
pourquoi tu résoud un même problème (positionnement) de plusieurs façons (le texte 3 se ballade parce que tu l'as positionné en utilisant la largeur de la fenêtre alors que les autres textes sont positionnés en pourcentage) ?
pourquoi t'utilises que des id ? tu pourrais définir une classe pour les textes 1, 2 et 3, ça t'éviterait une tonne de copier/coller inutiles
pourquoi t'as crée des "conteneurs" qui ne contiennent que les images et pas les textes que tu veux pourtant coller aux images ?

dans l'immédiat t'occupes pas du responsive, et reprend un tuto de A à Z (openClassrooms devrait faire l'affaire)
si c'est fait correctement ton site ne changera pas d'apparence quand tu réduiras la fenêtre
à ce moment là tu pourras te demander quelles modifications sont nécessaires pour que la page reste aussi lisible et ergonomique que possible sur mobile (note : on est déjà plus sur un problématique de designeur que de dev) et tu feras mumuse avec flexbox, les media queries, tu modifieras les unités etc... pour obtenir le résultat attendu

tips :
indente correctement ton code pour faciliter sa lecture
utilise l'inspecteur de ton navigateur (clic droit => inspecter) pour jouer avec les règles css directement
google est ton ami, et si tu deviens dev un jour tu passeras plus de temps à lire des tutos et des topics sur stackoverflow qu'à taper du code

Alors j'avais commencé à répondre mais j'ai mis ça de coté pendant les fêtes, du coup au lieu de paraphraser ce qu'on dit les autres qui sont de très bons conseils pour le coup, il faudrait aussi que tu mettes de coté la propriété position.
Mets ça sur un bloc notes ou autre, pour que tu le gardes en mémoire si tu veux continuer à te former en profondeur sur le CSS, c'est extrêmement utile mais c'est une notion assez difficile au début à comprendre puisqu'il faut bien saisir l'importance du stacking context et le flux des éléments en CSS :
Plus d'infos :

https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index

Si tu veux juste faire un site web qui fonctionne et ne pas avoir à te former en profondeur sur le CSS Bootstrap (ou autre)