Balise img avec les attributs class ou id

**Touty11** · 22/04/2012, 17h31

Bonjour,

J'ai un problème concernant mes images.

J'aimerais qu'une de mes images soit encadrée et avec une taille bien spécifique etc.. et laisser mes autres images comme elles sont.

J'avais donc codé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<img src="mon-url" class="imageg" alt="A"/> 
<img src="mon-url" class="imaged" alt="B"/>
<img src="mon-url" class="bandeau" alt="C">

Ceci marche, mais n'est pas validé par a W3C.
J'essaie donc de chercher un moyen pour le rendre valide, mais sincèrement là, je m'avoue vaincue.
Il faut savoir que je suis une débutante en programmation...

PS : J'avais trouvé cette "astuce", dans mon CSS :

img {
mes contraintes
}

Sauf que ça me fait ça pour toutes les images... Normal. Et je ne veux pas..

Help !

**Graimbault** · 22/04/2012, 17h45

Bonjour,

Bon alors, à première vue ca ne semble pas trop faux votre code.

Pas trop car normalement, il y a un espace avant "/>" (fermeture de la balise image) et je n'en vois pas dans votre code. Ce qui donne donc:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img src="mon-url" class="imaged" alt="B" />

Sinon, effectivement si dans le css vous mettez

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
img { 
   ... 
   propriétés 
   ... 
}

ca va s'appliquer à toutes les images et vous l'avez bien comprit.

En revanche, ce qui est faisable c'est ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
img.imaged {
   ...
   propriétés
   ...
}

Mais autrement je ne vois pas ce qui est faux dans votre code...

Si ca ne marche pas mieux, pourriez-vous nous dire quel est le message d'erreur que vous retourne le W3C validator ?

Merci

Cordialement,

Graimbault

**Touty11** · 22/04/2012, 17h53

Merci de la rapidité !

J'ai pas très bien compris, ce que vous vouliez que je fasse...
Dans le CSS je mettrais :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
img.imaged {
propriétés
}

Ok, mais dans mon html ? Ceci ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img.imaged src"url" alt="A">

? Ca ne marche pas..

L'erreur que me renvoie W3C est : "Document type does not allow element "img" here.

The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error)."

C'est à cause du "class", il ne l'accepte pas dans la balise img...

J'ai essayé d'autres feintes :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<p class="imaged"><img src="url" alt="A" /></p>

ou avec un div.. Mais ça ne fait pas la même chose que le "class"...

**Graimbault** · 22/04/2012, 18h02

Ce que je mettrais en tout et pour tout dans le code HTML est ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img src="/picture/dé.png" class="imageD" alt="Un dé" />

Et dans le CSS (pour un encadrement de 2px noir):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
img.imageD {
     border: 2px solid #000000;
}

Il ne me semble pas que l'attribut "class" soit interdit pour la balise "img".

Le message d'erreur dit que vous n'avez pas le droit de vous servir de la balise "img" à cet endroit.

Etes vous bien entre <body> et </body>?

Peut-être avez vous un lien à nous donner si votre page est en ligne pour qu'on puisse mieux voir le problème ?

Cordialement,

Graimbault

**Touty11** · 22/04/2012, 18h08

Sur mes 3 images, il y en a 2 qui n'étaient pas dans <body></body>, je viens de les rajouter... Toujours les mêmes erreurs.

(Il est interdit de mettre des images en dehors du body ?)

Mes <img></img> sont donc dans les balises <html> et <body>.. C'est tout.

**Graimbault** · 22/04/2012, 18h15

Bon alors, visiblement vous êtes débutante en programmation web et c'est ce qui à déjà causé quelques erreurs puisque TOUT (dans un premier temps...) doit être entre <body> et </body>.

La page minimale valide en HTML 5 est celle ci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="fr">
  <head>
    <title>Le titre de ma page</title>
    <meta charset="utf-8">
  </head>
  <body>
    ...
    <img src="/picture/de.png" class="imageD" alt="Un dé" />
    ...
  </body>
</html>

Si maintenant, juste avant la balise </head> vous rajoutez

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<style type="text/css">
  img.imageD {
    border : 2px solid #000000;
  }
</style>

Est-ce que ca marche et est-ce que c'est valide ?

**Eric2a** · 22/04/2012, 18h17

Salut,

Envoyé par Graimbault

Etes vous bien entre <body> et </body>?

Bien joué Graimbault

Envoyé par Touty11

Il est interdit de mettre des images en dehors du body ?

Nous devons placer les images dans un élement de type bloc (div, p, ...) entre <body> et </body> pour être conforme W3C.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<body>
	<div> <!-- Au moins un élement de type bloc est nécessaire -->
		<img src="..." alt="..." class="..." />
		<img src="..." alt="..." class="..." />
	</div>
</body>

**Touty11** · 22/04/2012, 18h21

Ca marche, cad que ma page est telle que je la veux...

Mais toujours les même erreurs sur W3C + 1 autre, sur le code que vous m'avez fait rajouter :

"document type does not allow element "style" here

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<style type="text/css">

The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).

**Touty11** · 22/04/2012, 18h25

VICTOIRE !

Ça passe.

C'était donc les balises div...

Mh. Oui, débutante, je l'avais dit. Merci à tous les 2 !

Donc, juste, pour les prochaines fois, il est impératif de mettre les images entre des balises ? Telles que div ou p.. ?

**Eric2a** · 22/04/2012, 18h52

Seulement si elles ne sont pas déjà dans un élément de type bloc.

En fait, les balises <img /> étant des éléments "en ligne" comme le texte, elles ne peuvent pas être "enfants" de la balise <body>.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<body>
	<!-- Invalide : Pas d'élément en ligne enfant de body -->
 
	Je ne suis pas à ma place ici :'(<br />
	<img src="cry.gif" alt="Moi non plus" />
 
 
	<!-- Valide : Texte/Image dans un élément de bloc -->
	<p>
		Je suis trop bien ici :)<br />
		<img src="lol.gif" alt="Moi aussi" />
	</p>
</body>