Tiret qui apparait avec un display:inline;

Version imprimable

1 pièce(s) jointe(s)

Bonjour a tous,

Je suis a la recherche d'information sur l'utilisation d'un display; inline; qui insert un tiret à la fin de mon texte et je ne comprend pas pourquoi, ni comment le supprimer.

voici une image du rendu, j'ai entouré les tirets:

Pièce jointe 634481

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
nav ul {
    list-style-type:none;
 
}
 
nav li{
    display: inline;
    vertical-align: top;
    font-size: 120%;
    border-style:none;
 
}
.dropdown-item{
    background-color: white;
    text-align: left;
}

Code:

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<nav class="navbar  ">
      <div class="">
      </div>
 
 
    <ul style="list-style-type:none; display:inline-block;">
      <li class="btn_contact">
        <!-- <div id="logo"> -->
          <a id="logo1" href="index.html"><img src="https://www.developpez.net/forums/images/logo_trv.png"/></a>
 
 
        <!-- </div> -->
 
      </li>
      <li class="btn_contact">
        <a href="index.html">
        <button class=" " type="button">Accueil</button>
      </a>
    </li>
 
 
 
        <li class=" btn_contact">
          <a href="temperature.html">
          <button id="en-cours" class=" " type="button">Température <br>report</button>
        </a>
      </li>
 
 
 
        <li class=" btn_contact">
        <a href="humidite.html">
          <button class=" " type="button">Humidité <br>report</button>
        </a>
      </li>
 
 
 
 
 
        <li class="btn_contact">
          <a href="pression.html">
          <button class=" " type="button">Pression <br>report</button>
          </a>
        </li>
 
 
 
        <li class="dropdown">
          <button type="button" class="  dropdown-toggle" data-bs-toggle="dropdown">
            Matériel d'acquisition<br>de données
          </button>
          <ul class="dropdown-menu">
 
            <li><a class="dropdown-item" href="http://tvaira.free.fr/esp8266/nodemcu-lolin-esp8266.html" onclick="return ConfirmMessage();" target="_blank"><strong>Module NodeMCU  ESP8266</strong></a></li>
            <li><a class="dropdown-item" href="https://www.raspberryme.com/guide-du-capteur-bme280-avec-arduino-pression-temperature-humidite/" onclick="return ConfirmMessage();" target="_blank"><strong>BME280</strong></a></li>
            <li><a class="dropdown-item" href="https://tutoduino.fr/debuter/capteur-temperature/#le-capteur-dht11 onclick="return ConfirmMessage();" target="_blank""><strong>DHT11</strong></a></li>
            <li><a class="dropdown-item" href="https://wiki.seeedstudio.com/Grove-TempAndHumi_Sensor-SHT31/" onclick="return ConfirmMessage();" target="_blank"><strong>SHT31</strong></a></li>
          </ul>
        </li>
 
 
 
        <li class=" first btn_contact">
          <a href="http://1.1.1.1:8080/admin/">
          <button class=" " type="button">Admin</button>
        </a>
      </li>
 
 
    </nav>

Quelqu'un de vous aurait une idée?

Merci d'avance

19/02/2023, 16h18
ddaweb
Bonjour,

Cela ressemble fort à un lien standard souligné, essayez dans le CSS :
Code:

