Pb d'espaces entre images en XHTML Strict

(reprise du message précédent)

exact.

Petit conseil supplémentaire : fouille sur le forum pour trouver des info sur les "alt", je pense que tu pourrais améliorer ce point.

un bon article sur pompage aussi : bien utiliser le texte alternatif

autre remarque : es tu sur de ta DTD? ne serais tu pas mieux en XHTML 1.0? surtout que tu déclare du text/html ensuite.

voir blog and blues, XHTML 1.1 a ce propos.

derniere chose : il reste des height et width dans ton pied de page : enleve les et met les vite dans ta css !!
Modifié par le.troll (20 Jul 2007 - 11:15)

les trois &nbsp; du <p> en bas de texte , page d'accueil, pourrais être avantageusement remplacés par

text-indent: valeur;

Modifié par le.troll (20 Jul 2007 - 11:18)

Le problème est que mes images sont gérées via le CSS avec le background-image. Donc où met-on le alt ?

En ce qui concerne les height, widht et les &nbsp;, je vois pas trop où tu les vois

les images en bakground n'ont pas besoin de alt.

par contre la il y a des width et heigh :

<div id="basCentre">
			<img src="images/web10sign_21.jpg" width="1" height="354" alt="" />
		</div>
		
		<div id="cadre">
			Copyright <a href="http://www.marinetts.com">MTS</a> 2007<br />
			<a href="index.php?page=mentions">Mentions Légales</a><br />

			<a href="index.php?page=plan">Plan du site</a><br />
			<a href="index.php?page=contact">Contact</a>
		</div>
		<a href="http://validator.w3.org/check?uri=referer"><img src="images/xhtml-valid.png" alt="Valid XHTML 1.0 Transitional" height="15" width="80" /></a>
		<img src="images/css2-valid.png" alt="Valid CSS 2" height="15" width="80" />

ici aussi

<img class="imagePage" src="images/10site.png" width="100" height="64" alt="Services" />

et le alt n'est pas a mon sens justifié ici... l'image n'apporte pas d'information: le mieux serait alt="". Idem pour les autres pages.
Modifié par le.troll (20 Jul 2007 - 13:10)

Chez certaines personnes, ca a l'air de créer des bugs d'affichage de ne pas les mettre
Modifié par kiouz (20 Jul 2007 - 13:22)

après verif (c'est que j'ai eu un doute subitement là ), non, cf la DTD XHTML 1.0

<!ELEMENT img EMPTY>
<!ATTLIST img
  %attrs;
  src         %URI;          #REQUIRED
  alt         %Text;         #REQUIRED
  longdesc    %URI;          #IMPLIED
  height      %Length;       #IMPLIED
  width       %Length;       #IMPLIED
  usemap      %URI;          #IMPLIED
  ismap       (ismap)        #IMPLIED
  >

mais il ne s'agit pas de pas les mettre, mais de les mettre dans la CSS.

autre remarque : je pense que tu peux mettre cette image en background du bloc basCentre, avec un no-repeat :

<img class="imagePage" src="images/10site.png" width="100" height="64" alt="Services" />

le.troll a écrit :
mais il ne s'agit pas de pas les mettre, mais de les mettre dans la CSS.

De cette manière, c'est donc bon non ? :

.menu a.accueilImage{
	margin: 140px 0px 0px 28px;
	background-image: url(../images/web10sign_accueil.png);
	width: 72px;
	height: 49px;
}

le.troll a écrit :
autre remarque : je pense que tu peux mettre cette image en background du bloc basCentre, avec un no-repeat

Le problème est que le contenu de mes pages est un include d'une page PHP afin de ne pas avoir à changer tous les liens en cas de modifs. Il faudrait donc que je crée un style par page juste pour mettre l'image en background
Modifié par kiouz (20 Jul 2007 - 13:40)

Ben parce que dans chaque page, il y a une image différente qui se place à côté du contenu. Donc je serai obligé de changer de background à chaque fois

Et donc pour les images, cela veut dire qu'il faut une classe CSS par image ?
Ca peut vite être lourd non ?
Modifié par kiouz (20 Jul 2007 - 14:20)

attention j'ai pas du être très clair :

il ya deux type d'images (pour faire simple) :

- celle qui servent pour le design, comme

web10sign_21.jpg
FondSite.png
web10sign_01.jpg

- et il y les images du contenu, comme :

enter.png
10site.png

etc...

les images du design on tout interet à etre dans la css (background-image), parce que elles ne changent pas. les autres, bien sur, doivent rester sous forme de balises dans le flux.

