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
Version complète: sur le forum Webmaster Hub : interligne entre H1 et H2
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.
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.
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
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
CITATION(Mado @ mardi 12 avril 2005, 08h07)
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> :
CODE
h1 {margin: 0}
Pour supprimer la marge basse de <h1> :
CODE
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
CITATION(Azon @ mardi 12 avril 2005, 09h06)
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 !
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é.
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é.
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 !
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 !
CITATION(Mamat @ mardi 12 avril 2005, 16h46)
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 !
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 !
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)
Voici en attendant la référence sur Accessiweb :
http://www.accessiweb.org/fr/Label_Accessi...essiweb_bronze/
http://www.accessiweb.org/fr/Label_Accessi...essiweb_bronze/
Mamat- laisse tomber...
Tu soulèves plusieurs points donc je vais essayer de donner des exemples en indiquant les documents de référence
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.
Je pense que Sibellius a répondu à ta question.
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
CITATION
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 AccessiWebDans 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.
CITATION
Le w3c inerdit les attribut vide
Je pense que Sibellius a répondu à ta question.
CITATION
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
Mamat- a laissé tomber...
CITATION(Mamat @ mardi 12 avril 2005, 17h29)
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
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é
j'ai ete quelques mois sans faire de site et je crois bien que j'ai tout oublié
Désolé pour le pavé in english dans le texte ;oD Mais voila : (from cynhtia says)
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 !
CITATION
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
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 !
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.
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.
CITATION(Azon @ mardi 12 avril 2005, 17h58)
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
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 "
"it is fine to have an empty alt attribute (eg,
alt="" ), but it is better to use things like list-style-image in CSS "
Merci Sibelius
Voilà l'extrait qui va nous mettre d'accord (extrait du 2ème lien cité par Sibelius) :
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.
Voilà l'extrait qui va nous mettre d'accord (extrait du 2ème lien cité par Sibelius) :
CITATION
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.
* 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.
CITATION(Mamat @ mardi 12 avril 2005, 18h11)
"it is fine to have an empty alt attribute (eg,
alt="" ), but it is better to use things like list-style-image in CSS "
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.
vous pourriez svp revenir a mon probleme initial
merci
merci
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 ?
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
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
Ben chez moi c'est trés bien... ?
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
mais il faudrait un espace moins grand entre le h1 et le h2
voila ce que je souhaiterai
merci
Alors l'espace extérieur des balises ce n'est pas le padding (qui est l'espace intérieur) mais le margin.
En conclusion met un display:inline et un margin: 2px; (enfin a toi de voir mais je pense que c'est pas mal comme ça.
En conclusion met un display:inline et un margin: 2px; (enfin a toi de voir mais je pense que c'est pas mal comme ça.
CITATION(Mamat @ mercredi 13 avril 2005, 09h39)
Alors l'espace extérieur des balises ce n'est pas le padding (qui est l'espace intérieur) mais le margin.
En conclusion met un display:inline et un margin: 2px; (enfin a toi de voir mais je pense que c'est pas mal comme ça.
En conclusion met un display:inline et un margin: 2px; (enfin a toi de voir mais je pense que c'est pas mal comme ça.
arf c'etait aussi simple que ca, des fois je me prends la tete pour pas grand chose
merci Mamat
merci a tous
mon prob est resolu :up:
bonne journée
Marie
Bonjour Marie
Je pense qu'il vaut mieux que tu utilises une autre balise que h1 pour ton texte "Retour Inforgraphie/PAO"
La balise h1 est utilisée pour donner un titre à la page. Donc, ici, je verrai plutôt le h1 sur "Couvertures de magazines". D'autre part, tu ne peux avoir qu'un seul h1 par page (d'un point de vue accessibilité) et plusieurs niveaux ensuite pour structurer ton doc et ton menu (h2, h3...).
En ce qui concerne l'espace entre "Retour infographie/PAO" et "Couvertures de magazines", c'est dû au fait que tu n'as pas annulé les marges des balises h1 et h2 (sauf pour le margin-bottom du h1 que tu réduis à 2px).
Essaie de mettre un margin-top:0 à ton h2, celui dans le div #gauche
[Edit : Mamat plus rapide que moi ]
Je pense qu'il vaut mieux que tu utilises une autre balise que h1 pour ton texte "Retour Inforgraphie/PAO"
La balise h1 est utilisée pour donner un titre à la page. Donc, ici, je verrai plutôt le h1 sur "Couvertures de magazines". D'autre part, tu ne peux avoir qu'un seul h1 par page (d'un point de vue accessibilité) et plusieurs niveaux ensuite pour structurer ton doc et ton menu (h2, h3...).
En ce qui concerne l'espace entre "Retour infographie/PAO" et "Couvertures de magazines", c'est dû au fait que tu n'as pas annulé les marges des balises h1 et h2 (sauf pour le margin-bottom du h1 que tu réduis à 2px).
Essaie de mettre un margin-top:0 à ton h2, celui dans le div #gauche
[Edit : Mamat plus rapide que moi
]
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.