28172 sujets

CSS et mise en forme, CSS3

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

Salutations,

Je suis en 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 :

(...)
	<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>
(...)


(...)
/* 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... Smiley decu

Any idea ?
Modifié par Casio (08 Mar 2017 - 11:37)
Administrateur
Bonjour,

En effet, le overflow: hidden est problématique. Il sert à contenir les flottants .gauche et .droite, je présume : https://www.alsacreations.com/astuce/lire/1543-LecontextedeformatageblockenCSS.html

Il faudrait peut-être envisager une autre solution si tu souhaites conserver tes flottants, à savoir (de tête et sans tester) : 

.contact::after {
  content: "";
  display: block;
  clear: both;
}


(penser à supprimer overflow: hidden; de .contact)

Bonne chance Smiley smile
Modifié par Raphael (08 Mar 2017 - 14:19)
Sujet clos
Aller à