Réduire l'empreinte élément CSS

**sinzen** · 10/07/2017, 21h52

Bonjour,

Je travail sur un menu en CSS3
J'ai créer une maquette de menu avec des animations que je voudrait.
Je fait un carré avec les propriétés width et height
Tous ceux-ci dans un liste non ordonné
Alors j'ai une empreinte lorsque je survol l'élément dans le css,
normalement c'est un petit carre mais là c'est un rectangle qui prend trop de la place
et je voudrait supprimer l'espaces en trop
voici mon 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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Titre</title>
        <link href="style.css" rel="stylesheet" media="all" type="text/css"> 
    </head>
 
    <body>
    <nav>
    	<ul class="primary-menu">
    		<li><a>Men</a><div class="flyout__tab"></div>
    			<ul class="sub-menu">
		    		<li><a>T-shirt</a></li>
		    		<li><a>Sweat</a></li>
		    		<li><a>Bags</a></li>
    				<li><a>Shoes</a></li>    				
    			</ul>
 
    		</li>
    		<li><a>Women</a><div class="flyout__tab"></div></li> 
    		<li><a>Kids</a><div class="flyout__tab"></div></li> 
    		<li><a>Indoor</a><div class="flyout__tab"></div></li> 
    		<li><a>Car</a><div class="flyout__tab"></div></li> 
    		<li><a>House</a><div class="flyout__tab"></div></li> 
    		<li><a>Trucks</a><div class="flyout__tab"></div></li> 
    		<li><a>Computer</a><div class="flyout__tab"></div></li> 
    		<li><a>Tablet</a><div class="flyout__tab"></div></li> 
    		<li><a>Phone</a><div class="flyout__tab"></div></li> 
    	</ul>
 
    </nav>
    </body>
</html>

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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
 
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
 
ul.primary-menu{
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  flex-flow: row nowrap;
  padding : 0; /* pas de marge intérieure */
  margin : 0; /* ni extérieure */
  list-style : none; /* on supprime le style par défaut de la liste */
  line-height : 21px; /* on définit une hauteur pour chaque élément */
  text-align : center; /* on centre le texte qui se trouve dans la liste */
}
ul.sub-menu{
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  flex-flow: row nowrap;
  padding : 0; /* pas de marge intérieure */
  margin : 0; /* ni extérieure */
  list-style : none; /* on supprime le style par défaut de la liste */
  line-height : 21px; /* on définit une hauteur pour chaque élément */
  text-align : center; /* on centre le texte qui se trouve dans la liste */
}
 
ul.primary-menu li{
  background-color: black;
  color:white;
  width: 100%;
  height: 33px;
}
 
ul.sub-menu li{
  background-color: black;
  color:white;
  width: 100%;
  display: inline-table;
}
 
nav ul li:hover div.flyout__tab, div.flyout__tab:hover div.flyout__tab {
  background: #16242f;
  transition: transform 150ms 100ms;
  transform: rotate(45deg) scale(1);
}
 
nav ul.primary-menu li:hover ul.sub-menu{
 
  display: inline-table;
}
 
nav ul.primary-menu li a{
  display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
  padding : 0; /* aucune marge intérieure */
  background : #000; /* couleur de fond */        
  color : #fff; /* couleur du texte */
  text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
 
}
 
ul.sub-menu{
  display: none;
}
 
div.flyout__tab {
  transition: transform 150ms 200ms;
  transform: rotate(0deg) scale(1);
  width: 1.5rem;
  height: 1.5rem;
  background-color: #FFFFFF;
  border: 1px solid #e5e5e5;
  margin-left: 53px;
}

je vous ai joint un screen shot de mon souci:

Nom : Capture d’e?cran 2017-07-10 a? 20.39.45.png
Affichages : 190
Taille : 20,6 Ko

merci pour votre aide.

**JefReb** · 11/07/2017, 11h09

Bonjour peut être suffit-il de positionner au lieu d'utiliser le margin?

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
div.flyout__tab {
  transition: transform 150ms 200ms;
  transform: rotate(0deg) scale(1);
  width: 1.5rem;
  height: 1.5rem;
  background-color: #FFFFFF;
  border: 1px solid #e5e5e5;
  position:relative;	/* Mettre en relatif */
  left:53px;
  /*margin-left: 53px;*/
}

**sinzen** · 13/07/2017, 21h00

Merci pour ta réaction.

J'ai tester comme suite:

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
 
div.flyout__tab
{
  transition: transform 150ms 200ms;
  transform: rotate(0deg) scale(1);
  margin-top: 15px;
  position: relative;
  margin-bottom: 10%;
  z-index: 1;
  width: 1.5rem;
  height: 1.5rem;
  left:5em;
  content: "";
  background-color: black;
}

et je t'envoie le resultat du screen shot Nom : Capture d’e?cran 2017-07-13 a? 19.58.46.png
Affichages : 205
Taille : 22,0 Ko

**JefReb** · 14/07/2017, 09h48

C'est curieux, je ne vois pas du tout ton empreinte.
J'ai essayé dans chrome, firefox, ie et ça fait la même chose. Je n'ai pas ce que tu montres avec la capture d'écran.

https://codepen.io/JefReb/pen/LLapvB

**sinzen** · 14/07/2017, 10h25

Oui parle de ce que m'affiche la console sous chrome
l'onglet éléments quand tu sélectionne un élément dans l'html

Réduire l'empreinte élément CSS

CSS

Discussions similaires

Partager

Partager