Discussion :

[l_achraf]

Bonsoir,

le code suivant produit une liste HTMl dans un sidenav qui fonctionne bien mais j'aimerais bien minimiser l'espace entre les éléments de la liste. J'ai mis line-height: 4px mais j'ai encore de l'espace. Qu'est ce quoi je dois changer dans les CSS svp?

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
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
72
73
74
75
76
77
.sidenav {
  background: #004050;
  width: 250px;
  top: unset;
  height: calc(100% - 112px) !important;
  overflow: auto pointer:
}
 
.sidenav-overlay {
  z-index: 1;
}
 
#accordian h3 {
  background: #003040;
  background: linear-gradient(#003040, #002535);
}
 
#accordian h3 a {
  padding: 10px 50px;
  font-size: 17px;
  line-height: 1px;
  display: table;
  vertical-align: middle;
  color: white;
  cursor: pointer;
}
 
#accordian h3:hover {
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);
}
 
 
 
.material-icons {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  font-size: 28px !important;
}
 
#accordian ul ul li a {
  color: white;
  text-decoration: none;
  font-size: 13px;
  line-height: 1px;
  display: block;
  transition: all 0.15s;
  position: relative;
  cursor: pointer;
}
 
#accordian ul ul li a:hover {
  background: #003545;
  border-left: 5px solid lightgreen;
}
 
#accordian ul ul {
  margin-left: 35px;
  display: none;
}
 
#accordian li.active > ul {
  display: block;
}
 
#accordian ul ul ul {
  border-left: 2px dotted rgba(0, 0, 0, 0.5);
}
 
i {
  margin-right: 10px;
}
 
.changed {
  margin-left: 5px;
}

Code 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
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
72
73
<div class="sidenav sidenav-fixed" id="nav-mobile">
  <div id="accordian">
    <ul>
      <li>
        <h3><a onclick="load('home', '')"><i class="material-icons">home</i><span style="">Home</span></a></h3>
      </li>
      <li>
        <h3><a onclick="load('intro', '')"><i class="material-icons">apps</i>Content Table</a></h3>
      </li>
      <li>
        <h3><a onclick="load('copyright', '')"><i class="material-icons">copyright</i>Copyright</a></h3>
      </li>
      <li>
        <h3><a onclick="load('file')"><i class="material-icons">assignment</i>Unit A<i class="fa fa-angle-down changed"></i></a></h3>
 
        <ul>
          <li>
            <h3><a onclick="load('file')">Module 1<i class="fa fa-angle-down changed"></i></a></h3>
            <ul>
              <li>
                <h3><a onclick="load('file')">page 1</a></h3>
              </li>
              <li>
                <h3><a onclick="load('file')">page 2</a></h3>
              </li>
            </ul>
          </li>
          <li>
            <h3><a onclick="load('file')">Module 2<i class="fa fa-angle-down changed"></i></a></h3>
            <ul>
              <li>
                <h3><a onclick="load('file')">page 1</a></h3>
              </li>
              <li>
                <h3><a onclick="load('file')">page 2</a></h3>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li>
        <h3><a onclick="load('file')"><i class="material-icons">assignment</i>Unit B<i class="fa fa-angle-down changed"></i></a></h3>
        <ul>
          <li>
            <h3><a onclick="load('file')">Module 3<i class="fa fa-angle-down changed"></i></a></h3>
            <ul>
              <li>
                <h3><a onclick="load('file)">page 1</a></h3>
              </li>
              <li>
                <h3><a onclick="load('file')">page 2</a></h3>
              </li>
            </ul>
          </li>
          <li>
            <h3><a onclick="load('file')">Module 4<i class="fa fa-angle-down changed"></i></a></h3>
            <ul>
              <li>
                <h3><a onclick="load('file')">page 1</a></h3>
              </li>
              <li>
                <h3><a onclick="load('file')">page 2</a></h3>
              </li>
            </ul>
          </li>
        </ul>
      </li>
 
    </ul>
  </div>
 
 
</div>

Merci beaucoup pour votre aide.

[Invité]

Bonjour,

Code css :

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

1
2
3
#accordian h3 a {
  padding: 10px 50px;
...

[l_achraf]

Le problème a été régle en corrigeant les margins. Merci à tous.

[NoSmoking]

Bonjour,

<h3><a onclick="load('home', '')"><i class="material-icons">home</i><span style="">Home</span></a></h3>

Utiliser des éléments <h3> juste pour formater des liens c'est quand même pas des plus sémantique