Minor Numéro CSS

Question

Je suis nouveau dans le monde de la conception/programmation, donc je suis sûr que le problème est facile à résoudre. J'essaie d'ajouter l'effet moz-box-shadow à mon en-tête. Mais dès que j'ajoute ce composant, l'en-tête qui occupe de l'espace horizontalement se raccourcit. Je veux que l'en-tête ressemble à Twitter, où ils utilisent un effet d'ombre.

#header { 
    background-color: #990000; 
    width:101.3%; 
    margin-left:-8px; 
    margin-top:-8px; 
    height:40px; 
    -moz-box-shadow: 1px 1px 10px #D7D7D7; 
} 

De même, la façon dont j'ai défini la largeur est-elle susceptible de créer des problèmes croisés?

Answer 1

est ici une version similaire à ce que Twitter a :
Ce est version de Twitter, plus ou moins:

Live Demo (edit)

HTML:

<div id="top-fixed"> 
    <div id="top-bar"></div> 
</div> 

CSS:

html, body { 
    margin: 0; padding: 0 
} 
body { 
    padding-top: 50px; 
    background: #c0deed 
} 
#top-fixed { 
    position: fixed; 
    left: 0; 
    right: 0; 
    top: 0; 
    z-index: 1000; 
} 
#top-bar { 
    height: 40px; 
    width: 100%; 

    background-color:#00a0d1; 
    background-image:-webkit-gradient(linear,0 0,0 100%,from(#00a0d1),to(#008db8)); 
    background-image:-moz-linear-gradient(#00a0d1,#008db8); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00a0d1',endColorstr='#008db8'); 
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#00a0d1',endColorstr='#008db8')"; 

    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); 
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); 
} 

Answer 2

L'astuce que Twitter utilise, met dans une boîte en position absolue et donner cette boîte une largeur de 100% et l'ombre. En utilisant overflow-x: hidden sur son parent, vous obtenez l'effet que vous recherchez.

Answer 3

J'ai fait des ombres avec .png. Je ne vois aucun avantage à l'utiliser (surtout parce que je suppose que les navigateurs ont commencé à supporter .png avant de supporter les ombres see, for example, Mozila's statement that FF started supporting box shadows in FF3.5), mais bien sûr, si cela vaut mieux que de faire des ombres via .png, n'hésitez pas à laisser un commentaire. faux!