28172 sujets

CSS et mise en forme, CSS3

[Résolu] Icône sous forme img ou background-image?

Bonjour

L'exemple est dans http://paralletes.free.fr/tests/glimpse.html

La question: je préférerais pouvoir écrire

<p class="glimpse">libero turpis non cras ligula, id commodo, aenean est in volutpat amet sodales, porttitor bibendum facilisi suspendisse, aliquam ipsum ante morbi sed ipsum mollis. Sollicitudin viverra, vel varius eget sit mollis.</p>

plutôt que

<p><img src="/tombes/nobles/photo/glimpse.png" alt=""/>libero turpis non cras ligula, id commodo, aenean est in volutpat amet sodales, porttitor bibendum facilisi suspendisse, aliquam ipsum ante morbi sed ipsum mollis. Sollicitudin viverra, vel varius eget sit mollis.</p>

mais je ne vois pas comment styler la classe "glimpse" pour obtenir le même résultat d'autant plus que <p> est en display:inline; pour permettre au texte de se replier sous l'image lorsqu"on réduit la taille e l'écran.

Une idée?
Modérateur
Bonjour,

C'est la troisième fois aujourd'hui que je suggère l'utilisation d'un :before ! Smiley cligne 
.glimpse:before
{
	content:url(http://paralletes.free.fr/tombes/nobles/photo/aametjou83.jpg);
	display:block;
	float:left;
}

EDIT: en y repensant, je crois qu'il vaudrait mieux mettre le :before au niveau de la balise <figure>. Il faut éventuellement ajouter un line-height:0; si on veut éviter la présence d'un espace en dessous de l'image. Par exemple :
figure:before
{
	content:url(http://paralletes.free.fr/tombes/nobles/photo/aametjou83.jpg);
	display:block;
	float:left;
	margin-right:0.5em;
	border-radius:0.5em;
	overflow:hidden;
	line-height:0;
}

EDIT 2: je ne sais pas lire. Je me suis trompé d'image. Mea culpa. Mais bon, le principe reste le même :
.glimpse:before
{
	content:url(http://paralletes.free.fr/tombes/nobles/photo/glimpse.png);
	display:block;
	float:left;
	line-height:0;
}

EDIT 3: et comme je sens arriver la question qui demande comment faire pour que l'image se réduise comme le texte, voici une réponse préventive :
.glimpse:before
{
	content:"";
	display:block;
	float:left;
	line-height:0;
	width:2em;
	height:2em;
	margin-right:0.5em;
	background:url(http://paralletes.free.fr/tombes/nobles/photo/glimpse.png) no-repeat;
	background-size:100%;
}
Amicalement,
Modifié par parsimonhi (11 Jan 2016 - 14:28)
Merci beaucoup, c'est bien entendu la dernière mouture que je vais prendre.

Mais les autres sont également intéressantes, je n'avais jamais utilisé autre chose que du texte dans un :before{content:...}
PapyJP a écrit :
je n'avais jamais utilisé autre chose que du texte dans un :before{content:...}

Oui, les pseudo éléments permettent de faire vraiment beaucoup de choses. Des boites, des listes, des lignes centrées autour d'un titre, des switchs, des ribbons, etc...

Ha là là! Comment faisait-on avant les pseudos éléments ? Je ne pourrais plus revenir en arrière...
Olivier C a écrit :
Ha là là! Comment faisait-on avant les pseudos éléments ? Je ne pourrais plus revenir en arrière...
on fait sans, mais c'est vrai que c'est mieux avec. Sauf que c'est supporté de façon pas tout à fait cohérente selon les navigateurs. Je me souviens en particulier d'un problème rencontré récemment et que j'ai rapporté sur ce forum, dans lequel un :before{content:'xxxx'} ne fonctionnait pas sous Chrome pare que le xxxx en question était un caractère "graphique" exprimé en hexadécimal.
Rien n'est parfait en ce bas monde..
Ah... je n'ai pas vu le post passer mais si l'on met :
@charset "UTF-8";

En déclaration dans la feuille de styles je pense que ça devrait passer...
Modifié par Olivier C (12 Jan 2016 - 16:02)
Modérateur
Olivier C a écrit :
Ah... je n'ai pas vu le post passer mais si l'on met :
@charset "UTF-8";

En déclaration dans la feuille de styles je pense que ça devrait passer...

he he je me souviens du problème, c'était pas vraiemtn un problème de charset, dans le css on peut juste l'exprimer à partir du code html hexa : http://forum.alsacreations.com/topic-4-77091-1-ResoluCaractere-encode-dans-un-content.html
Modifié par _laurent (12 Jan 2016 - 16:16)
Oui, c'est bien à ce sujet que je pense.
En fait content:"\2192"; fonctionne très bien sous FF, mais pas sous Chrome. J'ai fini par revenir à une image.
Modérateur
Bonjour,

Désolé de m’immiscer dans cette conversation, mais ça m'étonne un peu.

Si on met dans le css… 
.xxx:after {content:"\2192";}
… ça marche très bien avec chrome me semble-t-il, que la page utilisant le css soit en utf-8 ou en iso-8859-1. De quel chrome s'agissait-il ?

Amicalement,
Modifié par parsimonhi (13 Jan 2016 - 02:12)
Oui, à la première allusion de Papy à un "caractère graphique exprimé en hexadécimal" je n'avais pas tilté qu'il s'agissait d'un caractère unicode.

Et effectivement je n'utilise jamais les unicodes en natif car ils n'apparaissent pas (tous) sur certains OS, tel qu'Androïd par exemple, ou alors les différences de rendu me sont rédhibitoires (chez moi votre exemple fonctionne avec Chrome, mais bon...). Par contre je les utilise beaucoup en usage détourné pour mes fonts icons.
Modifié par Olivier C (13 Jan 2016 - 06:37)
Excusez moi de n'avoir été très clair. Pour moi il n'existe plus que l'Unicode codé en UTF-8 (une usine à gaz, mais il faut faire avec), surtout depuis que j'ai dû inclure du chinois et du japonais dans un de mes sites.
Si je me souviens bien, le caractère s'affichait correctement, mais il y avait des problèmes de présentation, par exemple la couleur n'était pas la bonne, le positionnement (à coup de margin et/ou padding) n'était pas le bon, et ce non seulement sous la version courante de Chrome, mais également celle de Safari sur iOS.
Il faudrait que je me replonge dans les fichiers de tests, pour autant que je ne les aie pas supprimés.
J'ai déduit de cette expérience qu'il ne fallait pas s'entêter avec cette techno et j'ai laissé tomber.
Modérateur
Bonjour,

D'une manière générale, les flèches ont des représentations très variables d'une police à l'autre. C'est sans doute pour ça que tu avais des problèmes d'affichage. Il n'y a pas que la taille qui varie. Parfois, elles sont même stylées façon bouton (avec couleur de fond et bordure).

Elles peuvent avoir aussi, pour une police donnée, un aspect variable selon les caractères qui les précèdent ou leur succèdent (plus ou moins longues, plus ou moins penchées pour celles qui sont obliques, ...).

Il s'agit donc de caractères dont l'utilisation est délicate quelque soit l'endroit où on les place. Rien à voir avec un problème de codage dans le css donc !

Amicalement,
Modifié par parsimonhi (15 Jan 2016 - 10:54)
Sujet clos
Aller à