Balise img avec les attributs class ou id

Version imprimable

22/04/2012, 17h31
Touty11

Balise img avec les attributs class ou id
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:

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 !
22/04/2012, 17h45
Graimbault
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:

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

Sinon, effectivement si dans le css vous mettez
Code:

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:

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
22/04/2012, 17h53
Touty11
Merci de la rapidité !

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

1 2 3 img.imaged { propriétés }
Ok, mais dans mon html ? Ceci ?

Code:

<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:

<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"...
22/04/2012, 18h02
Graimbault
Ce que je mettrais en tout et pour tout dans le code HTML est ceci:

Code:

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

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

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
22/04/2012, 18h08
Touty11

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.

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:

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:

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 ?

22/04/2012, 18h17
Eric2a
Salut,

Citation:

Envoyé par Graimbault

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

Bien joué Graimbault

Citation:

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:

1 2 3 4 5 6 <body> <div>  <img src="..." alt="..." class="..." /> <img src="..." alt="..." class="..." /> </div> </body>
22/04/2012, 18h21
Touty11

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:

<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).
22/04/2012, 18h25
Touty11

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.. ?

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:

1 2 3 4 5 6 7 8 9 10 11 12 13 <body>  Je ne suis pas à ma place ici :'(<br /> <img src="cry.gif" alt="Moi non plus" />  <p> Je suis trop bien ici :)<br /> <img src="lol.gif" alt="Moi aussi" /> </p> </body>

22/04/2012, 18h56
Touty11

Ok d'accord, merci.

Désolée de vous avoir dérangés tous, pour quelque chose qui semble bien basique !

Merci
23/04/2012, 11h53
Bovino

Citation:

TOUT (dans un premier temps...) doit être entre <body> et </body>.

Cela fait partie des bonnes pratiques, mais techniquement, la balise <body> est facultative ;)

Pour le fun : The smallest possible valid (X)HTML documents
:)