IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

HTML Discussion :

Mettre un texte sous mon image


Sujet :

HTML

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Homme Profil pro
    Étudiant
    Inscrit en
    Octobre 2018
    Messages
    23
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2018
    Messages : 23
    Par défaut Mettre un texte sous mon image
    Bonjour à tous,

    J'aimerais insérer une trentaine d'image sur un page html et indiquer un texte centré sous chacune de ces images.

    Voici mon code html :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    <p class="bloc-image">
     
    					<a href="#">
    						<img src="images/barre.jpg" alt="Barre" title="Pièce1 : barre" />
    					</a>
     
    					<span><strong>Pièce 1 : barre</strong> </span>
     
    					<a href="#">
    						<img src="images/Butée.jpg" alt="Butée" title="Pièce 2 : Butée" 
    						height="250px" 
    						width="300px"
    						/>
     
    					</a>
     
    					<span><strong>Pièce 2 : Butée<br>Pièce 3 : Axe_butée <br> Pièce 4 : Ressort_butée <br> Pièce 5 : Sertissage_butée</strong> </span>
    <br>
    <br>
    					<a href="#">
    						<img src="images/plaque_plastique_photo.jpg" alt="Plaque plastique" title="Pièce6 : Plaque plastique" 
    						height="400px" 
    						width="200px" 
     
    						/>
    					</a>
    					<span><strong>Pièce 6 : Plaque plastique</strong> </span>
     
    					<a href="#">
    						<img src="images/support.jpg" alt="support" title="Pièce 7 : Support" />
    					</a>
    					<span><strong>Pièce 7 : Support</strong> </span>
    </p>

    et mon code CSS :

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    p.bloc-image {
       display: inline-block;
       text-align: center;
    }
    p.bloc-image img {
      box-shadow: 3px 3px 6px #383838;
      margin : 10px;
     
    }
    p.bloc-image span {
       display:inline-block;
     
    }

    Seulement voilà ce que cela me donne, le texte n'est pas centré en dessous de l'image comme je l'aimerais.

    Nom : pb texte.png
Affichages : 200
Taille : 566,9 Ko



    Auriez-vous une solution à ce soucis ?

    Merci par avance

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 211
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 211
    Par défaut
    Bonjour,
    revois la structure en utilisant des éléments <figure>, par exemple, associés à des éléments <figcation>
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    <figure>
      <img src="images/barre.jpg" alt="Barre" title="Pièce1 : barre">
      <figcaption>Pièce 1 : barre</figcaption>
    </figure>
    avec un minimum de CSS tu devrais arriver à tes fins.

Discussions similaires

  1. Mettre un texte sous une image
    Par Invité dans le forum Balisage (X)HTML et validation W3C
    Réponses: 5
    Dernier message: 06/02/2012, 03h55
  2. mettre du texte sur une image
    Par torn33260 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 1
    Dernier message: 03/02/2008, 12h03
  3. Texte SOUS l'image du JButton
    Par JamesP dans le forum AWT/Swing
    Réponses: 1
    Dernier message: 27/08/2007, 17h58
  4. Emplacement d'un texte sous une image
    Par ghyosmik dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 26/12/2005, 11h53
  5. [CSS] Mon texte ou mon image disparait sous IE.
    Par KneXtasY dans le forum Mise en page CSS
    Réponses: 6
    Dernier message: 05/12/2005, 17h59

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo