Balise <img> css

Résolu/Fermé
Wyzern - Modifié le 10 avril 2019 à 22:45
 Wyzern - 11 avril 2019 à 09:54
Bonjour,

J'utilise actuellement l'attribut caption dans mes balises <img> sous la forme suivante mais suite à une analyse W3C on m'indique que c'est une erreur. Comment puis je faire la même chose que ce code sans cet attribut caption :

Code html
<div id="CHIOT">
<aside class="AsideParents">
            <figure>
                <img src="*.jpg" alt="Nausicaa" caption ="MAMAN"/>
         </figure>
        </aside>
<aside class="AsideParents">
            <figure>
                <img src="*.jpg" alt="Ice" caption ="PAPA"/>
            </figure>
        </aside>
</div>


Code CSS

 #CHIOT .AsideParents
  {
  display: inline-block;
  width: 35%;
  max-height: 350px;
  min-width: 190px;
  margin: 0;
  }
 #CHIOT img[caption ="PAPA"]
  {
  border: 2px turquoise outset;
  border-radius: 5px;
  min-width: 100px;
  text-align:center;
  height: 200px;
  width: 200px;
  vertical-align: middle;
  }
 #CHIOT img[caption ="MAMAN"]
  {
  border: 2px Fuchsia outset;
  border-radius: 5px;
  min-width: 100px;
  text-align:center;
  height: 200px;
  width: 200px;
  vertical-align: middle;
  }


EDIT : Ajout des balises de code (la coloration syntaxique).
Explications disponibles ici : ICI

Merci d'y penser dans tes prochains messages.


Merci d'y penser dans tes prochains messages.
A voir également:

1 réponse

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
10 avril 2019 à 23:18
1
Si j'uitilise la balise <figcaption> comme dans l'exemple présenté le texte entre la balise va apparaître .
Dans mon code les caption "PAPA" ou "MAMAN" n'apparaissent pas sur le site ils ne me servent qu'à donner le style d'encadrement de l'image.
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650 > Wyzern
11 avril 2019 à 09:36
et bien.. si c'est juste pour jouer sur le css ... utilise des CLASS
0
Si je vous comprends bien il faudrait que je code de cette façon et c'est validé par les règles W3C ?


Code html :
<div id="CHIOT">
<aside class="AsideParents">
<figure>
<img class=MAMAN src="*.jpg" alt="Nausicaa" />
</figure>
</aside>
<aside class="AsideParents">
<figure>
<img class=PAPA src="*.jpg" alt="Ice" />
</figure>
</aside>
</div>

Code CSS


#CHIOT .AsideParents
{
display: inline-block;
width: 35%;
max-height: 350px;
min-width: 190px;
margin: 0;
}
#CHIOT img.PAPA
{
border: 2px turquoise outset;
border-radius: 5px;
min-width: 100px;
text-align:center;
height: 200px;
width: 200px;
vertical-align: middle;
}
#CHIOT img.MAMAN
{
border: 2px Fuchsia outset;
border-radius: 5px;
min-width: 100px;
text-align:center;
height: 200px;
width: 200px;
vertical-align: middle;
}
0