Smyles dans un texte

**AlTi5** · 02/05/2009, 14h15

Bonjour a tous,

Après de multiples recherches sans réponses, je me résous à créer un topic sur votre forum dans l'espoir de trouver une réponse.

Ce que je souhaite faire est afficher un smyle dans le texte avec pour simple balise pour l'appeler <son_nom> et c'est tout.

Mais le problème est qu'il me fait des retours à la ligne si j'utilise "display:block" ou encore qu'il ne s'affiche pas, les "float" ne m'intéressent pas plus que cela :s ( je souhaite que l'image suive le texte), je ne pense pas non plus que les "liste style type" fonctionnent pour supprimer les paragraphes.

Bref j'ai à peu près tout essayé mais l'affichage bug et je n'arrive pas à afficher un smyle dans mon texte sans que celui-ci retourne à la ligne!

voila le code pour vous montrer mon raisonnement!

le HTML

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<head>
<link rel="stylesheet" media="screen" type="text/css" title="défaut" href="icone.css">
</head>
 
<body>
<span class="smyle">
 
<horror> "smyle horror qui s'affiche en block 
et fait un retour a la ligne (comme un paragrahe)
 
mon contenue
 
</span>
</body>

LE CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
@charset "utf-8";
.smyle horror{
height:19px;
width:19px;
display: block;
background-image: url(/dreamer/plaisir/smyle/horror.gif);
background-repeat:no-repeat;
}

Merci pour votre aide!

**Macmillenium** · 02/05/2009, 14h46

Bonjour et bienvenue

Span est un élément inline non-remplacé, tu ne peux pas lui attribuer un width et height.

Envoyé par AlTi5

Mais le problème est qu'il me fait des retours à la ligne si j'utilise "display:block"

C'est le comportement par défaut d'un élément block, occuper toute la largeur de son conteneur.

Envoyé par AlTi5

Bref j'ai à peu près tout essayé mais l'affichage bug et je n'arrive pas à afficher un smyle dans mon texte sans que celui-ci retourne à la ligne!

Il est possible de simuler un comportement block et inline :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
.smyle horror{
height:19px;
width:19px;
display:-moz-inline-box; /* Firefox 2 qui ne reconnait pas inline-block */
display:inline-block;
background-image: url(/dreamer/plaisir/smyle/horror.gif);
background-repeat:no-repeat;
}

et pour IE7- :

Code xhtml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
<head>
<link rel="stylesheet" media="screen" type="text/css" title="défaut" href="icone.css">
<!--[if lte IE 7]>
<style type="text/css">
.smyle horror{
display:inline;
zoom:1; /* conféré le layout pour obtenir le même comportement qu'un inline-block */ 
}
</style>
<![endif]-->
</head>

Assure-toi que tu es bien en mode de rendu standard (Doctype complet et correcte).

**AlTi5** · 03/05/2009, 00h39

je viens de faire le teste et cela fonctionne mais!

l'image se mettre sous le texte et on ne peut donc pas la voir... il n'y a pas d'espace entre le moment ou il est inséré et le texte qui le suit. (les "margin" ne change rien ni les &nbsp qui créé des retours a la ligne :s)

second problème certaine insertion font totalement bugué l'affichage avec des retour a la ligne et décalage.

je peut intégré l'image en fin de phrase cela ne pose pas de problème.

merci pour le début de résolution en tout cas

ps: ma réponse c'est fait attendre cars mon serveur était en erreur 500 toute la journée :s

**Macmillenium** · 03/05/2009, 14h52

Envoyé par AlTi5

l'image se mettre sous le texte et on ne peut donc pas la voir... il n'y a pas d'espace entre le moment ou il est inséré et le texte qui le suit. (les "margin" ne change rien ni les &nbsp qui créé des retours a la ligne :s)

Pourrais tu poster la totalité de ton code (X)HTML/CSS stp.

**AlTi5** · 04/05/2009, 17h09

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<body>
<div id="main">
<a href="lien"><div id="ban"></div></a>
 
<div id="corps" class="element_normal">
<ul>
<li><h2><a href="#2"> lien </a> titre</li>
</ul>
</div>
 
<span class="smyle">
<div id="corps" class="element_normal">
<div id="2"><h2><u>titre</u></h2></div>
<p><span class="date"> le 26/04/2009</span></p>
<h3>titre moyen</h3>
<p>&nbsp;</p>
<p>blalblabla <horror> dfdf dfdf</p> 
</div>
</span>
</div>
</body>

le css ne change pas

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
.smyle horror{
height:19px;
width:19px;
display:inline-block;
border:10px;
background-image: url(/dreamer/plaisir/smyle/horror.gif);
background-repeat:no-repeat;
}

**Macmillenium** · 04/05/2009, 23h46

Un élément inline (span, a) ne peut pas contenir d'éléments block (div, h3, p) comme tu le fais.

Dsl mais la qualité de ton code n'est pas du tout motivante

Code xhtml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="fr">
<head>
...
</head>
 
<body>
 
<div id="main">
	<div id="ban"> 
		<a href="lien">&nbsp;</a>
	</div>
 
	<div id="corps" class="element_normal">
		<ul>
			<li>
				<h2><a href="#2"> lien </a> titre</h2>
			</li>
		</ul>
	</div>
 
	<div class="smyle">
		<div id="corps" class="element_normal">
			<h2 id="2">titre</h2>
			<span class="date"> le 26/04/2009</span>
 
			<h3>titre moyen</h3>
			<p>blalblabla <horror> dfdf dfdf</p> 
		</div>
	</div>
</div>
 
</body>
</html>

Smyles dans un texte

CSS

Vue hybride

Discussions similaires

Partager

Partager