[Résolu] Images dans un texte

Bonjour,

Je me remet à mon site que j'ai fait il y a bien longtemps. Dans un texte scientifique, j'ai mis des images de flèches avec le code :

<img src="fleches/flechemenu_d.gif" width="30" height="30" hspace="5" align="absmiddle">

Comme les images se répètent, j'aimerais mettre un style, mais je ne trouve pas le hspace, ni le align qui ont été remplacées ?

Merci d'avance de répondre à une question triviale pour vous

Bonjour,

il te faudra les remplacer avec un code css.
pour le hspace se sera surement un margin : 0 5px;
et pour l'alignement de l'image avec un texte a droite : vertical-align : middle;

ce qui donnerais en exemple :

img {
 margin : 0 5px;
 vertical-align : middle;
}

pour info : http://www.alsacreations.com/astuce/lire/4-alignement-vertical-image-texte.html

D'ailleurs, il serait préférable d'appeller l'image pas CSS. Ou de ne pas oublier le alt...

Merci pour vos réponses qui donnent un bon résultat.

img.flechestabot {
	width: 30px; 
	height: 30px;
	margin-left: 5px;
	margin-right: 5px;
	vertical-align: middle;
}

Pourquoi Laurie-Anne, le alt est important dans ce cas si ce n'est qu'une flèche ? Toutes mes images signifiantes en ont d'ailleurs un.
Merci d'avance

Parce que alt est un attribut obligatoire. Il peux être vide, mais doit être présent.

osiris67 a écrit :
Pourquoi le alt est important dans ce cas si ce n'est qu'une flèche ? Toutes mes images signifiantes en ont d'ailleurs un.

Comment est-ce qu'un User Agent (navigateur, moteur de recherche, lecteur d'écran, etc.) doit considérer une image qui n'a pas d'attribut alt? Comme une image dont le sens est négligeable, ou bien comme une image qu'il faut restituer malgré l'absence d'information textuelle? Les lecteurs d'écran, vu le nombre d'images qui devraient avoir un alt mais qui n'en ont pas (par l'incurie des Author qui créent des pages web), tentent de transmettre une information en lisant le nom du fichier. Pour éviter ça, on utilise un attribut alt vide:

<img src="une-image-decorative.png" alt="">

Merci pour vos réponses.

Autre question sans doute idiote que je ne m'étais jamais posée : le alt peut-il se mettre dans le style css dans ce cas précis ?

non, alt, c'est un attribut html de la balise <img>.

Je réitère le conseil de Laurie-Anne concernant la mise en place de ton image en CSS, en particulier si tu veux que cette image soit réutilisée.

c'est-à-dire ?

osiris67 a écrit :
c'est-à-dire ?

Je ne sais pas sous quelles conditions tu vas utiliser cette flèche, mais imaginons pour une liste :

<ul>
	<li>lorem
	</li>
	<li>lorem
	</li>
	<li>lorem
	</li>
	<li>lorem
	</li>
</ul>

en CSS ca donnerai :

ul li {
	
	background-image : tonImage.jpg;
	background-position:  bottom;
        background-repeat: no-repeat;
+tes propriétés pour positionner ta flèche


}

Ca allège ton code, sans compter que ca te serai plus facile a traiter/positionner/appliquer.
Modifié par saajuck (20 Jun 2012 - 14:06)

Merci de me consacrer du temps !

Cette image est une flèche qui comporte un lien et qui s'utilise dans un menu de bas de page dont le code est maintenant

<a href="#"><img src="../act_page/fleches/flechemenu_d.gif" class="flechestabot" alt=""></a>Blabla<a href="#"><img src="../act_page/fleches/flechemenu_d.gif"  class="flechestabot" alt="">Blabla</a>...

Ah, c'est encore autre chose. Mais pas de panique.

Comme tu l'as fait, tes liens sont vides : ils ne comportent pas d'information sous forme de texte quant à la cible vers lesquelles ils pointent. Il n'y a aucun moyen pour un lecteur d'écran de savoir à quoi correspondent ces liens. Tu devrais au minimum inclure les "blabla" dans les liens :

<a href="toto.html"><img src="xx" alt="">Mes photos de toto</a>

Comme ça, l'élément <a> contient l'information vers laquelle il pointe.

Ou, si tu tiens à ce que le "Blabla" ne soit pas dans le lien (mais je pense que c'est une mauvaise idée), tu dois remplir le alt de l'image pour éviter que le lien ne soit vide :

<a href="toto.html"><img src="xx" alt="Toto"></a>Mes photos de toto

Mais là c'est mauvais pour au moins deux raisons : d'une part il y a du contenu qui apparaît en double, d'autre part tu forces tes utilisateurs à cliquer sur les flèches pour suivre les liens décrits par du texte inactif. On a plutôt l'habitude de cliquer sur le texte qui nous intéresse pour suivre un lien, pas à côté. Tu vois ?

Cela dit, je pense que dans ton cas, les flèches sont purement décoratives, et sont donc à reléguer dans le CSS. Si ton menu de bas de page est un bloc de classe "footer", par exemple, tu peux faire comme ça pour le HTML :

<div class="footer">
    <a href="toto.html">Toto</a>
    <a href="titi.html">Titi</a>
</div>

(Ou un élément <ul> contenant des <li> contenant des <a>, si tu veux faire encore plus sémantique.)
Comme tu le vois, c'est très léger : on va à l'essentiel.

Et tu ajoutes un petit bout de CSS comme suggéré par les voisins du dessus :

.footer a {
    display: inline-block;
    background: url(fleche_d.gif) 0 50% no-repeat;
    padding-left: quelques px;
}

Modifié par Tutie (20 Jun 2012 - 16:38)

a noter : la balise img doit être fermée à la fin par un /

ce qui donne <img src="xx" alt="Toto" />

PetarouxRay a écrit :
a noter : la balise img doit être fermée à la fin par un /

ce qui donne <img src="xx" alt="Toto" />

En xhtml, en html ce n'est pas obligatoire.
Modifié par Patidou (21 Jun 2012 - 13:17)

Merci pour ces réponses