flex-box : décalage entre lien et emplacement Space-between

**haddocks** · 17/03/2020, 17h10

Bonjour,

Nom : space between.PNG
Affichages : 519
Taille : 15,0 Ko

comme vous pouvez le voir il y a un décalage pas très agréable en bas du bouton entre la zone cliquable et l'espace qui le contient.
Comment faire pour que la zone cliquable s'adapte a l'espace généré par "justify-content: space-between;". Au minimum il fraudait que le lien se centre dans son espace.

Voici un lien vers HTML et CSS.
https://fromsmash.com/FjulWQB_La-ct

D'avance merci.

Invité · 17/03/2020, 22h12

Bonjour,

merci de copier-coller DANS le contenu du message les codes (nécessaires et suffisants).

**haddocks** · 18/03/2020, 13h52

Ok voilà ci-dessous:

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
<!DOCTYPE html>
<html>
    <head>
        <title> mon premier bandeau</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"><!--HTML 4.01-->
        <meta chartset="UTF-8"><!--HTML5-->
        <meta lang="fr">
        <link rel="stylesheet" type="text/css" href="topPage.css">
        <meta name="author" content="moi">
    </head>
    <body>
        <h1>Nom de la Blockchain</h1>
 
        <ul class="container">
            <li><a  href="#" target="_blank"> ADD device</a></li>
            <li><a href="#" target="_blank"> Device</a></li>
            <li><a href="#" target="_blank"> Edit</a></li>
            <li><a href="#" target="_blank"> Activities</a></li>
            <li><a href="#" target="_blank"> Research</a></li>
            <li><a href="#" target="_blank"> Users list</a></li>
        </ul>
 
    </body>
</html>

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
.container {
    margin:0px;
    padding:0px;
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: rgb(88, 197, 199);
    border: 15px solid rgb(39, 60, 73);
    border-radius: 8px;
}
h1 {
    text-align: center;
}
 
li {
    list-style-type: none;
    border-right: 2px solid rgb(39, 60, 73);
 
}
 
.container a {
    display:block;
    line-height: 20px;
    text-align: center;
    font-size: 1.3em;
    font-family: Arial, Helvetica, sans-serif;
    color:white;
    text-decoration: none;
    padding: 10px;
    background-color: rgb(88, 197, 199);
 
}
 .container a:hover {
    background-color: rgb(73, 164, 166);
    border-radius: 10px;
}
.container a:active {
    background-color: yellow;
}
@media all and (max-width:800px) {
   .container {
        justify-content:space-around;
    }
    li {
        list-style-type: none;
        border: none;
    }
}
@media all and (max-width:600px) {
    .container {
        flex-flow:column wrap;   
    }
    li {
        border-top: 1px solid white;
    }
}

Invité · 18/03/2020, 14h25

Bonjour,

la solution la plus simple est d'utiliser display:table :

Code css :

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

1
2
3
ul { display:table; width:100%; box-sizing:border-box; }
ul > li { display:table-cell; }
ul > li > a { display:block; }

N.B. En "MOBILE FIRST", on définit d'abord le CSS pour MOBILE.
Ensuite seulement, les medias queries pour les résolutions supérieures.

**haddocks** · 19/03/2020, 10h30

Bonjour,

Ca fonctionne en partie car j'ai tous les blocks bien centrés sauf pour le dernier qui reste avec un décalage a l’extrême gauche.
Mais surtout le coté responsive ne fonctionne plus.

**NoSmoking** · 19/03/2020, 10h34

Bonjour,
ton CSS n'est pas des plus propre mais devrait normalement fonctionner, est-ce que tu n'aurais pas un zoom sur ta page, fait un CTR + 0 pour revenir à 100%.

**haddocks** · 19/03/2020, 11h10

finalement j'ai enlevé les bordures et modifie la hauteur de ligne.
Mais j'aimerais bien comprendre comment rendre les "li" et "a" aussi flexible que le reste.

Nom : menu top propre.PNG
Affichages : 376
Taille : 6,8 Ko

Nom : menu top colonne.PNG
Affichages : 399
Taille : 14,9 Ko

