Discussion :

[MoiStéphane]

Bonjour

J ai une navbar centrée dans une div Width=100% (qui devrait être bleue mais s affiche transparente) avec un dropdown .
Quand je souhaite afficher le contenu du drop down en l alignant sur la droite du bouton il s aligne sur la droite de la nav bar.
Une petite image valant mieux qu une explication boiteuse, voici mon problème


voici mon code :

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
<div id="my-nav">
      <div class="my-nav">
        <div class="navbar">
          <a href="#news">link</a>
          <div class="dropdown">
            <button class="dropbtn">Dropdown left
            </button>
            <div class="dropdown-content">
              <a href="#">Link 1</a>
              <a href="#">Link 2</a>
              <a href="#">Link 3</a>
            </div>
          </div>
 
          <div class="dropdown"> 
            <button class="dropbtn">Dropdown right
            </button>
            <div class="dropdown-content" style="right:0">
              <a href="#">Link 1</a>
              <a href="#">Link 2</a>
              <a href="#">Link 3</a>
            </div>
          </div>
 
        </div>
      </div>
    </div>

et mon 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
#my-nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 10;
        background-color: blue;
}
 
.my-nav {
        max-width: 500px;
        margin: auto;
        background-color: pink;
        position:relative;
}
 
.navbar {
        overflow: hidden;
        background-color: #333;
}
 
.navbar a {
        float: left;
        font-size: 16px;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
}
 
.dropdown {
        float: left;
        overflow: hidden;
        display: block;
 
}
 
.dropdown .dropbtn {
        font-size: 16px;
        border: none;
        outline: none;
        color: white;
        padding: 14px 16px;
        background-color: inherit;
        font-family: inherit;
        margin: 0;
}
 
.navbar a:hover, .dropdown:hover .dropbtn {
        background-color: red;
}
 
.dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 1;
}
 
.dropdown-content a {
        float: none;
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
}
 
.dropdown-content a:hover {
        background-color: #ddd;
}
 
.dropdown:hover .dropdown-content {
        display: block;
}

merci pour votre aide.

[NoSmoking]

Bonjour,
trop de float:left et overflow:hidden qui tôt au tard nuisent à la mise en page.

Quand je souhaite afficher le contenu du drop down en l alignant sur la droite du bouton il s aligne sur la droite de la nav bar.

Pour faire court, les éléments positionnés en absolu le sont par rapport au plus proche parent positionné, donc dans ton cas cela remonte jusqu'à la <div class="my-nav"> .

Je te propose ces modifications :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
.navbar {
  /* overflow: hidden;      /* out */
  background-color: #333;
  display: inline-flex;     /* changement mode de rendu */
}
.dropdown {
  /* float: left;           /* out */
  /* overflow: hidden;      /* out */
  /* display: block;        /* inutile */
  position: relative;       /* pour servir de référent */
}

regarde déjà avec cela.

[MoiStéphane]

Merci, c est parfait ! Le dropdown s aligne bien sur le bord droit du bouton toutefois le bouton n est plus aligné à droite de la barre...
j y suis parvenu en faisant cela

Code :

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

1
2
3
4
5
6
.navbar {
  background-color: #333;
  display: inline-flex;
  width: 100%;
  white-space: nowrap;
}

et en intercalant une div qui prend la place restante avant le bouton

Code html :

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

<div style="width:100%"></div>

Ok ça fait peut être un peu bricolage mais c est le résultat attendu.

[NoSmoking]

Sans ajouter d'élément tu aurais pu également faire

Code :

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

1
2
3
4
5
6
7
8
.navbar {
  background-color: #333;
  display: flex;            /* changement mode de rendu */
  white-space: nowrap;
}
.dropdown:last-child {      /* on cible le dernier élément */
  margin-left: auto;        /* le pousse vers la droite */
}

cela me semble plus propre !