Espace indésirable entre caractères

**gab.m** · 08/04/2021, 19h50

Bonjour à tous

pour afficher des températures, je récupère des variable d'un json

sous ce format

Code javascript :

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

1
2
    $('#' +city+ 'mintemp1').text(Math.round(mintemp));
    $('#' +city+ 'maxtemp1').text(Math.round(maxtemp));

Le HTML (pour les tests j'ai modifié le nom des variables)

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
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="maison">
        <img src="0_a.png" style=" width: 100px;" alt="weather icon">
        <div>VilleVille</div>        
        <div class="Temp">
            <span style="color:blue;">-5</span>
            <span> / </span>
            <span style="color:red;">20</span>
        </div>        
    </div>
 
    <div class="maison02">
        <img src="0_a.png" style=" width: 100px;" alt="weather icon">
        <div>VilleVille</div>        
        <div class="Temp">
            <span style="color:blue;">25</span>
            <span> / </span>
            <span style="color:red;">20</span>
        </div>        
    </div>
</body>
</html>

le CSS

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
.maison {
    width: 200px;
    height: 200px;
    position: fixed; 
    text-align: center; 
    margin: 15px 0px 0 100px;
}
 
.Temp {
    width:100px;
    height:50px;
    position:absolute;
    font-size: 24pt;
    left:160px;
    top:80px;
}
.maison02 {position: fixed; text-align: center; margin: 350px 0px 0 350px;}

donc ça affiche l'icone du temps prévu, le nom de la ville et les températures, en bleu pour la mini en rouge pour le max avec un slash entre les deux
ce qui devrais donner ça
-5/20
mais à l'affichage les température le slash sont beaucoup écartées ça ressemble plus à ça
-5 / 20

j'ai donc besoin de votre aide, comment faire pour rapprocher les variables entre elles
j'espere que j'ai été assez clair

Merci d'avance
Gab

**ProgElecT** · 08/04/2021, 21h51

Salut

Ta ligne N°16 (code HTML) est:
 / ne devrait elle pas être plutôt
/

**gab.m** · 08/04/2021, 22h58

non, les espaces en début ou fin ne sont pas pris en compte, pour rajouter des espaces vide, il faut ce genre de code

Code :

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

&emsp; &thinsp;

mais merci de d’être intéressé a mon problème

**ProgElecT** · 08/04/2021, 23h18

Je pense que tu te trompes ou que l'on s'est mal compris, essais ces quelques lignes de code

Code html :

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

1
2
3
		-5<span> / </span>20 
		<br />
		-5<span>/</span>20

Chez moi cela donne
Nom : ReponseXX.JPG
Affichages : 84
Taille : 3,3 Ko

**gab.m** · 09/04/2021, 08h32

Salut,
eu non je t'ai bien compris
donc chez moi quelque soit le nombre d'espace l’écart reste le même

que je fasse ça

Code html :

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

1
2
3
<span style="color:blue;">-5</span>
            <span>/</span>
            <span style="color:red;">20</span>

ou ça

Code html :

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

1
2
3
<span style="color:blue;">-5</span>
            <span>                     /                           </span>
            <span style="color:red;">20</span>

le résultat reste le même

il te manquer les span des températures pour être pareil que moi

après chaque span est un block et je pense que c'est a ce niveau que j'ai du zapper quelque chose

Bonne journée

**ProgElecT** · 09/04/2021, 08h54

Ok

Je ne soupçonnai pas se phénomène

saut de ligne dans l'écriture du code
La solution peut être là
écrire sur une seule ligne

Code html :

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

<span style="color:blue;">-5</span><span>/</span><span style="color:red;">20</span>

ou commenter les sauts de ligne

Code html :

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

1
2
3
		<span style="color:blue;">-5</span><!--
		--><span>/</span><!--
		--><span style="color:red;">20</span>

**javatwister** · 09/04/2021, 09h05

Bonjour,

Problème évoqué ici

Code html :

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

1
2
3
4
5
6
7
8
<div class="maison02">
	<div>VilleVille</div>        
	<div class="Temp">
			   <span style="color:blue;">25</span><!--
			--><span>/</span><!--
			--><span style="color:red;">20</span>
	</div>        
</div>

**gab.m** · 11/04/2021, 11h42

il manquait juste un display: flex; dans le css

Code :

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

1
2
3
4
5
6
7
8
9
10
 
.Temp {
    width:100px;
    height:50px;
    display: flex;
    position:absolute;
    font-size: 24pt;
    left:160px;
    top:80px;
}

merci à tous pour votre participation
Bonne journée
Gab

**NoSmoking** · 14/04/2021, 11h11

Bonjour,

il manquait juste un display: flex; dans le css

Utilisation d'un marteau piqueur pour casser un œuf

Les « WhiteSpaces » sont une nécessité, même si ils jouent parfois des tours, mais dans ton cas pourquoi mettre le / dans un élément parfaitement inutile ?

Avec la structure HTML :

Code html :

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

1
2
3
<div class="Temp">
  <span>25</span>/<span>20</span>
</div>

associé au CSS suivant :

Code :

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

1
2
3
4
5
6
.Temp :first-child {
  color: blue;
}
.Temp :last-child {
  color: red;
}

le résultat est obtenu.

**gab.m** · 17/04/2021, 09h55

Envoyé par NoSmoking

Bonjour,

Utilisation d'un marteau piqueur pour casser un œuf

Salut, j'avais pas vue ta réponse

(pas mal l'image du marteau

)
comme je le dit au début de mon message "pour afficher des températures, je récupère des variable d'un json"

le vrai code c'est ça

Code html :

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

1
2
3
4
5
<div class="Temp02">
	<span style="color:blue;" id='mintemp1'></span>
	<span>/</span>
	<span style="color:red;" id='maxtemp1'></span>
</div>

c'est ce qui fait que j'utilise mon marteau piqueur

Bonne journée

**NoSmoking** · 17/04/2021, 10h05

comme je le dit au début de mon message "pour afficher des températures, je récupère des variable d'un json"

Tu aurais le même résultat avec

Code html :

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

1
2
3
<div class="Temp02">
    <span style="color:blue;" id='mintemp1'></span>/<span style="color:red;" id='maxtemp1'></span>
</div>

et même en injectant directement le html dans ton élément <div class="Temp02">.

Voir : jQuery.html()

Espace indésirable entre caractères

CSS

Discussions similaires

Partager

Partager