Mado Posté 12 Avril 2005 Posté 12 Avril 2005 bonjour j'ai dans cette page dans le cadre a gauche un H1 <h1><img src="design/puceR.gif" /> <a href="infographie.html" title="retour infographie pao">Retour infographie/PAO</a> </h1> et un H2 <h2 class="beige"><img src="design/puceC.gif" width="10" height="10" /> Couvertures de magazines.</h2> je voudrais supprimer l'espace entre les deux comment dois-je faire? dans ma css j'ai mis ca #gauche h1 { font-size:0.8em; padding:5px; width: 95%; margin-bottom:2px; } merci pour vos lumières marie
Dan Posté 12 Avril 2005 Posté 12 Avril 2005 Salut Marie, Pour permettre le positionnement précis des blocas H1 et H2, il suffit de leur retirer la propriété de bloc avec une règle CSS simple. h1, h2 { display: inline; } Tu peux aussi jouer sur les marges, en donnant par exemple: h1, h2 { display: inline; margin: 0 0 0 0; } A partir de là tu peux les positionner très précisément à ta guise.
Perrine Posté 12 Avril 2005 Posté 12 Avril 2005 Coucou Marie Et dans un souci d'accessibilité, tu peux ajouter l'attribut alt vide dans tes balises img. Chaque balise img doit contenir l'attribut alt. Dans le cas où une image est présentée à titre décoratif, ce qui est le cas pour tes puces, tu ajoutes alt="". Les synthèses vocales et navigateurs textes feront ainsi l'impasse sur ces images qui n'apportent pas de sens, et sont juste là pour décorer la page. Pour en savoir un peu plus, je t'invite à lire les recommandations Accessiweb 1.1 et 1.3 A bientôt
Raphael Posté 12 Avril 2005 Posté 12 Avril 2005 (modifié) je voudrais supprimer l'espace entre les deux comment dois-je faire? Salut, Pour répondre à ta question : les espaces autour des éléments de type bloc comme les titres se gèrent avec la propriété "margin". Par exemple pour supprimer toutes les marges autour de <h1> : h1 {margin: 0} Pour supprimer la marge basse de <h1> : h1 {margin-bottom: 0} etc. Par contre, si tu transformes les titres en éléments en-ligne (display inline), tu modifies profondément la structure de l'élément et cela aura des conséquences importantes. Les principales étant que : - un élément en-ligne est fait pour rester *dans* le texte et non former un bloc - par conséquent, un élément en ligne ne peut pas posséder de dimensions (hauteur, largeur, etc.) - en théorie, un élément en ligne n'est pas sensé être positionné hors de son contexte. D'ailleurs le positionnement d'un élément en ligne est très spécial à mettre en oeuvre - beaucoup de propriétés ne s'appliquent pas aux élément en-ligne (margin-top, margin-bottom, etc.) En bref, il est préférable de laisser les éléments tels qu'ils sont prévus Modifié 12 Avril 2005 par Sibelius
Mamat Posté 12 Avril 2005 Posté 12 Avril 2005 Et dans un souci d'accessibilité, tu peux ajouter l'attribut alt vide dans tes balises img. Chaque balise img doit contenir l'attribut alt. Dans le cas où une image est présentée à titre décoratif, ce qui est le cas pour tes puces, tu ajoutes alt="". Hm justement non il me semble que dans un soucis d'accessibilité il est "interdit" de mettre des alt vide juste pour passer les validateurs !
Perrine Posté 12 Avril 2005 Posté 12 Avril 2005 Re-bonjour Mamat Si tu avais lu les recommandations que j'ai citées, tu aurais compris que les alt vides sont bien conseillés. En effet, ils permettent à un navigateur texte ou une synthèse vocale d'ignorer les éléments graphiques décoratifs. Si tu ne mets pas de alt, alors c'est le nom du fichier qui est affiché / dicté. La personne qui n'a pas accès à l'information sous forme d'image se demande donc quel est l'objet du fichier, s'il apporte une information ou non. Donc, non, il n'est pas interdit de mettre des alt vides sur les images décoratives. C'est au contraire vivement conseillé.
Mamat Posté 12 Avril 2005 Posté 12 Avril 2005 Salut azon ce que tu dis (désolé de mettre le doigt dessus) ne tiens vraiment pas debout : pour ignorer une image un navigateur texte devrait voir une balise vide... Le w3c inerdit les attribut vide de une et de deux les navigateurs textes par définitions ignore les images ;oD et les remplace par les contenus des alts... alors ce que j'en dit !
Raphael Posté 12 Avril 2005 Posté 12 Avril 2005 Salut azon ce que tu dis (désolé de mettre le doigt dessus) ne tiens vraiment pas debout : pour ignorer une image un navigateur texte devrait voir une balise vide... Le w3c inerdit les attribut vide de une et de deux les navigateurs textes par définitions ignore les images ;oD et les remplace par les contenus des alts... alors ce que j'en dit ! <{POST_SNAPBACK}> Mamat > sans vouloir lancer une polémique, les alt="" sont recommandés par le WCAG (je cherche actuellement le lien) parce que justement les synthétiseurs vocaux ont pris l'habitude de ne pas tenir compte de ces images. C'est donc vivement recommandé lorsque l'image n'a aucune pertinence. Le W3C n'interdit pas les attributs vides. Où as-tu lu celà ? Tu veux peut-être dire que le XHTML (par rapport au HTML) interdit qu'un attribut n'ait pas de propriété. C'est le cas par exemple pour "checked" qui ne doit pas être vide et doit être écrite : "checked='checked'"... mais cela n'a aucun rapport. En clair, une valeur peut très bien être vide, mais il faut qu'il y'ait une mention de valeur. Exemple : on ne peut pas écrire "alt" tout court; il faut écrire "alt='...'" (ou alt="" bien sûr)
Raphael Posté 12 Avril 2005 Posté 12 Avril 2005 Voici en attendant la référence sur Accessiweb : http://www.accessiweb.org/fr/Label_Accessi...essiweb_bronze/
Perrine Posté 12 Avril 2005 Posté 12 Avril 2005 Tu soulèves plusieurs points donc je vais essayer de donner des exemples en indiquant les documents de référence pour ignorer une image un navigateur texte devrait voir une balise vide Je suppose que tu voulais dire "attribut attribut" pour le alt. Comment réagit le navigateur texte avec une balise img ? Premier cas : La balise img a un alt commenté car c'est une image qui apporte une information. Cette information n'étant pas accessible aux utilisateurs de navigateur texte, il faut retranscrire le contenu de l'image d'une autre manière. On utilise donc l'attribut alt commenté. Le navigateur texte affiche l'alt. Le contenu de l'image est donc retranscrit et accessible pour l'utilisateur. Ex du logo Accessiweb : commenté par l'attribut alt : Accessibilité du Web: logo AccessiWeb Dans ce cas, le navigateur texte affiche le contenu du alt (Accessibilité du Web: logo AccessiWeb). L'utilisateur sait qu'il y a une image, il en connait le contenu. L'information est restituée, tout est ok. Deuxième cas : La balise img n'apporte pas d'information. Elle est donc là simplement à titre décoratif. Comme indiqué dans la recommandation Accessiweb 1.3, on indique bien un alt vide afin que le navigateur texte ignore l'image. Ex d'une image toujours sur le site Accessiweb : avec un alt vide. A la lecture de cette page, le navigateur texte n'affiche pas de commentaire alternatif. Il ignore tout simplement cette image. Troisème cas : La balise img n'a pas d'alt. Deux solutions : soit nous sommes dans le cas d'une image qui apporte une information, soit c'est à titre décoratif. Dans les 2 cas, l'attribut alt n'étant pas utilisé, le navigateur texte affiche le nom du fichier de l'image. L'utilisateur ne sait donc pas si l'image contient une information ou si elle est là pour décorer. Et c'est dommage car il n'aura pas de réponse, à moins de demander à quelqu'un qui utilise un navigateur graphique. Le w3c inerdit les attribut vide Je pense que Sibellius a répondu à ta question. les navigateurs textes par définitions ignore les images Dire qu'ils ignorent les images est un peu erroné. Disons qu'ils ne les affichent pas. Il les gère différemment en affichant soit l'alt indiqué, soit le nom du fichier, soit rien si l'alt est vide. Pour rappel, les WCAG (fr) (Web Content Accessibility Guidelines 1.0) édités par la WAI (en) (Web Accessibility Initiative) recommandent l'utilisation de l'attribut alt pour tous les éléments non textuels afin de proposer une alternative à un fichier audio, vidéo... J'espère que c'est plus clair
Raphael Posté 12 Avril 2005 Posté 12 Avril 2005 Mamat- a laissé tomber... Toi peut-être, mais d'autres ont peut-être envie d'apprendre des choses intéressantes (et importantes). J'y ai d'ailleurs appris quelque chose aussi
Mado Posté 12 Avril 2005 Auteur Posté 12 Avril 2005 sur la page que j'ai mis en exemple quand je mets un margin a zero rien ne change j'ai ete quelques mois sans faire de site et je crois bien que j'ai tout oublié
Mamat Posté 12 Avril 2005 Posté 12 Avril 2005 (modifié) Désolé pour le pavé in english dans le texte ;oD Mais voila : (from cynhtia says) 1.1 Validate that the alt text does not use the word image When users add alternative text to an image they tend to add the word "Image" when it really says nothing about the image, but describes the object versus the meaning of the object. This check will fail a page for the use of the word image in the alternative text. 1.2 Validate that the alt text does not contain the text: .jpg, .gif, .bmp, .jpeg Many content creation tools will automatically add alternative text when you add an image to your content. The text is generally the image name. Validate that: .jpg, .gif, .bmp, .jpeg, are not found in the alt text. 1.6 Validate that the alt text does not contain the text "image" Many content creation tools will automatically add alternative text when you add an image to your content. The text is generally the image name or the word image with a number associated, like image001. This checkpoint will fail a page if the string image is found in the alternative text. 2.1 Validate that Alternative Text is greater than 7 and less than 81 characters in length Short alternative text may not be valid, warn the report user if alternative text was found that is less than seven characters in length. Additionally alternative text should not be larger than 80 characters, if the alt text is greater the long description attribute should be used. This check validates that the alt attribute does not exceed 80 characters in length. 2.2 Validate that Alternative Text is not used to repeat words Alternative text should not be used to simply hide words with the hope of increasing your ranking on search engines. If you repeat a word more than 5 times your page may not be indexed. The alternative text passed the maximum allowed repeated words check Hm c'est la rapport de ma page d'accueil et forcément vu qu'elle est valide... il faudrait le faire avec la dite page avec alt="" vide ca sort une erreur ! Modifié 12 Avril 2005 par Mamat
Perrine Posté 12 Avril 2005 Posté 12 Avril 2005 Désolée Mado d'avoir détourné ton post Je n'ai pas l'url initiale de la page. Sur quel élément le margin ne se met pas à 0 ? @Mamat : le "pavé" que tu as collé ne prouve pas qu'un alt vide est non conforme. Le validateur Cynthia t'indique juste si tes alts 1- contiennent le mot image (1.1) 2- contiennent une extensions de fichier (1.2) 3- contiennent un texte image (1.6) 4- sont d'une longueur comprise entre 7 et 80 caractères (2.1). En passant, la recommandation 1.4 Accessiweb préconise une longueur maximale de 60 caractères 5- contiennent des mots trop souvent répétés sur une même page (2.2) Je n'ai jamais utilisé le logiciel Cynthia says. Je ne sais pas comment il est construit, mais c'est étonnant qu'il préconise de ne pas utiliser des alt vides pour les images de déco.
Raphael Posté 12 Avril 2005 Posté 12 Avril 2005 Je n'ai jamais utilisé le logiciel Cynthia says. Je ne sais pas comment il est construit, mais c'est étonnant qu'il préconise de ne pas utiliser des alt vides pour les images de déco. en tout cas, il valide les alt vides : http://slconstantia.com/alt.htm validation : http://www.contentquality.com/mynewtester/...tia.com/alt.htm
Mamat Posté 12 Avril 2005 Posté 12 Avril 2005 Oui j'ai précisé en dessous que c'était hors-sujet ;oD alors voila j'ai retrouvé sur cette page www.w3.org/QA/Tips/altAttribute : "it is fine to have an empty alt attribute (eg, alt="" ), but it is better to use things like list-style-image in CSS "
Perrine Posté 12 Avril 2005 Posté 12 Avril 2005 (modifié) Merci Sibelius Voilà l'extrait qui va nous mettre d'accord (extrait du 2ème lien cité par Sibelius) : Rule: 1.1.1 - All IMG elements are required to contain either the alt or the longdesc attribute. * Warning - IMG Element found at Line: 13, Column: 1 contains the 'alt' attribute with an empty value. Please verify that this image is only used for spacing or design and has no meaning. Ce qui veut bien dire que si l'image est utilisée pour du design et n'a pas de sens, l'attribut alt doit être vide. Modifié 12 Avril 2005 par Azon
Raphael Posté 12 Avril 2005 Posté 12 Avril 2005 "it is fine to have an empty alt attribute (eg,alt="" ), but it is better to use things like list-style-image in CSS " Sur ce point, je t'approuve à 100%. De toute façon, en pratique alt="" ne devrait pas exister puisque que les images non pertinentes ne devraient pas apparaître dans la structure HTML mais dans le CSS... mais c'est un peu ce que disait Azon.
Mado Posté 12 Avril 2005 Auteur Posté 12 Avril 2005 vous pourriez svp revenir a mon probleme initial merci
Perrine Posté 12 Avril 2005 Posté 12 Avril 2005 Oui Mado, dans mon post précédent, je te demandais l'url de la page. Je ne comprends pas sur quel élément le margin:0 ne s'applique pas ?
Mado Posté 13 Avril 2005 Auteur Posté 13 Avril 2005 c'est sur cette page dans ma css j'ai un padding a 5px pour les h1 et h2 http://kouan-yin.com/cv-2005/mag.htm ce qui fait que quand je mets display: inline les textes se chevauchent merci
Mado Posté 13 Avril 2005 Auteur Posté 13 Avril 2005 je voudrais supprimer l'espace entre les titres ou alors j'utilise une autre balise que h1 et h2 mais il faudrait un espace moins grand entre le h1 et le h2 voila ce que je souhaiterai merci
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant