Discussion :

[Hadock]

Bonjour, j'ai trouvé une solution pour aligner verticalement mon texte avec mes icônes; seulement il faut les mettre en float right donc comme vous pouvez vous en douter ça crée un petit soucie! Vous avez une idée pour gérer ce problème ça fait un moment que je cherche et je pense que j'ai loupé "le petit détail avec le diable dedans". Merci d'avance!

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<div class="sideNavContent">
            <ul class="ulMenu">
                <li><i class="material-icons">home</i><span class="textMenu">Home</span></li>
                <li><i class="material-icons">code</i><span class="textMenu">Code</span></li>
                <li><i class="material-icons">receipt</i><span class="textMenu">Blog</span></li>
                <li><i class="material-icons">explore</i><span class="textMenu">Forum</span></li>
                <li><i class="material-icons">create</i><span class="textMenu">Portfolio</span></li>
                <li><i class="material-icons">description</i><span class="textMenu">A propos</span></li>
                <li><p><i class="material-icons">email</i><span class="textMenu">Contact</span></p></li>
            </ul>
        </div>

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
/* CLEARANCE AREA MATERIAL ICON */
.material-icons {
    padding: 12px;
}
/* MENU CONTENT STYLE */
.ulMenu {
    list-style: none;
}
.ulMenu li {
    border-top: 1px solid grey;
    background-color: #ececed;
}
.ulMenu li:hover {
    cursor: pointer;
    background-color: #dfdfe0;
}
.ulMenu:last-child {
    border-bottom: 1px solid grey;
}
.sideNavMenu {
    padding: 20px 0 0 0;
    text-align: center;
}
.textMenu {
    display: block;
    padding: 15px;
    float: right;
    left: -135px;
    position: relative;
}

[NoSmoking]

Bonjour,

seulement il faut les mettre en float right donc comme vous pouvez vous en douter ça crée un petit soucie!

que tu aurais pu nous expliquer.

Quoiqu'il en soit pourquoi ne pas faire simple

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
/* CLEARANCE AREA MATERIAL ICON */
.material-icons {
    padding: 12px;
    vertical-align: middle;
}
/* MENU CONTENT STYLE */
.ulMenu {
    list-style: none;
    padding: 0;
}
.ulMenu li {
    border-top: 1px solid grey;
    background-color: #ececed;
    display: block;
    line-height: 3em;
}
.ulMenu li:hover {
    cursor: pointer;
    background-color: #dfdfe0;
}
.ulMenu:last-child {
    border-bottom: 1px solid grey;
}
.sideNavMenu {
    padding: 20px 0 0 0;
    text-align: center;
}
.textMenu {
/*    display: block;/**/
/*    padding: 15px;/**/
/*    float: right;/**/
/*    left: -135px;/**/
/*    position: relative;/**/
}

Au passage, que vient faire un <p> dans cette ligne ?

Code html :

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

<li><p><i class="material-icons">email</i><span class="textMenu">Contact</span></p></li>

[Hadock]

Bonjour NoSmoking, effectivement j'aurais pu, my bad :

En fait j'ai mis les spans en display block pour que le padding fonctionne. Du coup ils ont "sauté" en dessous de l'icône alors j'ai fait un float pour les remettre sur la même ligne.
À partir d'ici tous est correctement aligné sur l'axe vertical.
Seulement l'icône est à gauche et le texte tout à fait à droite; alors j'ai fait une position relative dessus pour pouvoir utiliser le left est ajustée la position des spans.
Cette technique m'oblige à modifier le left pour chaque élément ce qui n'est pas très pratique. Voilà j'espère avoir été plus claire

Pour le <p> c'est juste un oublie de ma part (dans mon code il est partie ).

Pour ce qui est de ton code il reste juste un petit défaut à corriger (visuel) : le texte ne parait pas aligner au "milieu" de l'icone. (c'est peux être mes yeux qui bug).


Je continue de chercher avec comme basse ton code! Merci infiniment!

(si il y a besoin je peux mettre tout le code du menu en ligne)

[NoSmoking]

... le texte ne parait pas aligner au "milieu" de l'icone.

Il y a longtemps que cela ne me choque plus, il y a tellement pire

Néanmoins, la solution est dans le CSS que je t'ai fourni, il suffit de rajouter

Code :

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

1
2
3
.textMenu {
  vertical-align: middle;
}

[Hadock]

Il y a longtemps que cela ne me choque plus, il y a tellement pire

Perso ça me saute aux yeux directs et j'ai du mal à croire que l'on puisse ce dire "ok c'est bon ça passe"

en tout cas ma règle me confirme que c'est bon (oui parce que là mes yeux ils sont en vacances j'ai tellement regardé ces icônes ).

Encore merci mille fois! (et du coup je repars avec un truc que je n'ai jamais utilisé : vertical-align )