Sujet Précédent Sujet Suivant

[Systeme d'emoticone]<span>=><img>

Fermé
CactO_o's Messages postés 25 Date d'inscription lundi 6 octobre 2008 Statut Membre Dernière intervention 15 juin 2009 - 17 mai 2009 à 20:48
Chucky2401 Messages postés 101 Date d'inscription mercredi 6 juin 2007 Statut Membre Dernière intervention 16 novembre 2011 - 21 mai 2009 à 16:00
Bonjour à tous !

Je suis en train de faire un système d'émoticone, voilà le code exemple : 


<html>
  <head>
    <title>test emoticone</title>
<style>
.emoticone .emoticone_image
{
	display : block; 
	width  : 25px;
	height : 25px;
	background-repeat : no-repeat;
}
.emoticone.add .emoticone_image
{
	background-image : url("add.png");
}
.emoticone
{
	display : block; 
	width : 25px;
	height : 25px;
	border : 1px solid red;
}

</style>
  </head>
  <body>
  blablabla
<span class='emoticone add'>
	<span class='emoticone_image'></span>

</span>
<span class='emoticone add'>
	<span class='emoticone_image'></span>
</span>
<span class='emoticone add'>
	<span class='emoticone_image'></span>
</span>
blablabla

  </body>
</html>




Pour bien comprendre, voici un lien vers mon serveur avec exactement la même page ==> http://www.cactoos.org/test/emoticone/

Je voudrais exactement le même effet qu'actuellement mais que les images ne reviennent pas à la lignes... (comme une balise <img>)

Quelqu'un saurais comment faire ???

Merci à tous
A voir également:

12 réponses

Réponse 1 / 12
Chucky2401 Messages postés 101 Date d'inscription mercredi 6 juin 2007 Statut Membre Dernière intervention 16 novembre 2011 4
17 mai 2009 à 20:51
Salut à toi !

Je pense qu'en rajoutant un : float: left à cette partie là : .emoticone .emoticone_image
{
display : block;
width : 25px;
height : 25px;
background-repeat : no-repeat;
}

sa devrait le faire. Mais je ne suis pas sûr à 100%, mais ta rien à perdre à essayé.

Salutations !
0
Réponse 2 / 12
CactO_o's Messages postés 25 Date d'inscription lundi 6 octobre 2008 Statut Membre Dernière intervention 15 juin 2009
17 mai 2009 à 20:52
Oép, j'avais déjà essayer... Mais le problème est que tout ce qui est derrière se placera à la suite, mais la première images ira à la ligne... :s
0
Réponse 3 / 12
Chucky2401 Messages postés 101 Date d'inscription mercredi 6 juin 2007 Statut Membre Dernière intervention 16 novembre 2011 4
17 mai 2009 à 21:17
Déjà y a un truc que j'arrive pas à saisir dans ton script, pourquoi tu fais appel à la balise span deux fois, pour afficher une image ? Pourquoi pas une seule fois ???
0
Réponse 4 / 12
CactO_o's Messages postés 25 Date d'inscription lundi 6 octobre 2008 Statut Membre Dernière intervention 15 juin 2009
17 mai 2009 à 21:31
En faite, le principe c'est que plus tard, il y aura une autre balise <span class="emoticone_title"> de façon a faire ce code :

<span class='emoticone add'>
<span class='emoticone_image'></span>
<span class='emoticone_title'>Blablabla</span>
</span>

Et en faite au survol de la class .emoticone sa affichera tel une infobulle la balise emoticone_title... Mais le problème n'est pas la ^^
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 12
Chucky2401 Messages postés 101 Date d'inscription mercredi 6 juin 2007 Statut Membre Dernière intervention 16 novembre 2011 4
17 mai 2009 à 21:56
La class emoticone ? Je ne vois pas de class emoticone, je vois une classe emoticone add, qui n'est pas valide.
0
Réponse 6 / 12
CactO_o's Messages postés 25 Date d'inscription lundi 6 octobre 2008 Statut Membre Dernière intervention 15 juin 2009
17 mai 2009 à 22:49
C'est complètement valide, et ce n'est pas la class 'emoticone add' mais la class 'emoticone' et la class 'add'...

Double class sur ma balise span
0
Réponse 7 / 12
Chucky2401 Messages postés 101 Date d'inscription mercredi 6 juin 2007 Statut Membre Dernière intervention 16 novembre 2011 4
17 mai 2009 à 22:54
Je vois pas l'intérêt d'une double class... une suffit amplement.
0
Réponse 8 / 12
CactO_o's Messages postés 25 Date d'inscription lundi 6 octobre 2008 Statut Membre Dernière intervention 15 juin 2009
17 mai 2009 à 22:59
Pour ça par exemple : 

.emoticone .emoticone_image
{
	
	width  : 25px;
	height : 25px;
	background-repeat : no-repeat;
}
.emoticone.add .emoticone_image
{
	background-image : url("add.png");
}
.emoticone.delete .emoticone_image
{
	background-image : url("../imgs/del.png");
}



J'ai un autre exemple ou je ne peux même pas faire autrement (pas juste un gain de temps)... mais bien trop long pour être mis ici..

Enfin c'est très gentil de critiquer mon code... Mais tu m'aides en aucun cas...
0
Réponse 9 / 12
Chucky2401 Messages postés 101 Date d'inscription mercredi 6 juin 2007 Statut Membre Dernière intervention 16 novembre 2011 4
18 mai 2009 à 16:43
Désolé si tu le prends mal, mais j'essaye de comprendre un maximum, pour pouvoir essayer de t'aider.
0
Réponse 10 / 12
Chucky2401 Messages postés 101 Date d'inscription mercredi 6 juin 2007 Statut Membre Dernière intervention 16 novembre 2011 4
19 mai 2009 à 21:16
Salut !
J'ai fais ceci, dit moi ce que tu en penses : 

<style type="text/css">
.emoticone_image
{
	display : block; 
	width  : 25px;
	height : 25px;
	background-repeat : no-repeat;
}
.emoticone.add .emoticone_image
{
	background: black;
}

.emoticone.add
{
	display: block;
	float: left;
}

.emoticone
{
	display : block; 
	width : 25px;
	height : 25px;
	border : 1px solid red;
}

.nofloat
{
	clear: both;
}


</style>
  </head>
  <body>
<p class="nofloat">blablabla</p>

<span class='emoticone add'>
	<span class='emoticone_image' id="image_une"></span>
</span>

<span class='emoticone add'>
	<span class='emoticone_image'></span>
</span>

<span class='emoticone add'>
	<span class='emoticone_image'></span>
</span>

<p class="nofloat">blablabla</p>

  </body>
</html>
0
Réponse 11 / 12
CactO_o's Messages postés 25 Date d'inscription lundi 6 octobre 2008 Statut Membre Dernière intervention 15 juin 2009
20 mai 2009 à 01:37
Le problème de ton code est que si je veux mettre une émoticone en plein millieu du texte, comme dans un simple forum. Les images se mettrons à la ligne..

Par exemple, si tu remplaces ton body par :

<body>
<p class="nofloat">blablabla</p>

<p>
BlaBlaBlaBla

<span class='emoticone add'>
<span class='emoticone_image' id="image_une"></span>
</span>

<span class='emoticone add'>
<span class='emoticone_image'></span>
</span>

<span class='emoticone add'>
<span class='emoticone_image'></span>
</span>
B laBlabLa</p>
<p class="nofloat">blablabla</p>

</body>
0
Réponse 12 / 12
Chucky2401 Messages postés 101 Date d'inscription mercredi 6 juin 2007 Statut Membre Dernière intervention 16 novembre 2011 4
21 mai 2009 à 16:00
Salut !
Alors là sa devient compliqué mdr !
Je ne vois pas comment faire. Attend que quelqu'un d'autre passe et qu'il pourra t'aidai mieux que moi.
Désolé.

Bon courage par la suite.

Salutations !
0

Discussions similaires

peripherique systeme de base windows 10
manto -
kaneagle -

29 réponses
Signification de " :3 "
blanchecanelle -
Pistounette -

5 réponses
Système d'exploitation 32 bits, processeur x64
Laurent1998480 -
gugu59 -

17 réponses
ouvrir un fichier .img
fanny -
Freebike -

11 réponses