[résolu] Icône en background tronquée au changement de taille

Bonjour,

Je pense que je m'y prends mal pour ajouter une icône en background, via mon code CSS. En effet, si je choisis (testé sous Firefox et Internet Explorer) une taille de texte plus petite, l'icône est tronquée en haut et en bas.

Il s'agit des icônes RSS sur cette page, à gauche des liens "tous les billets", "animations" etc.

Voici le code HTML utilisé :

<p class="p-feed black-links">
	<a class="feed" href="http://sxjpl.free.fr/biblio/feed/atom/comments" title="Fil de syndication des commentaires">
		commentaires
	</a>
</p>

Et voici le code CSS qui lui correspond :

p.p-feed { float: right; text-align: right; width: 270px; }
	#content p.p-feed { padding: 0; }
	a.feed { background: #FFF url("../img/rss_w.png") left center no-repeat; padding-left: 24px; display: inline-block; }

Y a-t-il un moyen pour que l'icône reste intacte lors du redimensionnement du texte ? Merci d'avance pour votre aide !
Modifié par Fix (14 Mar 2012 - 18:26)

Bonjour,

Pourquoi ne pas donner une hauteur fixe a ta balise ?

Bonjour, ton icône disparait logiquement lorsque la hauteur de ligne réduit. pour éviter cela: tu peux mettre l'icône en dur ou imposer une hauteur de ligne fixe.

Ajouter un "height: 16px" sur a.feed n'empêchera pas le redimensionnement du texte vers une taille plus grande sur certains navigateurs ? D'autre part, si je fais cela, l'icône n'est plus centrée verticalement par rapport au texte avec une taille plus grande (ou, par exemple, si le texte passe sur deux lignes).

Merci de votre aide !

Salut.

_laurent a écrit :
Pourquoi ne pas donner une hauteur fixe a ta balise ?

Parce que dans 90% des cas c'est une mauvaise idée d'utiliser height, entre autres parce que cela fait exploser la charte en cas de zoom texte. Mieux vaux jouer sur le padding ou le line-height selon les cas.

Effectivement, merci Florian_R.

Et la solution d'ajouter l'image en html directement (bon ca fait quelques ctrl+c ctrl+v ...) ?

@Florian_R : Je me pose tout de même une question... la plupart des menus ont par exemple un onglet en fond et donc une taille fixe... soit je ne me suis pas assez intéressé à ça, soit 90% des sites ont le problème dont tu parle non ?!

Selon le background, en jouant sur la couleur de fond ou le repeat ça passe. Dans les cas avec un dégradé oblique ou un motif un peu tordu, j'aime bien mettre une couleur de fond la plus proche possible de l'image et j'utilise un min-height. Si l'utilisateur zoom ou change la taille de police, c'est relativement moche, mais au moins ça reste utilisable.

Et en effet, beaucoup de sites sont blindés de height dans tous les sens, et ayant des yeux tout pourris, je trouve que c'est une des pires plaies qui puisse exister.
Modifié par Florian_R (14 Mar 2012 - 11:17)

Oui je vois.
Ah oui lors de ma première réponse j'avais pensé au min-height (pour que la hauteur ne descende pas en dessous de celle de l'image) mais j'ai zappé ensuite ... cela pourrait être une bonne alternative non ?
Modifié par _laurent (14 Mar 2012 - 11:26)

le min-height me paraît une bonne alternative.

pour éviter des copier/coller, insérer l'icône dans un :before, vous en pensez quoi?

Le min-height fonctionne, mais pas partout. J'ai ajouté le code CSS suivant :

p.p-feed a, a.feed { min-height: 16px; }

Néanmoins, pour le code HTML qui suit, ça ne fonctionne pas (comme on le voit sur cette page, pour la première icône de syndication, à gauche du lien "tous les billets (aide)", lorsqu'on réduit la taille du texte l'icône est toujours tronquée) :