1 2 3 4 5 6 7 nav li{ display: inline; vertical-align: top; font-size: 120%; border-style:none; text-decoration: none; // ----- Ajouter }
Pourquoi mettre ce qui est en rouge ? :
Code:

1 2 3 4 5 <li class="btn_contact"> <a href="index.html"> <button class=" " type="button">Accueil</button> </a> </li>
NB :
- vous utilisez du CSS et ensuite du CSS dans votre code -> le mieux est de le faire directement depuis votre fichier CSS, mais alors mettre les bonnes balises afin de l'activer
- je vois des espaces dans vos class : pourquoi ?
- class="" est inutile
19/02/2023, 18h12
zoumzoum59

Merci ddaweb pour tes réponses a mon problème,

je viens d'essayer de mettre : "text-decoration:none", mais cela n'a rien changé, j'ai toujours le même problème.

Sinon, c'est exact "class=" " ne sert a rien il faut que je le supprime.

Si tu as une autre idée, pour info cela n'apparait que avec inline, si je mets inline-block, le code ne réagit pas pareil mais les tirets ne sont pas apparent.
19/02/2023, 18h31
NoSmoking
Bonjour,
il te faut mettre le sur les éléments <a> :
Code:

1 2 3 nav a { text-decoration: none; }
Concernant ta construction HTML du style :
Code:

1 2 3 <a href="..."> <button>...</button> </a>
outre le fait que ce n'est pas conforme, quel en est l’intérêt, c'est soit l'un soit l'autre.
19/02/2023, 18h53
zoumzoum59
Merci NoSmoking,

Ca fonctionne avec la modification:
Code:

1 2 3 nav a { text-decoration: none; }
Par contre je ne te suis pas sur <a> ou <button>, tu peux m'en dire plus, car dans mon esprit le <button> est la pour créer le bouton et le <a> et la pour lui adjoindre le lien.

PS: j'ai repris cette construction d'un code Bootstrap
19/02/2023, 19h10
NoSmoking

Citation:

Par contre je ne te suis pas sur <a> ou <button>, tu peux m'en dire plus, car dans mon esprit le <button> est la pour créer le bouton et le <a> et la pour lui adjoindre le lien.

Un bouton sert à déclencher une action le plus souvent liée à JavaScript, un lien sert à diriger vers un lien interne comme externe.
Dans les deux cas tu peux faire ressembler l'un à l'autre, et inversement, en utilisant le CSS.

Citation:

PS: j'ai repris cette construction d'un code Bootstrap

J’espère que tu as mal interprété :aie:
19/02/2023, 19h55
ddaweb

Citation:

Envoyé par NoSmoking

il te faut mettre le sur les éléments <a>

Juste, c'est moi qui ai fourché :roll:

Bonjour

J'ai dis que c'était bon pour le petit tiret, mais pas tout a fait, c'est bon mais pas quand je fait un survol, i réapparait.
J'ai donc essayé d’agir au niveau du survol, mais rien n'y fait:

Code:

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
nav button{
    margin-left: 10px;
    margin-right: 10px;
    background-color: white;
    border-style:none;
    font-weight:bold;
    font-size:larger ;
    /*white-space: nowrap;*/
}
 
nav button:focus, nav button:hover{
    background-color: none;
    color: $primaryColor;
    border-color: none;
    border-style:none;
 
}
.nav-link, .navbar-brand{
    color: black !important;
}
nav ul {
    list-style-type:none;
 
}
nav a {
    text-decoration: none;
  }
nav a:focus, nav a:hover {
    text-decoration: none;
  }

20/02/2023, 09h51
mathieu

avant de corriger le code css, il faut déjà revoir le code html.
d'après ce que vous nous montrez, vous n'avez pas besoin de balises "button" mais juste des liens avec "a" donc retirez les balises "button" et montrez nous le nouveau code html sur lequel vous travaillez.

2 pièce(s) jointe(s)

Voila j'ai modifier mon HTML, mais du coup j'ai des dysfonctionnement:

voici mon

Code:

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
<nav class="navbar  ">
      <div class="">
      </div>
    <ul style="list-style-type:none; display:inline-block;">
      <li class="btn_contact">
          <a id="logo1" href="index.html"><img src="https://www.developpez.net/forums/images/logo_trv.png"/></a>
      </li>
      <li class="btn_contact">
        <a href="index.html">
        Accueil
      </a>
    </li>  
        <li class=" btn_contact">
          <a href="temperature.html">
          Température report
        </a>
      </li>
        <li class=" btn_contact">
        <a href="humidite.html">
          Humidité report
        </a>
      </li>
        <li class="btn_contact">
          <a href="pression.html">
         Pression report
          </a>
        </li>
        <li class="dropdown">
          <button type="button" class="  dropdown-toggle" data-bs-toggle="dropdown">
            Matériel d'acquisition<br>de données
          </button>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="http://tvaira.free.fr/esp8266/nodemcu-lolin-esp8266.html" onclick="return ConfirmMessage();" target="_blank"><strong>Module NodeMCU ESP8266</strong></a></li>
            <li><a class="dropdown-item" href="https://www.raspberryme.com/guide-du-capteur-bme280-avec-arduino-pression-temperature-humidite/" onclick="return ConfirmMessage();" target="_blank"><strong>BME280</strong></a></li>
            <li><a class="dropdown-item" href="https://tutoduino.fr/debuter/capteur-temperature/#le-capteur-dht11" onclick="return ConfirmMessage();" target="_blank"><strong>DHT11</strong></a></li>
            <li><a class="dropdown-item" href="https://wiki.seeedstudio.com/Grove-TempAndHumi_Sensor-SHT31/" onclick="return ConfirmMessage();" target="_blank"><strong>SHT31</strong></a></li>
          </ul>
        </li>
        <li class=" first btn_contact">
          <a href="http://1.1.1.1:8082/admin/">
          Admin
        </a>
      </li>
    </nav>

et le CSS qui va avec:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
nav ul {
    list-style-type:none;
 
}
nav a {
    margin-left: 10px;
    margin-right: 10px;
    color: black;
    font-weight:bold;
    font-size:larger ;
    text-decoration: none;
 
  }
  nav a:focus, nav a:hover {
    color: $primaryColor;
    text-decoration: none;
  }
nav li{
    display: inline;
    text-align:center;
    vertical-align: top;
    font-size: 120%;
    border-style:none;
}

Par contre coté dysfonctionnement, je n'arrive plus a avoir mes textes de menu sur deux lignes, si je mets un <br> le texte passe carrément sur une autre ligne et plus juste en dessous:
Sans <br>:
Pièce jointe 634514
Avec <br>:
Pièce jointe 634516

1 pièce(s) jointe(s)

Je vais d'abord reprendre ceci :

Citation:

Envoyé par mathieu

avant de corriger le code css, il faut déjà revoir le code html.

Je ne comprend pas tous vos espaces dans les class, je l'ai déjà dit :weird:

Un petit code rapide qui fait ce que vous demandez (le CSS vous pouvez le mettre dans votre fichier CSS !), il y a peut-être une autre méthode :

Code:

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
<style>
body {
    font-family: verdana;
}
nav ul {
    list-style-type:none;
}
nav li{
    display: inline;
    text-align:center;
    border-style:none;
    margin-right: 10px;
}
nav a {
    color: black;
    font-weight:bold;
    font-size:larger;
    text-decoration: none;
 }
nav a:focus, a:hover {
    color: green;
}
nav button {
    padding: 10px;
    background-color: transparent;
    border: none;
    font-size: 1.2em;
}
</style>
<nav>
    <ul>
      <li><button><a href="index.html">Accueil<br />&nbsp;</a></button></li>  
      <li><button><a href="temperature.html">Température<br />report</a></button></li>
      <li><button><a href="humidite.html">Humidité<br />report</a></button></li>
      <li><button><a href="pression.html">Pression<br />report</a></button></li>
    </ul>
</nav>

Pièce jointe 634539

Pour la partie dropdown, je n'ai pas assez d'infos.

:nono:
pas de <button> dans les <a> mais pas de <a> dans les <button> non plus !

Code:

1
2
3
4
5
6
7
8
<nav>
  <ul class="no-button">
    <li><a href="index.html">Accueil<br>&nbsp;</a></li>  
    <li><a href="temperature.html">Température<br>report</a></li>
    <li><a href="humidite.html">Humidité<br>report</a></li>
    <li><a href="pression.html">Pression<br>report</a></li>
  </ul>
</nav>

avec

Code:

1
2
3
4
5
6
.no-button li {
  display: inline-block;
}
ul.no-button a {
  display: block;
}

et un exemple pour y arriver.

20/02/2023, 18h22
ddaweb

Citation:

Envoyé par NoSmoking

:nono:
pas de <button> dans les <a> mais pas de <a> dans les <button> non plus !

Merci pour cette mise au point, c'est le même résultat, on voit tout de suite la patte d'un expert contre un amateur comme moi :oops:
22/02/2023, 14h42
Pytet

Bonjour,

Si le problème initial n'a pas été résolu : lorsque deux éléments sont affichés en inline ou inline-block et sont séparés dans la source html par un espace ou un saut de ligne, le navigateur considère alors qu'il s'agit de deux éléments à séparer par un espace (comme deux mots dans une phrase).
Plus de détails et différentes solutions : https://www.alsacreations.com/astuce...esirables.html