box-shadow tronquée à droite d'un LI

**Casio** · 07/03/2017, 15h49

Salutations,

Je suis ne train de faire un micro-site de tests, dans lequel des LI sont présentés symétriquement.

box-shadow fonctionne à merveille sur l'ensemble des autres DIV, mais la, sur le UL/LI, ca fait des trucs bizarres, voir cela coupe l'ombre sur la droite, certainement du au margin auto du positionnement central du container.

Voici par ex. un bout du dit code :

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
(...)
	<div class="contact">
		<div class="gauche">
			<ul>
				<li class="fb"><a href="#" title="Facebook" target="_blank">Facebook<span class="sprite socials fb"></span></a></li>
				<li class="twitter"><a href="#" title="Twitter" target="_blank">Twitter<span class="sprite socials twitter"></span></a></li>
				<li class="gplus"><a href="#" title="Google+" target="_blank">Google+<span class="sprite socials gplus"></span></a></li>
			</ul>
		</div>
		<div class="droite">
			<ul>
				<li class="flickr"><a href="#" title="Flickr" target="_blank">Flickr<span class="sprite socials flickr"></span></a></li>
				<li class="instagram"><a href="#" title="Instagram" target="_blank">Instagram<span class="sprite socials instagram"></span></a></li>
			</ul>
		</div>
	</div>
(...)

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
(...)
/* Liens sociaux */
.contact {
	width: 300px; /* Largeur ensemble des cellules contact */
	overflow: hidden; /* Hauteur adaptee de l'ensemble des cellules */
}
.contact ul{
	font-size: 13px;
	/* margin: 0px; */
	margin: 0px;
	padding: 0px;
	list-style: none; /* Supprimer les puces de cellules */
}
.contact li{
	width: 134px; /* Largeur des cellules de base */
	height: 43px; /* Hauteur des cellules de base */
	display: inline-block;
	line-height: 43px;
	text-align: center;
	background-color: #FFF;
}
.contact a{
	display: block;
}
 
/* Liens gauche */
.contact .gauche {
	float: left;
	width: 149px;
	box-shadow: 3px 7px 10px rgba(255, 0, 0, 0.6);
}
.contact .gauche ul{
	text-align: right;
	border-right: 1px solid #ebebeb;
}
.contact .gauche li{
	border-bottom: 1px solid #ebebeb;
	border-radius: 5px 0px 0px 5px;
}
.contact .gauche .sprite {
	float: right; /* Position des icones de liens sociaux */
	margin: 9px 9px 9px 0px;
}
 
/* Liens droite */
.contact .droite {
	float: right;
	width: 149px;
	-moz-box-shadow: 3px 7px 10px rgba(255, 0, 0, 0.6);
	-webkit-box-shadow: 3px 7px 10px rgba(255, 0, 0, 0.6);
	box-shadow: 3px 7px 10px rgba(255, 0, 0, 0.6);
}
.contact .droite ul{
	text-align: left;
	border-left: 1px solid #ebebeb;
}
.contact .droite li{
	border-bottom: 1px solid #ebebeb;
	border-radius: 0px 5px 5px 0px;
}
.contact .droite .sprite {
	float: left; /* Position des icones de liens sociaux */
	margin: 9px 0px 9px 9px;
}
(...)

J'ai beau essayé depuis tout 2 bonnes heures; Rien n'y fait !
Peut-être un pb de position ? Mais je suis nul la dessus...

Any idea ?

Invité · 08/03/2017, 13h04

Bonjour,

enlève le overflow: hidden;.

Cela dit, les box-shadow sont passés de mode...
A utiliser avec parcimonie.

**Casio** · 08/03/2017, 13h05

Si je retire cela, l'UL ne s'adapte plus aux LI en hauteur...

Invité · 08/03/2017, 13h14

