Gérer la position des smileys et images dans les messages

Voir le sujet précédent Voir le sujet suivant Aller en bas

  • 0

Astuce Gérer la position des smileys et images dans les messages

Message par Ea Ven 2 Avr 2010 - 18:05

Gérer la position verticale des smileys et images dans les messages

Cette astuce fonctionne pour tout les types de forum Forumactif et est réalisable avec juste un petit ajout dans le CSS personnalisé du forum.

Comment ajouter la propriété ?


C'est très simple, il suffit d'aller dans la page du CSS personnalisé comme suit :

Panneau d'administration  Affichage  Couleurs - Feuille de style CSS

Là il vous suffira d'ajouter tout à la fin de la zone de saisie le code qui suit :

Code:
sélecteur {vertical-align: valeur;}

Dans lequel il faudra que vous ayez remplacé sélecteur et valeur suivant ce que vous souhaitez par rapport à ce qui est expliqué dans les deux points suivants.

N'oubliez pas de cliquer sur le bouton Valider pour sauvegarder les modifications.

Les sélecteurs pour les différentes versions


Un sélecteur CSS c'est comme son nom l'indique un peu, l'expression qui va sélectionner les éléments auxquels on veut que les propriétés CSS qui suivent entre accolades s'appliquent. Chaque version a sa propre structure et donc les sélecteurs pour arriver à récupérer les images des messages dépendent de la version.

Pour phpBB2


On a une imbrication HTML comme ceci :

Voir illustration :

Et nous on veut appliquer la propriété aux images dans le message, on peut donc tout simplement prendre les balises images (img) se trouvant dans une balise ayant la classe postbody (cela s'écrit tout simplement en mettant un . devant le nom de la classe donc .postbody).

On arrive donc au sélecteur pour Phpbb2 (il y a plein d'autres possibilités) suivant :

Code:
.postbody img

Pour phpBB3


On a alors cette imbrication là :

Voir illustration :

C'est pareil que Phpbb2 pour le départ, on doit sélectionner les images (img) étant dans un élément avec la classe postbody (.postbody) mais en plus elles doivent être dans des éléments avec la classe .content (.content) qui se trouve dans la balise avec la classe postbody.

On a alors le sélecteur pour Phpbb3 suivant :

Code:
.postbody .content img

Pour PunBB


On a maintenant ceci comme structure HTML au niveau d'un message :

Voir illustration :

C'est assez simple, il suffit de sélectionner les images (img) se trouvant dans un élément avec la classe entry-content (.entry-content), ce qui nous donne donc cette fois ce sélecteur pour Punbb :

Code:
.entry-content img

Pour Invision


Voici maintenant la dernière version, Invision qui elle a une structure comme ceci :

Voir illustration :

Comme en Punbb c'est assez simple, on sélectionne les images (img) étant dans un élément avec la classe post-entry (.post-entry) ce qui nous donne donc le sélecteur pour Invision :

Code:
.post-entry img

Les remplacements pour valeur et leurs significations


Baseline


Le bas de l'image est mis à la hauteur de la ligne de base (la ligne horizontale qu'on pourrait tracer en touchant les bas des lettres b, a, s, u, m, i, e, ... mais qui couperait les g, p, j, ...).

Gérer la position des smileys et images dans les messages 2dhfyq8

Top


Le haut de l'image est mis à la hauteur du haut de la ligne de texte (suivant la hauteur des lignes de texte le résultat sera donc différent).

Gérer la position des smileys et images dans les messages Sf89q8

Bottom


Le bas de l'image est mis à la hauteur du bas de la ligne de texte (cela donnera donc aussi un résultat différent selon la hauteur des lignes).

Gérer la position des smileys et images dans les messages 8x3fow

Middle


L'image se mettra au milieu de la ligne de texte.

Gérer la position des smileys et images dans les messages Opuz6d

Text-top


Le haut de l'image se mettra à la hauteur de la plus grande lettre de la ligne (l'image sera donc plus haute pour une ligne où il n'est écrit que "b" que pour ligne où il n'est écrit que "a").

Gérer la position des smileys et images dans les messages Wioyhl

Text-bottom


C'est le même principe mais pour le bas (l'image sera donc plus basse avec une ligne où il n'est écrit que "g" qu'une ligne où il n'est écrit que "a").

Gérer la position des smileys et images dans les messages Out5xk

Super


L'image se met à la ligne de base des exposants.

Un texte en exposant c'est par exemple : ceci.

Gérer la position des smileys et images dans les messages 2vvqgqv

Sub


L'image se met à la ligne de base des indices.

Un texte en indice c'est par exemple : cela.

Gérer la position des smileys et images dans les messages M7zv4o

Mesures en px, em, % ou ex


L'image se met à la distance spécifiée de la ligne de base, si c'est négatif ce sera vers le dessous et si c'est positif vers le dessus, par exemple en mettant 4px l'image se mettra 4 pixels au dessus de la ligne de base :

Gérer la position des smileys et images dans les messages Fc5sea

Quelques exemples d'applications


Code:
/* phpbb2 : mis au milieu */

.postbody img { vertical-align: middle; }

Code:
/* phpbb3 : mis en exposant */

.postbody .content img { vertical-align: super; }

Code:
/* punbb : mis 3 pixels en dessous de la ligne de base */

.entry-content img { vertical-align: -3px; }

Code:
/* invision : mis à la ligne de base */

.post-entry img { vertical-align: baseline; }

Ea

Ea
Aidactif
Aidactif

Messages : 23583
Inscrit(e) le : 04/04/2008

Voir le profil de l'utilisateur
Ea a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum