28172 sujets

CSS et mise en forme, CSS3

Scroll horizontal avec box-shadow/width:100%

Bonjour,

Quand j'utilise box-shadow, sur un width:100%/auto, j'ai automatiquement un scroll horizontal, comment faire pour éviter sa ?

exemple :
.exemple {
	width:auto;
	height:180px;
	box-shadow:0px -3px 6px #333333;
}
En principe je ne précise pas la largeur, mais le problème c'est que FF me rajoute un scroll horizontal sur toute la page, Safari, IE, Opèra, pas de souci.

#footer {
	height:280px;
	margin-top:40px;
	-moz-box-shadow:0px -3px 6px #333333;
	-webkit-box-shadow:0px -3px 6px #333333;
	background:#8d56a9;
}




Alors j'ai essayer avec auto/100%, overflow-x: hidden, sans résultat bien-sur Smiley ohwell
Modifié par 3arly3F (28 Jul 2010 - 13:33)
bonjour,

l'effet de degradé de box-shadow s'affiche a l'exterieur de ta boite et ce qui en augmente sa largeur.

Si tu as reinitialiser les marges de html et body a zero cela augmente encore ce defaut visuel .

Soluces simples :
1)pour des effets d'ombres de petites tailles : ne pas remettre a zero les marges de body et html
ou
2) mettre des marges latérales afin d'incorporer les ombrages dans le calcul de la largeur de la boite .
.exemple { 
    width:auto; 
margin: 6px;
    height:180px; 
    box-shadow:0px -3px 6px #333333; 
}


je n'ai pas regarder du coté de -moz-box-sizing , mais c'est a priori sans effets sauf si par hasard cela forcer FF a recalculer et inclure le box shadow dans la largeur total ...

GC
Raphael a écrit :

Normalement pas, justement : "Shadows do not influence layout and may overlap other boxes or their shadows."
http://www.w3.org/TR/css3-background/#the-box-shadow


Oui, mais non, exemple :
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Box Shadow</title>
<style type="text/css">
* {margin:0;}
.box {-moz-box-shadow:0px 2px 2px #333333; -webkit-box-shadow:0px 2px 2px #333333; background-color: #f3f3f3; height: 200px; }
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>



Résultât FF:
upload/28417-Capturedec.png

Edit: pas moyen de mettre 2 capture différentes, à chaque fois sa affiche 2 fois la même image ?
Modifié par 3arly3F (28 Jul 2010 - 13:34)
bonjour,

c'est un defaut de FF qui sera probablement reglé dans une version futur , en attendant a toi de gerer ce defaut comme je te le propose en exemple ( ou autres ... ) ou laisse courir ...

Par ailleurs c'est encore une règle 'propriétaire' (-moz-) , sujette a de petits defauts Smiley smile .

GC
Sujet clos
Aller à