2012-02-23 10 views
0

私はPHP/HTML5/CSS3ページを開発中で、問題が発生しました。私はどうにかしてこの作業を完璧にしてからコードを追加し、いくつかの変更を加えて壊しました。CSSの100%の幅が壊れています

概念は、ページの複数の部分が幅100%で、高さがあらかじめ定義されているという概念でした。ただし、幅:100%では、幅が15-20 px(〜1%)未満になります。それは以下のようなCSSスタイルのプロパティを持っています:

html { 
width: 100%; 
} 

body{ 
background-color:#fbf9ec; 
font-family:"Times New Roman", Times, serif; 
width:100%; 
} 


#upperContainer{ 
height: 100px; 
width: 875px; 
margin: 0 auto; 
position: relative; 
} 

#topLogo{ 
width: 250px; 
height:75px; 
background-image:url(../images/logo.png) 
} 

#nav{ 
background-image:url(../images/nav-bg.png); 
height: 32px; 
width: 100%; 
margin-left:-10px; 
background-repeat:repeat-x; 
} 

#featuredContent{ 
height: 336px; 
width: 100%; 
margin-left:-12px; 
background-image:url(../images/featured-bg.png); 
} 

#sliderA{ 
background: #3a7c38; 
height: 326px; 
width: 873px; 
margin: 0 auto; 
padding: 10px 0 0 0; 
border:1px #353f35; 
border-right-style:solid; 
border-left-style:solid; 
position: relative; 
} 

どのような考えですか?

+1

は、私はあなたには、いくつかのHTMLを見ることなく私たちにいくつかのマークアップコード – Vitamin

+2

ないアイデアを示さなければならないと思います。これをHTMLとCSSの絶対最小限に抑えてみてください。誰かがおそらく助けることができます。 –

+1

私は@Vagueに同意しますが、これをデバッグするにはHTMLが必要になるでしょう。あなたはあなたのCSSで[this jsFiddle I created](http://jsfiddle.net/qWS6k/)に追加することができます。 –

答えて

1

負の左余白が設定されています。それらを取り除き、それが整列しているかどうか確認してください

#nav{ 
    margin-left:-10px; 
} 

#featuredContent{ 
    margin-left:-12px; 
} 
+0

私はそれを認識していますが、それが機能していれば、正しく整列されていたのです。 – MasonWinsauer

+1

@MasonWinsauer:この回答は私には正しいようです。 jsFiddleでこれらの負のマージンを削除すると、整列が修正されました。私が削除しなければならなかったこれらの2つに加えて、 '#textWrapper'にはマイナスのマージンがあります。 –

+0

負の値を削除した場合:http://mason.winsauer.com/floteco2/ – MasonWinsauer

関連する問題