[Systeme d'emoticone]<span>=><img>
CactO_o's
Messages postés
27
Statut
Membre
-
Chucky2401 Messages postés 105 Statut Membre -
Chucky2401 Messages postés 105 Statut Membre -
Bonjour à tous !
Je suis en train de faire un système d'émoticone, voilà le code exemple :
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
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:
- [Systeme d'emoticone]<span>=><img>
- Restauration systeme windows 10 - Guide
- Vérificateur des fichiers système - Guide
- Img burn - Télécharger - Gravure
- Emoticone gratuit - Télécharger - Vie quotidienne
- Fichier img - Télécharger - Photo & Graphisme
12 réponses
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 !
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 !
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
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 ???
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 ^^
<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 ^^
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
La class emoticone ? Je ne vois pas de class emoticone, je vois une classe emoticone add, qui n'est pas valide.
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
Double class sur ma balise span
Pour ça par exemple :
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...
.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...
Désolé si tu le prends mal, mais j'essaye de comprendre un maximum, pour pouvoir essayer de t'aider.
Salut !
J'ai fais ceci, dit moi ce que tu en penses :
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>
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>
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>
