Discussion :

[speedylol]

Bonjour, j'aimerais réduire l'espace entre deux ligne <li> en vertical mais je n'arrive pas à mettre cela en place, Merci d'avance

Code :

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

1
2
3
4
        li{
			display: inline-block;
            cursor: pointer;
        }

[Azerx]

Bonjour,
tu n'as qu'à régler le "margin-top" et/ou le "margin-bottom" en fonction de tes besoins

[NoSmoking]

Bonjour,

j'aimerais réduire l'espace entre deux ligne <li> en vertical

regarde du coté de line-height.

[ABCIWEB]

Et peut-être aussi en complément du line-height faire un reset des valeurs (padding, margin...) par défaut si tu veux avoir le même rendu dans différents navigateurs.

[speedylol]

bonjour, j'ai fait quelque test suivant vos indications , mais cela reste pareil .

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
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
echo'<style type="text/css">
.color_date {
	color: #00F;
}
.color_pseudo {
	color: green;
}
 
        li{
			line-height:-2px;
			display: inline-block;
            cursor: pointer;
        }
        .destinataire{
            font-weight: bold;
            list-style-type: circle;
        }
</style>';
 
 
 
 
     $sql  = $connection->query('SELECT * FROM messages_chat ORDER BY id ASC');
     $sql->execute();
     while($data = $sql->fetch(PDO::FETCH_OBJ)){
 
 
	 $date = new DateTime($data->temp);	 
 
	echo('<ul class="users"><span class="color_date">'.$date->format('H:i:s').'</span><b>
	&nbsp;:&nbsp;</b><b><li class="color_pseudo" data-index="&nbsp;'.$data->pseudo_chat.'&nbsp;">'.$data->pseudo_chat."</li></b>:".Smilyes(stripslashes(htmlspecialchars($data->message))).'</ul>');	 
?>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <script>
        $(".users li").click(function(){
            $('.destinataire').removeClass('destinataire');
            $(this).addClass('destinataire');
            $(".message").val($(this).data('index'));
        });
    </script>
<?PHP		
 
 
    $connection->exec('DELETE FROM messages_chat WHERE temp < DATE_SUB(NOW(), INTERVAL 1 DAY)');	
 
 
}	 
	?>

[johnrock]

Bonjour Speedylol!
Je pense que line-height ne doit pas avoir une valeurs négative (< à 0) comme dans ton cas avec line-height: -2;, puisqu'il s'agit de la hauteur de la ligne de texte.
Selon ce qu'ont dit ceux qui m'ont précédés, je pense que ton code serait à peu près (à modifier selon ton désir):

Code :

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

1
2
3
4
5
6
 
li{
    line-height:20px;
    display: inline-block;
    cursor: pointer;
}

ou encore:

Code :

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

1
2
3
4
5
6
 
li{
    margin-top: 30px;
    display: inline-block;
    cursor: pointer;
}

j'espère que cela te sera utile.

[speedylol]

bonjour johnrock merci mais rien ne fait je n'arrive pas à réduire l'écart en les lignes.

J'ai testé tout déjà je donne ma langue au chat

[NoSmoking]

Plutôt que de donner ta langue au chat tu devrais nous fournir du code exploitable et représentatif, pas du PHP mais du HTML

[speedylol]

Bonjour No-smoking, mon code je l'ai déposé plus haut dans le sujet.

Dans mon script final qui est ici-dessus, tu click (jquery) sur le pseudo et tu l'envoie dans l'input de dialogue.

[Invité]

Bonjour,

tu es ici dans le forum CSS : donc PAS de code PHP !

Les seuls codes nécessaires sont :

• le code CSS
• le code HTML généré ("Ctrl" + "U" ou clic droit + "Afficher le code source")
• JS/jQuery (si utile)

... nous fournir du code exploitable et représentatif...

• Ca signifie une "page test", qu'on peut TESTER (et qui montre le problème).
• Ou la page en ligne.

Donc, si tu veux qu'on puisse t'aider, sois un peu plus coopératif.

Vu la question posée, on ne peut que répondre :

Code css :

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

1
2
3
4
5
6
li {
   display: inline-block;
   cursor: pointer;
   margin:0;
   padding:0;
}

S'il existe d'autre instructions CSS qui prennent le dessus, on ne peut pas le deviner.

[speedylol]

bonjour voici le code demandé.

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
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<title>Mon Chat</title>
</head>
<body>
	<div id="global">
    <h1>Mon Tchat</h1>
	<div id="messa_chat" class="deplace">La réponse sera affiché à la place de ce texte.	</div>
	<div id="online" class="deplace"> </div>
	<div id="send_chat" class="deplace">
 
<div id="emoticons">
    <a href="#" title="SnormalS"><img alt=":)" border="0" src="smileys/normal.gif" width="20" height="20" /></a>
    <a href="#" title="SmalS"><img alt=":(" border="0" src="smileys/mal.gif" width="20" height="20" /></a>
    <a href="#" title="StimideS"><img alt=":(" border="0" src="smileys/timide.gif" width="20" height="20" /></a>
    <a href="#" title="SpleureS"><img alt=":o" border="0" src="smileys/pleure.gif" width="20" height="20" /></a>
    <a href="#" title="SamourS"><img alt=":o" border="0" src="smileys/amour.gif" width="20" height="20" /></a>
    <a href="#" title="ScoeurS"><img alt=":o" border="0" src="smileys/coeur.gif" width="20" height="20" /></a>
    <a href="#" title="SkissS"><img alt=":o" border="0" src="smileys/kiss.gif" width="20" height="20" /></a>
    <a href="#" title="SfleurS"><img alt=":o" border="0" src="smileys/fleur.gif" width="20" height="20" /></a>
 </div>
<form method="post" id="monform">
<textarea name="message" id="message" class="message" rows="2" cols="100"></textarea>&nbsp;&nbsp; 
<input type="hidden" name="pseudo" id="pseudo" value="jule"/>&nbsp;&nbsp;
<input type="button" id="envoi" value="Go">
</form>
</div>
</div>
<script type="text/javascript" src="fonctions.js"></script>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
$('#emoticons a').click(function() {
    var smiley = $(this).attr('title');
    ins2pos(smiley, 'message');
}); 
function ins2pos(str, id) {
   var TextArea = document.getElementById(id);
   var val = TextArea.value;
   var before = val.substring(0, TextArea.selectionStart);
   var after = val.substring(TextArea.selectionEnd, val.length);
   TextArea.value = before + str + after;
}  
</script>      
</body>
</html>

[Invité]

Super.

Aucun <li> en vue...

Cela dit... (sans vouloir te vexer)

Code php :

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

1
2
	echo('<ul class="users"><span class="color_date">'.$date->format('H:i:s').'</span><b>
	&nbsp;:&nbsp;</b><b><li class="color_pseudo" data-index="&nbsp;'.$data->pseudo_chat.'&nbsp;">'.$data->pseudo_chat."</li></b>:".Smilyes(stripslashes(htmlspecialchars($data->message))).'</ul>');

...vu le code, on se demande si tu connais la syntaxe des listes <ul><li>... voire la syntaxe HTML tout court.

Indice : le <span> n'a rien à faire là. Les <b> non plus.

DOnc: avec un code HTML valide, ça devrait aller mieux.

[edit] Finalement, tu avais raison : le problème était bien exposé dans le code PHP fourni...

...mon code je l'ai déposé plus haut dans le sujet...

[honizukaz]

Bonjour,

Je viens mettre mon grain de sel. Au vue de ton css (display: inline-block) es tu certains de vouloir parler d'espacement vertical ou horizontal ?

Un petit screen explicite serait le bienvenu

Si je peu me permettre dans tout les cas oublie le "line-height", sinon tu risques d'avoir des soucis lorsque ta li sera sur 2 lignes. Dans tout les cas tu peu utiliser le margin, celui ci peut être déclarer avec des valeurs négative. Donc en horizontal : margin-left : -5px, ou en vertical : margin-bottom:-5px.
Si ton soucis est pour un espacement horizontal pense à l’enchaînement des li qui ne dois pas contenir d'espace pour un inline-block (donc soit <li></li> soit pour avoir ton retour à la ligne et avoir du code propre : <li><!--\n--></li>)

Sinon comme l'a dit jreaux62, ton php n'indique rien de bon, mais c'est difficile à concevoir une bonne réponse avec ce code là.