Création d'une "bulle" de commentaires en CSS

[tryan]

Bonjour,

J'essaye de créer une sorte de "bulle" comme on le trouve dans certains systèmes de commentaires avec avatar, une petit flèche pointant vers l'avatar et le pseudo+heure du commentaire.

Je pense y être parvenu mais comme il y a toujours mieux (mieux codé, code plus propre, etc.), j'aimerais avoir vos avis sur la chose.

J'ai mis en place une page de teste ici -http://creer.mon.site.free.fr/teste/ avec le code.

ps: c'est juste pour ma culture perso ^^...
Merci

 

[SpeedAirMan]

Intéressant !

Selon moi, le code n'est pas propre.

Ce qui me dérange, c'est cette partie :

<li class="fleche"></li>

Un <li> vide... c'est pas bon.


Un autre moyen de faire que j'ai en tête : implémenter la flèche ET la ligne de gauche dans une seule image (qui sera haute (height = élevé)), afin de s'adapter à toutes les hauteurs.


PS : pour + d'efficacité, augmente le contraste entre le fond et la bulle.

 

[tryan]

Merci de ta réponse SpeedAirMan .

Un autre moyen de faire que j'ai en tête : implémenter la flèche ET la ligne de gauche dans une seule image (qui sera haute (height = élevé)), afin de s'adapter à toutes les hauteurs.

Je crains ne pas avoir comprit la partie "(qui sera haute (height = élevé))" .. Bon, intégrer la flèche et la ligne de gauche en une seule image, OK! Quand tu dis "(height = élevé)", c'est à dire que cette même image devra avoir une hauteur très très très grande..c'est ça ?

Ensuite, comment l'implémenter dans le code sans avoir un <li> vide?

Sinon, le faite que j'ai pas mal de valeurs négatives dans le CSS ne te choque pas ?

 

[spout]

Ce n'est pas les exemples qui manquent:
https://www.google.com/search?hl=fr&source=hp&q=comment+bubble&lr=&aq=f&oq=

Pour les commentaires, il y a la balise <blockquote> prévue pour

 

[tryan]

Ce n'est pas les exemples qui manquent:
https://www.google.com/search?hl=fr&source=hp&q=comment+bubble&lr=&aq=f&oq=

Pour les commentaires, il y a la balise <blockquote> prévue pour

Je me suis tapé tous les liens de la première page et rien ne correspond à ce que je cherche à faire :| . J'utilise également la balise <blockquote> dans mon code. J'ai déjà fait des recherches sur "le comment faire" mais je n'ai jamais rien trouvé sur le sujet ou alors je n'ai pas utilisé les bons termes de recherches ^^.

Je viens de refaire un nouveau teste en changeant certains éléments et en utilisant la pseudo class "before". De cette façon je supprime le <li> vide et l'affichage semble correcte sous FF et IE.
-http://creer.mon.site.free.fr/teste/

 

[Leonick]

l'affichage semble correcte sous FF et IE.

avec IE 8 je n'ai pas la flèche de gauche

 

[e-kiwi]

http://www.cssplay.co.uk/menu/
va voir dans les pop-ups

 

[SpeedAirMan]

Merci de ta réponse SpeedAirMan .

Un autre moyen de faire que j'ai en tête : implémenter la flèche ET la ligne de gauche dans une seule image (qui sera haute (height = élevé)), afin de s'adapter à toutes les hauteurs.

Je crains ne pas avoir comprit la partie "(qui sera haute (height = élevé))" .. Bon, intégrer la flèche et la ligne de gauche en une seule image, OK! Quand tu dis "(height = élevé)", c'est à dire que cette même image devra avoir une hauteur très très très grande..c'est ça ?

Oui, c'est ça, car cette image devra comprendre la flèche + la bordure et être extensible en fonction de la hauteur du contenu.

Sinon, le faite que j'ai pas mal de valeurs négatives dans le CSS ne te choque pas ?

Non... tu utilises beaucoup les valeurs négatives, effectivement, mais CSS le permet (uniquement pour les margin je crois).
Par contre l'utilisation de <li>, je sais pas. Ce n'est pas vraiment une liste d'éléments... si ?

Tu devrais pouvoir réaliser l'ensemble avec uniquement :
1 <blockquote>
1 <p> (pour le contenu)
1 <hn> peut être pour "Le 12-01-2001, c00lman a dit : " (mais tu peux faire un <p class="tintin"> )
1 image (en background)

Le code serait alors moins casse tête, l'image un peu plus lourde, et non cliquable (quoi que, y'a encore d'autres moyens là : tu peux aussi faire "floater" des images).


Attention à la compatibilité avec les différents navigateurs (IE par exemple)