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:

Balise <img> css
Img burn - Télécharger - Gravure
Balise br ✓ - Forum Webmastering
Ouvrir fichier img ✓ - Forum Gravure
Trait css ✓ - Forum CSS
Fichier img - Télécharger - Photo & Graphisme

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 718
10 avril 2019 à 23:18

Bonjour,
https://www.w3schools.com/tags/tag_figcaption.asp

Wyzern
11 avril 2019 à 09:30

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.

jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 718 > Wyzern
11 avril 2019 à 09:36

et bien.. si c'est juste pour jouer sur le css ... utilise des CLASS

Wyzern
11 avril 2019 à 09:54

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;
}

Discussions similaires

la balise <br> ou <br />

Balise </br>

Faire sauter 2 lignes avec br (CSS)

balise <br> HTML