<p class="p-feed black-links">
<a class="feed" href="http://sxjpl.free.fr/biblio/agenda/feed/atom" title="Fil de syndication des prochaines animations">animations</a> (<a href="http://sxjpl.free.fr/biblio/syndication">aide</a>)
</p>

D'autre part, j'ai voulu faire la même chose pour une autre icône sur la même page, mais cela décale complètement le texte vers le haut. Il s'agit de l'icône (3 bustes de couleur bleue, verte et orange) à gauche du titre "C'est vous qui le dites !". Le code HTML est le suivant :

<h2 class="near-feed">C'est vous qui le dites !</h2>

Et le code CSS qui lui correspond :

#comments h2, .dc-home #rang2 h2, .dc-lectures #rang2 h2 { background: transparent url("../img/comments.png") left center no-repeat; padding: 0 0 0 60px; margin-bottom: 10px; min-height: 32px; }

C'est l'ajout du "min-height: 32px;" dans la CSS qui provoque ce décalage (surtout visible lorsque l'on réduit la taille du texte). Y a-t-il moyen de conserver le centrage vertical ?

Merci pour votre aide !

Et bien il n'existe tout simplement pas de solution qui soit «parfaite» pour tout les cas de figure. Il est important que le rendu en augmentant la taille du texte pour l'accessibilité. Celui qui tient absolument à voir la page en pattes de mouches...

a écrit :
Néanmoins, pour le code HTML qui suit, ça ne fonctionne pas (comme on le voit sur cette page, pour la première icône de syndication, à gauche du lien "tous les billets (aide)", lorsqu'on réduit la taille du texte l'icône est toujours tronquée) :

a est de type inline, height n'aura donc aucun effet. utilise display: inline-block et height ou mieux min-height;

pour ton h2, mets un padding-top: 8px min-height: 24px; ça sera nickel (à un rétrécissement raisonable)

Pour finir et hors-sujet: pourquoi ajouter [↗] à tous tes liens? En gras et souligné ce n'est pas assez clair? Le rendu est effroyablement lourd, et la flèche particulièrement inesthétique. Signaler éventuellement les liens externes de la sorte

kustolovic a écrit :
pour éviter des copier/coller, insérer l'icône dans un :before, vous en pensez quoi?

Si l’icône est décorative, et que ce n'est pas dramatique qu'elle soit absente sous IE6, ça me semble une bonne solution.

kustolovic a écrit :
a est de type inline, height n'aura donc aucun effet. utilise display: inline-block et height ou mieux min-height;

C'est ce que j'ai fait... Mais l'icône a désormais disparue sous IE (7 et 8), alors qu'elle est toujours visible sous Firefox !
Code HTML :

<p class="p-feed right"><span>
		<a class="feed" href="http://sxjpl.free.fr/biblio/feed/atom" title="Fil de syndication des billets">tous les billets</a> (<a href="http://sxjpl.free.fr/biblio/syndication">aide</a>)
</span></p>

Code CSS :

p.p-feed { float: right; text-align: right; width: 270px; }
	#qui p.p-feed span a.feed { background: #AAA url("../img/rss_g.png") left center no-repeat; padding-left: 24px; }
p.p-feed a { min-height: 16px; display: inline-block; }

kustolovic a écrit :
pour ton h2, mets un padding-top: 8px min-height: 24px; ça sera nickel (à un rétrécissement raisonable)

Le problème, c'est qu'alors le texte sera décalé en hauteur par rapport à celui de droite (les liens de syndication). Ce décalage rend un rendu pas très joli... Ne peut-on s'en sortir avec des vertical-align, par exemple ?

kustolovic a écrit :
Pour finir et hors-sujet: pourquoi ajouter [↗] à tous tes liens?

C'est un site de test Donc sur le site final, seuls les liens extérieurs sont marqués d'une flèche, bien entendu.
Modifié par Fix (14 Mar 2012 - 14:22)

Mmm... Ça ressemble fort finalement à un bug d'IETester. Le sujet est donc résolu. Un grand merci à tous !