CSS: expand widthsize

Question

Salut. Je travaille sur un simple "design"/boîte pour mon site, et je voudrais faire la largeur plus que c'est maintenant. Il est 980px maintenant et je voudrais le faire 1150px, mais quand je fais cela, ma frontière avec l'opacité, devient tout bizarre et la boîte tourne vers la droite (et je veux tout au centre)

Voici avant: http://jsbin.com/obefo3

est ici après: (largeur 1150px) http://jsbin.com/obefo3/2

Comment puis-je résoudre ce problème?

Answer 1

Vous devez modifier la largeur de clear-bg en fonction de la nouvelle largeur. Il devrait être (1150 - 980) = 170 pixels plus large. Aller width: 1010px;-width: 1180px;

Answer 2

Peut-être essayer une structure légèrement différente ... et vous avez un peu plus CSS que vous avez besoin, je crois:

<div id="clear-bg"> </div> 

<div id="page">  aa  </div> 

puis votre code CSS pourrait ressembler à

#clear-bg { width:1150px; margin:0px auto; opacity:0.1; background:#000000; height:500px; margin-top:50px; } 
#page{position:relative;height:450px;width:1100px;background:#000000; margin:0px auto; margin-top:-475px;} 

(et supprimer d'autres déclarations pour ces éléments ...)

Answer 3

Changer

#page { 
    width: 980px; 
    margin: -275px 0px 0px -490px; 
    ... 
} 

à

#page { 
    width: 1150px; 
    margin: -275px 0px 0px -575px; /* -1150/2 */ 
    ... 
} 

Et le changement:

#clear-bg { 
    ... 
    width:1010px; 
    margin: -290px 0px 0px -505px; 
    ... 
} 

à:

#clear-bg { 
    ... 
    width:1180px;     /* 1150 + 30 */ 
    margin: -290px 0px 0px -590px; /* -1180/2 */ 
    ... 
}