Mettre un texte sur des images

Fermé

Taijin Messages postés 48 Date d'inscription mercredi 15 juillet 2020 Statut Membre Dernière intervention 6 septembre 2021 - 27 juil. 2021 à 18:47
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 - 28 juil. 2021 à 10:03

Bonjour à tous, je m'adresse à vous car je codais en HTML et CSS afin de créer une ligne de 4 images contenant un texte chacune. J'avais réussi a avoir ma ligne cependant lorsque j'ai voulu rajouter du texte tout s'est mis en colonne
Comment puis-je faire?
Merci par avance

Mon code HTML:

Mon code CSS:

A voir également:

Corinne copie un texte sur le web et le colle dans un document avec l'option "texte non formaté" (aussi appelée "texte sans mise en forme"). qu'est-ce qui est conservé ?
Mise en forme conditionnelle excel texte - Guide
Transcription audio en texte word gratuit - Guide
Mettre un texte en majuscule - Guide
Insérer une image dans word sans bouger le texte - Guide
Transcription texte en audio - Guide

3 réponses

Réponse 1 / 3

Pierrecastor Messages postés 41474 Date d'inscription mercredi 5 novembre 2003 Statut Modérateur Dernière intervention 18 janvier 2025 4 145
27 juil. 2021 à 20:12

Salut,

Ca sera bien plus pratique si tu colle ton code dans les balises code html et css du forum.

Clique sur la flèche du bas à droite de la petite icône <>

Taijin Messages postés 48 Date d'inscription mercredi 15 juillet 2020 Statut Membre Dernière intervention 6 septembre 2021
27 juil. 2021 à 20:19

<div class="images">
            <div class="img1">
                <p> Samsung </p>
                <img src="Photo/samsung.jpg">
            </div>
            <div class="img2">
                <p> Samsung </p>
                <img src="Photo/samsung.jpg">
            </div>
            <div class="img3">
                <p> Samsung </p>
                <img src="Photo/samsung.jpg">
            </div>
            <div class="img4">
                <p> Samsung </p>
                <img src="Photo/samsung.jpg">
            </div>
        </div>

.images 
{
  width: 90%;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  vertical-align: middle;
}

.images img
{
  border: solid grey;
  width: 22%;
  margin-left: 2%;
  margin-top: auto;
  margin-bottom: auto;
  border-radius: 10px;
  transition: all 0.3s ease-out;
  z-index: 2;
}

.images img:hover
{
  border: solid red;
  border-radius: 13px;
  transform: scale(1.1);
  z-index: 9;
 box-shadow: 7px 7px 2px 1px rgba(0, 0, 255, .2);
}

Réponse 2 / 3

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
28 juil. 2021 à 10:03

Bonjour,

Tu peux appliquer la règles css display: flex; sur ton conteneur .images pour aligner les div enfants horizontalement.

Dans ton cas, préfères l'utilisation de la balise html span à la place de la balise p. La balise p possède par défaut des marges css et d'un point de vue sémantique elle doit être utilisée pour des paragraphes.

Exemple : https://jsfiddle.net/7v80cd6y/

Plus d'infos sur flexbox : https://developer.mozilla.org/fr/docs/Learn/CSS/CSS_layout/Flexbox

Bonne journée,

Réponse 3 / 3

yikorec
27 juil. 2021 à 19:28

Pose la méme question ici https://www.developpez.com/

Discussions similaires

copie de texte

Internat nourriture

Excel si cellule contient texte alors...

Excel formule : savoir si une cellule contient partie texte

Table des matières dont les titres n'apparaissent pas..