hors web10sign_21.jpg est dans une balise img, moi je l'aurais mit en css, car elle ne semble pas changer (a moins que je me trompe!)

voila... mais ne vas surtout pas mettre TOUTES tes images dans la css.

voial j'espere avoir été clair...

D'accord, j'ai compris

Mais sinon, en ce qui concerne les width et height des balises <img>, si il faut qu'elles soient remplacées dans la CSS, ca veut dire une classe par image de contenu non ?

kiouz a écrit :
D'accord, j'ai compris

Mais sinon, en ce qui concerne les width et height des balises <img>, si il faut qu'elles soient remplacées dans la CSS, ca veut dire une classe par image de contenu non ?

Garde les width et height dans l'<img>. C'est parfaitement valide, et super-bien : dès le chargement de l'html, le navigateur connaît la taille de l'image, et peut ainsi prévoir la place. Si tu le mets pas, ou si tu le mets dans le CSS, ça fait "pop" de partout, des contenus qui sautillent tout à coup, etc.

pour ma part, je pense que l'idéal est d'avoir des images a la bonne taille directement. Comme ca, pas besoin de metre width height en css (ce qui est, comme tu l'a dit, vite envahissant) et evite d'avoir un rendu moche (les navigateurs ne sont pas tres fort pour retailler les images).

Apparement, certains développeurs pensent que les images des menus sont plutôt du contenu que de la structure.

Ce qui voudrait dire qu'il faut mettre ces images en <img> dans la page HTML et non en background dans le CSS.

Qu'en pensez-vous ?

pas de solution standard !!

si dans ton image de menu il y a un texte important, il est evident que c'est du contenu.

Pour toi, le texte n'est pas dans l'image. Ton image n'apporte pas de contenu interessant supplémentaire, non? Dans ce cas le background est parfais.

Un truc à essayer est de désactiver les CSS. Garde à l'esprit que tu ne veux ni mise en page, ni design. Rien que du brut. Et regarde donc quelles images tu voudrais avoir

Salut,

kiouz a écrit :
Apparement, certains développeurs pensent que les images des menus sont plutôt du contenu que de la structure.

Je pense que tu veux parler de contenu et de décoration, et non de structure.

Dans un site web, il y a des images qui sont porteuses d'informations. Par exemple, une bannière graphique, qui indique le titre du site. Ou une photo qui illustre un article.

Parce que ces images véhiculent de l'information, tu dois les placer dans le code HTML de la page, et tu dois renseigner un texte alternatif (alt) approprié. C'est la seule façon fiable de mettre l'information que l'image contenue à disposition de tous tes visiteurs, en toutes circonstances.

En effet, les images seront visibles même si ta feuille de style est inaccessible, ou désactivée par le visiteur. Les utilisateurs de lecteurs d'écran ou de navigateurs textes, ainsi que les robots d'indexation pourront accéder (même si c'est partiel) au contenu de l'image grâce au texte alternatif, et éventuellement à longdesc.

D'un autre côté, il y a les images de décoration. Elles ne font qu'améliorer l'aspect graphique du site, elles ne sont pas porteuses d'une information. Elle n'ont donc rien à faire dans le code HTML, elles doivent être gérées via la feuille de style.

Il faut donc bien réfléchir à l'utilité de tes images et respecter la logique de séparation fond/forme qui régit le couple (X)HTML/CSS. La position des images (HTML ou CSS) est très importante, pour l'accessibilité et le référencement d'un site.

Evidemment, il existe des situations où il est plus simple de faire une petite entorse aux principes, et où tu voudras placer une image de décoration dans le code HTML. Dans ce cas, il suffira de lui donner un attribut alt vide (alt=""). Mais il ne faut jamais faire l'inverse et placer une image portant un contenu dans la feuille de style ...

le.troll a écrit :
pour ma part, je pense que l'idéal est d'avoir des images a la bonne taille directement. Comme ca, pas besoin de metre width height en css

+1. Mais il ne faut pas oublier qu'avoir les images directement à la bonne taille ne dispense pas d'indiquer la hauteur et la largeur lorsqu'elles se trouvent dans le code HTML. Même si l'image est aux bonnes dimensions, le navigateur ne les connaît pas avant d'avoir chargé l'image et il risque de faire bouger le contenu au fur et à mesure de ce chargement, comme l'a expliqué FlorentG. Donc, dans la mesure du possible, renseignez les attributs height et width de la balise img