28173 sujets

CSS et mise en forme, CSS3

[IE6] Background à droite sur un élément inline à plusieurs lignes

Salut,


J'essaie de positionner une icone à droite d'un élément inline. Pas de problème, sauf dans IE6, où le fond n'apparait pas lorsqu'il y a plusieurs lignes. Une idée ?

http://64k.be/download/inlinebg/

Firefox/Safari etc :
http://img242.imageshack.us/img242/6331/picture4ne1.png

IE6 :
http://img151.imageshack.us/img151/9412/picture5ol9.png 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>untitled</title>
	
</head>
<style type="text/css" media="screen">
	div#container {
		width: 200px;
		font: 65% Arial, Helvetica, sans-serif;
		line-height: 1.2em;
	}
	a.icon-pdf {
		background: pink url(icon-pdf.png) no-repeat bottom right;
		padding-right: 25px;
	}
	
	li {margin-bottom: 5px;}
</style>
<body>
<div id="container">
	<ul>
	<li><a href="doc.pdf" class="icon-pdf">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi et elit eget ante tempus pellentesque.</a></li>
	<li><a href="doc.pdf" class="icon-pdf">Lorem ipsum dolor</a></li>
	<li><a href="doc.pdf" class="icon-pdf">Lorem ipsum dolor  elit. Morbi et elit eget ante tempus pellentesque.</a></li>
	<li><a href="doc.pdf" class="icon-pdf">Ipsum dolor sitdipiscing elit. Morbi et elit eget ante tempus pellentesque.</a></li>
	<li><a href="doc.pdf" class="icon-pdf">Lorem ipsum</a></li>
	</ul>
</div>
</body>
</html>

Modifié par cedb3 (04 May 2007 - 14:33)
D'après l'image que tu postes, ton background image, où il est marqué pdf, ne devrait pas être en background, mais bien en dur dans le html : ca contient bien une véritable information et non pas juste un élément graphique !
Ie essaie de placer l'image en bas à droite du rectangle le plus grand formé par ton texte, donc pour ceux qui font plus d'une ligne et dont la dernière ligne ne va pas jusqu'au bord des 200px on a l'impression que l'image de fond n'est pas posée, or elle y est, mais hors champs (essaie avec une image plus grande, tu la verra dépasser)

Je ne parviens pas à voir de solution pour faire exactement ce que tu essaie de faire malheureusement Smiley ohwell

Tu peux essayer sinon soit :
- De passer le lien en display:block pour pouvoir l'aligner en bas à droite
- De mettre l'icone au début du texte (background-position: top left) avec un text-indent égal à la largeur de ton image

Et au passage, je ne suis pas d'accord avec toi yahrou, l'icone du pdf n'apporte pas de véritable information du fait qu'elle soit une image, elle indique juste que le lien est en pdf.
La question que je me pose pour choisir si je dois mettre une image en background ou en <img en général est "Est-ce que l'internaute pourrait avoir envie d'enregistrer cette image sur son disque dur?" dans la plupart des cas si je réponds "oui" alors je mets en <img, sinon en background.
Là ce n'est certes pas que un élément graphique de présentation mais ça ne mérite pas d'etre considéré comme une image à part entière, c'est juste une icone pour présenter le type de fichier, comme on aurait pu écrire (pdf) en toutes lettres, là on le style un peu plus joliement, d'où l'utilisation du background amha.

Bref, avec toute ce blabla, j'ai quand même pas trouvé de solution à ton problème Smiley confused
Tymlis a écrit :
Et au passage, je ne suis pas d'accord avec toi yahrou, l'icone du pdf n'apporte pas de véritable information du fait qu'elle soit une image, elle indique juste que le lien est en pdf.

Oui, c'est vrai que l'information « ce document est au format PDF » est négligeable. Ça indique juste que le lien ne pointe pas vers un document HTML mais vers un format :
- à l'accessibilité médiocre ;
- nécessitant un logiciel tiers pour être lu ;
- pouvant déclencher le téléchargement du fichier plutôt que son affichage dans le navigateur.

Transmettre cette information est donc important. C'est même une bonne pratique Opquast :
http://fr.opquast.com/bonnes-pratiques/fiche/32

Concrètement, ça peut se faire ainsi :
<a href="fichier.pdf">La vie amoureuse des loutres arctiques (format PDF)</a>

Et l'équivalent avec une jolie image qui va bien :
<a href="fichier.pdf">La vie amoureuse des loutres arctiques <img src="pdf.png" alt="(format PDF)" /></a>


Tymlis a écrit :
La question que je me pose pour choisir si je dois mettre une image en background ou en <img en général est "Est-ce que l'internaute pourrait avoir envie d'enregistrer cette image sur son disque dur?" dans la plupart des cas si je réponds "oui" alors je mets en <img, sinon en background.

C'est un critère bien trop restrictif et qui empêche la mise en place d'une démarche d'accessibilité digne de ce nom. Que fais-tu pour les cas où l'image transmet une information et où ton impression personnelle est que le visiteur ne voudra probablement pas télécharger l'image ? On perd l'information ? C'est ballot.

Si je supprimais toutes les informations textuelles dont je doute que le visiteur veuille les sauvegarder en faisant un copier-coller dans Word ou autre logiciel, je me retrouverais avec un document épuré mais probablement incompréhensible. Pourtant, tu proposes la même démarche pour les images de contenu.

Tymlis a écrit :
Là ce n'est certes pas que un élément graphique de présentation mais ça ne mérite pas d'etre considéré comme une image à part entière

Nulle part dans la spécification HTML il n'est dit que l'élément img doit pointer vers un fichier représentant un contenu cohérent et autosuffisant (ce que tu sembles appeler « une image à part entière »). De plus, techniquement, toute image est « une image à part entière ».

Je crois que tes critères sont un peu biaisés.

Tymlis a écrit :
c'est juste une icone pour présenter le type de fichier

Et le type de fichier n'est pas une information, donc.

Tymlis a écrit :
comme on aurait pu écrire (pdf) en toutes lettres

Si on peut l'écrire en toute lettre, raison de plus pour considérer qu'il s'agit d'une image de contenu. L'image qui porte un texte, c'est justement le cas typique où on n'a pas à se poser de question : si on veut que l'information soit accessible, ça devra être une image HTML, basta.


Quant à trouver une solution au problème :
- image HTML (élément img, balise <img>) ;
- si besoin, positionnement de l'image avec vertical-align: ...;.
Sujet clos
Aller à