28172 sujets

CSS et mise en forme, CSS3

Box-shadow, width:100% et scrollbar horizontale.

Bonjour à vous !

Mon problème est assez simple, je voudrais savoir si il est possible de s'en sortir sans avoir une scrollbar horizontale dans le cas où on applique la propriété box-shadow sur un div occupant toute la largeur de body.

J'ai donc ce code:
div {
   width: 100%;
   height: 100px;
   background: black;
   -moz-box-shadow: 10px 10px 10px red;
}


<div></div>


Actuellement j'utilise un png mais je trouve quand même l'emploi du CSS plus propre (même si je dois faire une croix sur IE du coup)
C'est comme qui dirait un bug ou une imprécision dans l'implémentation de box-shadow (pas sûr que le brouillon de spec sur cette propriété prévoyait ce cas de figure). C'est une des raisons qui ont conduit le CSS Working Group à virer box-shadow des derniers Working Draft (de sorte que box-shadow n'est plus une propriété CSS3 à l'heure actuelle). Box-shadow devrait faire son retour à l'avenir, mais sous une forme peut-être corrigée ou remaniée.

Dans l'immédiat, la seule solution que j'ai trouvé à ce problème c'est de jouer avec des overflow:hidden, overflow-x:hidden, etc. À utiliser avec force modération.
bonjour,

tu creer une ombre de 10 pixels , cette ombre fait donc 100% + 10 pixels .

tu peut la recaler a l'opposé du sens de lecture avec une premiere valeur negative de -10pixels .

ex: 
-moz-box-shadow: -10px 10px 10px red;


Mais bon , si çela vire le scroll , c'est encore moins bien que le png ... et 1 png opaque n'est pas bien lourd , pour IE6 , tu peut proposer le filtre qui va bien ou ne rien faire .

Si le fond est uni , l'opacité n'est peut-être pas nécessaire , un jpg peut suffire .

GC
++
Merci pour vos réponses Smiley smile

gc-nomade effectivement, quand l'ombre part vers la gauche il n'y a pas de scrollbar mais ça ne correspond pas au visuel que je voudrais.

Florent, j'ai testé avec un "bête" overflow (vu que j'ignorai l'existence de overflow-x et -y)
J'imagine que ça devient gênant dans le cas ou la résolution du visiteur est inférieure à la largeur de mon contenu ?
Et IE il supporte ça comment ? (même si ça n'a que peu d'intérêt dans mon cas, je n'aurai qu'à rajouter overflow-x: visible dans le CSS pour IE, j'aime en savoir plus)
Aldarone a écrit :
Merci pour vos réponses Smiley smile

gc-nomade effectivement, quand l'ombre part vers la gauche il n'y a pas de scrollbar mais ça ne correspond pas au visuel que je voudrais.

Florent, j'ai testé avec un "bête" overflow (vu que j'ignorai l'existence de overflow-x et -y)
J'imagine que ça devient gênant dans le cas ou la résolution du visiteur est inférieure à la largeur de mon contenu ?
Et IE il supporte ça comment ? (même si ça n'a que peu d'intérêt dans mon cas, je n'aurai qu'à rajouter overflow-x: visible dans le CSS pour IE, j'aime en savoir plus)



IE comprend overflow-x ou y depuis longtemps , pas de soucis de ce coté la , d'ailleurs y-a t-il un soucis du au box-shadow ? , ou bien tu utilise deja les filtres ?

Si tu veut te servir d'overflow-x , il ne faut pas l'appliquer a html , body ou même un conteneur global comme tu le fais remarquer.

Tu peut par contre te servir d'un element tampon pour maitriser juste cette zone et laisser les autres contenus provoquer ou non la barre de défilement horizontal de ta fenêtre .
ex: 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>HTML 4.01 </title>
<style type='text/css'>
html , body , div {width:100%;margin:0;padding:0;}
.tamponshadow {overflow-x:hidden;padding-bottom:20px;}
.tamponshadow  div{ 
   height: 100px; 
   background: black; 
   -moz-box-shadow: 10px 10px 10px red; 
color:white;
}
</style>
</head>
<body>
<div id="global">
contenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenucontenu
     <div class="tamponshadow"><div>ombrage</div></div>
</div>
</body>
</html>


GC
Sujet clos
Aller à