Alors donne-nous un bout de code exploitable (= qu'on peut TESTER)

Car tu fais certainement une mauvasie utilisation de ce overflow: hidden; (qui doit masquer un autre problème)

**Casio** · 08/03/2017, 13h30

Alors, la, je ne peux pas faire plus

:

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
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html>
 
<head>
 
	<meta charset="UTF-8">
	<meta http-equiv="content-language" content="fr-FR" />
	<meta name="author" content="Casio" />
	<meta name="publisher" content="Casio" />
	<meta name="copyright" content="Casio &copy;2017" />
	<meta name="description" content="Carte de visite virtuelle de Casio." />
	<meta name="distribution" content="global" />
	<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,user-scalable=no" /> 
 
	<title>Mathieu CHARREYRE</title>
 
	<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
 
</head>
 
<body>
 
<div class="profil-bar">
	<div class="name">
		<h3>Casio</h3>
		<p>Digital Self-made Man - Online since 1993 !</p>
	</div>
	<div class="web">
		<div class="gauche">
			<a href="#" title="Casio" target="_blank"><img src="http://mathieu.charreyre.net/tests/pict/Sceau-100.jpg" /></a>
			<h1>Photographe Artistique</h1>
			<p>PhotoMat</p>
		</div>
		<div class="droite">
			<a href="#" title="WDA" target="_blank"><img src="http://mathieu.charreyre.net/tests/pict/WDA-128.png" /></a>
			<h1>Pr&eacute;sident-fondateur</h1>
			<p>WDA</p>
		</div>
	</div>
	<div class="contact">
		<div class="gauche">
			<ul>
				<li class="mail"><a href="#" title="eMail" target="_blank">eMail<span class="sprite socials mail"></span></a></li>
				<li class="fb"><a href="#" title="Facebook" target="_blank">Facebook<span class="sprite socials fb"></span></a></li>
				<li class="twitter"><a href="#" title="Twitter" target="_blank">Twitter<span class="sprite socials twitter"></span></a></li>
				<li class="gplus"><a href="#" title="Google+" target="_blank">Google+<span class="sprite socials gplus"></span></a></li>
				<li class="linkedin"><a href="#" title="LinkedIn" target="_blank">LinkedIn<span class="sprite socials linkedin"></span></a></li>
			</ul>
		</div>
		<div class="droite">
			<ul>
				<li class="mob"><a href="#" title="Telephone" target="_blank">T&eacute;l&eacute;phone<span class="sprite socials mob"></span></a></li>
				<li class="skype"><a href="#" title="Skype" target="_blank">Skype<span class="sprite socials skype"></span></a></li>
				<li class="icq"><a href="#" title="ICQ" target="_blank">ICQ<span class="sprite socials icq"></span></a></li>
				<li class="flickr"><a href="#" title="Flickr" target="_blank">Flickr<span class="sprite socials flickr"></span></a></li>
				<li class="instagram"><a href="#" title="Instagram" target="_blank">Instagram<span class="sprite socials instagram"></span></a></li>
			</ul>
		</div>
	</div>
	<div class="footer">
		<p>Casio &copy;2017</p>
	</div>
</div>
 
</body>
 
</html>

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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
/* Body */
body{
	/* background:#2d3b36 url(http://mathieu.charreyre.net/tests/pict/Saturnisme-1024.jpg)no-repeat center center fixed; */
	background-color: #4E9A4D;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
 
a{
	color: #a5a3a3;
	text-decoration: none;
}
p{
	text-align: center;
	margin: 0;
	color: #a7a7a7;
}
 
/* Bar de profil */
.profil-bar {
	width: 300px;
	margin: 0px auto auto auto; /* Centraliser le bloc sur la page */
}
 
/* Header */
.name {
	border-radius: 5px 5px 0px 0px;
	padding: 15px 0px 15px 0px;
	background-color: #FFF;
	border-bottom: 1px solid #ebebeb;
	box-shadow: 3px 7px 10px rgba(255, 0, 0, 0.6);
}
.name h3{
	font-size: 16px;
	color: #616161;
	margin: 0px;
	text-align: center;
}
 
.name p{
	text-align: center;
	color: #c1c1c1;
	font-size: 11px;
}
 
/* Liens web */
.web {
	width: 300px;
	height: 100px;
	background-color: #FFF;
	font-size: 11px;
	border-bottom: 1px solid #ebebeb;
	border-radius: 0px 0px 5px 5px;
	box-shadow: 3px 7px 10px rgba(255, 0, 0, 0.6);
}
.web h1{
	text-align: center;
	font-weight: bold;
	font-size: 11px;
	color: #a7a7a7;
	margin: 0px;
}
.web p{
	font-weight: bold;
	font-size: 12px;
	color: #fa8b49;
}
.web img{
	height: 50px;
	width: 50px;
	border-radius: 5px;
	margin: 5px 49px 10px 49px;
}
.web .gauche {
	float: left;
	width: 149px;
	height: 100px;
	border-right: 1px solid #ebebeb;
}
.web .droite {
	float: right;
	width: 149px;
	height: 100px;
	border-left: 1px solid #ebebeb;
}
 
/* Liens sociaux */
.contact {
	width: 300px; /* Largeur ensemble des cellules contact */
	overflow: hidden; /* Hauteur adaptee de l'ensemble des cellules */
}
.contact ul{
	font-size: 13px;
	margin: 0px;
	padding: 0px;
	list-style: none; /* Supprimer les puces de cellules */
}
.contact li{
	width: 134px; /* Largeur des cellules de base */
	height: 43px; /* Hauteur des cellules de base */
	border-bottom: 1px solid #ebebeb;
	line-height: 43px;
	text-align: center;
	background-color: #FFF;
}
.contact a{
	display: block;
}
 
/* Liens gauche */
.contact .gauche {
	float: left;
	width: 149px;
 
}
.contact .gauche ul{
	text-align: right;
	border-right: 1px solid #ebebeb;
}
.contact .gauche li{
	border-radius: 5px 0px 0px 5px;
	-moz-box-shadow: 3px 7px 10px rgba(255, 0, 0, 0.6);
	-webkit-box-shadow: 3px 7px 10px rgba(255, 0, 0, 0.6);
	box-shadow: 3px 7px 10px rgba(255, 0, 0, 0.6);
}
.contact .gauche .sprite {
	float: right; /* Position des icones de liens sociaux */
	margin: 9px 9px 9px 0px;
}
 
/* Liens droite */
.contact .droite {
	float: right;
	width: 149px;
}
.contact .droite ul{
	text-align: left;
	border-left: 1px solid #ebebeb;
}
.contact .droite li{
	border-radius: 0px 5px 5px 0px;
	-moz-box-shadow: 3px 7px 10px rgba(255, 0, 0, 0.6);
	-webkit-box-shadow: 3px 7px 10px rgba(255, 0, 0, 0.6);
	box-shadow: 3px 7px 10px rgba(255, 0, 0, 0.6);
}
.contact .droite .sprite {
	float: left; /* Position des icones de liens sociaux */
	margin: 9px 0px 9px 9px;
}
 
/* Definition du sprite original pour les liens sociaux */
.sprite { background : url("http://mathieu.charreyre.net/tests/pict/Social.png") no-repeat; }
/* Decoupe des liens sociaux */
.socials { height : 25px; }
.fb { width : 25px; background-position : 0px 0px; }
.twitter { width : 25px; background-position : -25px 0px; }
.gplus { width : 25px; background-position : -50px 0px; }
.instagram { width : 25px; background-position : -75px 0px; }
.flickr { width : 25px; background-position : -100px 0px; }
.whatsapp { width : 25px; background-position : -150px 0px; }
.skype { width : 25px; background-position : -175px 0px; }
.linkedin { width : 25px; background-position : 0px -25px; }
.mail { width : 25px; background-position : -75px -25px; }
.mob { width : 25px; background-position : -100px -25px; }
.icq { width : 25px; background-position : -125px -25px; }
 
/* Colorisation des liens sociaux */
/* Cellules gauches */
li.mail {border-left:15px solid #37ad95 !important;}
li.mail a:hover {background-color: #37ad95 !important; color: #FFFFFF;}
li.fb {border-left:15px solid #5776b9 !important;}
li.fb a:hover {background-color: #5776b9 !important; color: #FFFFFF;}
li.twitter {border-left:15px solid #3db5ea !important;}
li.twitter a:hover {background-color: #3db5ea !important; color: #FFFFFF;}
li.gplus {border-left:15px solid #e2272d !important;}
li.gplus a:hover {background-color: #e2272d !important; color: #FFFFFF;}
li.linkedin {border-left:15px solid #218cc8 !important;}
li.linkedin a:hover {background-color: #218cc8 !important; color: #FFFFFF;}
/* Cellules droites */
li.mob {border-right:15px solid #9a4a96 !important;}
li.mob a:hover {background-color: #9a4a96 !important; color: #FFFFFF;}
li.skype {border-right:15px solid #4ec3ee !important;}
li.skype a:hover {background-color: #4ec3ee !important; color: #FFFFFF;}
li.whatsapp {border-right:15px solid #23a876 !important;}
li.whatsapp a:hover {background-color: #23a876 !important; color: #FFFFFF;}
li.icq {border-right:15px solid #77bc45 !important;}
li.icq a:hover {background-color: #77bc45 !important; color: #FFFFFF;}
li.flickr {border-right:15px solid #e5e5e4 !important;}
li.flickr a:hover {background-color: #e5e5e4 !important; color: #FFFFFF;}
li.instagram {border-right:15px solid #000000 !important;}
li.instagram a:hover {background-color: #000000 !important; color: #FFFFFF;}
 
/* Footer */
.footer {
	border-radius: 5px;
	width: 300px;
	background-color: #FFF;
	padding: 10px 0px 10px 0px;
	box-shadow: 3px 7px 10px rgba(255, 0, 0, 0.6);
}
.footer p{
	width: inherit;
	text-align: center;
	font-size: 11px;
	color: #c1c1c1;
}

Invité · 08/03/2017, 14h30

Bon

La meilleure solution ?
Supprimer les box-shadow !
Ils n'apportent rien. Au contraire, ça gâche le design épuré. (c'est mon avis)

Deplus, si on enlève overflow: hidden; sur .contact, on voit des ombres qui se chevauchent et se cumulent.
Pas joli.

**Casio** · 08/03/2017, 19h48

Attention, hein, les couleurs flashy, c'était pour les tests, hein.... Vert... Rouge... etc...

Histoire de les voir justement.

Bah je trouvais que faisait ressortir un peu le cartouche général de le mettre en relief.
Puis c'était pour essayer d'apprendre... Mais bon, ok, je vais virer le shadow...

**NoSmoking** · 11/03/2017, 14h57

Bonjour,
sans rentrer dans la « Paul & Mick », il faut que tu raisonnes en couches.

En effet, je n'ai pas bien compris ton approche du problème attendu que tu veux mettre du « relief » au conteneur alors que tu mets tous tes box-shadow sur les contenus.

Code html :

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

1
2
3
4
5
6
<div class="profil-bar">  <!-- mettre le box-shadow: 3px 7px 10px rgba(255, 0, 0, 0.6); ICI -->
    <div class="name">.../div>
    <div class="web">...</div>
    <div class="contact">...</div>
    <div class="footer">...</div>
<div>

**Casio** · 13/03/2017, 08h54

En fait, j'avais bien sur initialement mis le shadow sur le conteneur, mais du fait des radius sur les cellules, l'ombre n'était pas réaliste, d'ou mon idée de la calquer sur les cellules, et non le conteneur.

En attendant, j'ai tranché sur les conseils de jreaux62, et j'ai viré les shadows.

La landing page est en ligne maintenant :
-=> http://mathieu.charreyre.net

Merci de votre aide.

Je passe le sujet en résolu.

box-shadow tronquée à droite d'un LI

CSS

Discussions similaires

Partager

Partager