j'ai mis des commentaires a côté des modifs.

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
 
.container {
    margin:0px;
    padding:0px;
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: rgb(88, 197, 199);
    border: 15px solid rgb(39, 60, 73);
    border-radius: 8px;
 
}
h1 {
    text-align: center;
}
 
li {
    list-style-type: none;
    /*border-right: 2px solid rgb(39, 60, 73);*/	
}
 
.container a {
    /*display:block;*/
    line-height: 49px; /* hauteur ajustée */
    text-align: center;
    font-size: 1.3em;
    font-family: Arial, Helvetica, sans-serif;
    color:white;
    text-decoration: none;
    padding: 10px;
    background-color: rgb(88, 197, 199);
 
}
 .container a:hover {
    background-color: rgb(73, 164, 166);
    border-radius: 10px;
}
.container a:active {
    background-color: yellow;
}
/*@media all and (max-width:800px) {
   .container {
        justify-content:space-around;
    }
    li {
        list-style-type: none;
        border: none;
    }
}*/
@media all and (max-width:650px) {
    .container {
        flex-flow:column wrap;
        text-align: center; /* ajouté*/
        min-width: 300px;
    }
    li {
        border-top: 1px solid white;
    }
}

Invité · 19/03/2020, 12h12

Bonjour,

Code css :

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

1
2
3
4
5
6
7
 
.container {
    justify-content: space-around;
}
li {
    flex:1 1 100%; /* on force la largeur */
}

**haddocks** · 20/03/2020, 11h15

Bonjour,

Aucune modification sur les li.

J'ai essayé ça, sans succès:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
.container {
        justify-content: space-around;
}
 
ul {
	display: flex;
        justify-content: center;
}
 
li {
        flex: 1 1 100%;
}

**NoSmoking** · 20/03/2020, 14h54

La seule différence que je vois entre ton image#1 post#7 et ton image#2 post#7, est le passage en :

Code :

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

1
2
3
ul {
  flex-direction: column;
}

Invité · 22/03/2020, 08h53

Bonjour,

Menu horizontal responsive - flex - CSS : https://codepen.io/jreaux62/pen/WBMGYP

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
<nav id="navMain">
  <ul>
    <li> 
        <a href="#">A - One for the Money</a>
    </li>
    <li>
        <a href="#">B - Two for the Show</a>
    </li>
    <li>
       <a href="#">C - Three to Get Ready (ce menu est beaucoup plus long que les autres...)</a>
    </li>
    <li>
        <a href="#">D - Four Let's Go go go !</a>
    </li>
  </ul>
</nav>

Code css :

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
* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing:border-box; /*important*/
}
/* ------------------------------- */
/* MENU */
#navMain {
  position: relative;
  width: 100%;
  margin: 0 auto;
}
#navMain ul,
#navMain li,
#navMain a {
  position: relative;
  list-style:none;
  text-decoration: none;
}
#navMain ul li a {
  display: block;
  height:100%; /*important*/
  color: #fff;
  padding: 10px 15px;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
/* --------------- */
/* MENU : niveau 1 */
#navMain > ul > li > a {
  text-align:center;
  background: #2980b9;
  box-shadow: 1px 1px 0 #409ad5 inset, 1px -1px 0 #20638f inset;
}
/* --------------- */
/* hover */
#navMain li:hover > a {
  background: #20638f;
  box-shadow: 0 1px 0 #409ad5 inset, 0 -1px 0 #20638f inset;
}
/* ---------------- */
/* TABLET - DESKTOP */
@media screen and (min-width:768px) {
  /* MENU HORIZONTAL - FLEX */
  #navMain > ul {
    display: flex;
    flex-wrap:nowrap;
  }
  #navMain > ul > li {
    flex: 1 1 25%; /* OU flex: 1 1 auto */
  }
  /* Centrage vertical du texte */
  #navMain > ul > li > a {
    display: flex;
    align-items:center;
  }
}

flex-box : décalage entre lien et emplacement Space-between

CSS

Discussions similaires

Partager

Partager