marginとナビゲーションの位置がずれる

質問

質問初投稿で、現在webデザインを勉強中の者です。
あまり慣れていないので文章の拙さはご容赦ください。

現在自主制作中のWebサイトがあるのですが、
ナビゲーションをposition:fixedで固定に画面の下に配置するように設定しています。
そのまま上部に画像を配置しようと、margin-left;などで調節していたのですが、
ナビゲーションの位置がズレてしまい不自然な空白や、ナビゲーションそのものが消えるという状態になってしまいました。
margin-leftを1pxでも入れると右端から消えてしまいます。
paddingやposition:absoluteなどの別の方法も試してみましたがmarginと同じ状態になってしまいます。
もしかしたら別の画像を上に配置しているので、それが原因かもしれません。
どうしても自分では解決できないので、解決方法を教えていただきたいです。
画像はmargin-leftに数値を入力した時のものです。

#footer
{
margin: 0px;
padding: 0px;
position: fixed;
left: 0%;
bottom: 20px;
width: 100%;
height:44px;
}

#item{
margin-left:34px;
margin-right:34px;
margin-top:34px;
}

#fruits{
margin-left:34px;
}

回答No.2

noname#217950

htmlソースがわからないので、何が#footerで何が#itemなのか？など、全くわからず想像の域を出ませんが、

>margin-leftを1pxでも入れると右端から消えてしまいます。

という現象が起きるという事は、もしかしたら#footerのposition:fixedとは関係ないのではないでしょうか？
単純に「1px」幅が大きくなる事によって、画像を配置している親ボックスの幅より内容物のトータル幅が大きくなってしまい、溢れて内容物の最後の画像が下の段に移動してしまっているのではないかと考えました。
並べる画像や親ボックスに、paddingやborderなどを指定していませんか？paddingやborderは幅（width）にプラスされてしまいます。
例えば、画像が
width : 100px;
padding : 3px;
border : 1px solid black;
等とCSSで指定されていたら、この画像を配置するのに必要なwidthは108pxとなります。
（画像自体の幅="100px"＋左右の余白"3px×2=6px"＋左右のボーダーライン"1px×2=2px"）
また、親ボックスにpaddingが指定されている場合もトータル幅からpadding分を引かないと溢れてしまいます。
この辺の解釈or計算ミスではありませんか？

と…、想像からお返事してみましたが、的外れになる可能性も存分にありますがどうでしょう？

的外れだった場合…
それほど難しい質問ではなさそうですので、htmlも質問文に追加すると的確な答えが得られると思いますよ。各IDやクラスを何に対応させているのか？positionの親要素等がわからないとこの質問に的確な答えは返せないと思います。

補足

情報不足で申し訳ないです；
htmlの記述はこうなっております。
別のページを制作している時は問題無かったのですが、
全体のmarginで調節してしまっているのが原因な気がします・・・。
見やすいように調節してありますのでご了承ください。

<div class="footer">
<a href="***.html"onmouseout="MM_swapImgRestore()"onmouseover="MM_swapImage('home','','***.jpg',1)"><img src="***jpg" alt="home" name="home" width="210" height="63" border="0" id="home" /></a>

<a href="***.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('about','','***.jpg',1)"><img src="***.jpg" alt="about" name="about" width="210" height="63" border="0" id="about" /></a>

<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('***','','***.jpg',1)"><img src="***.jpg" alt="fruits"
name="fruits" width="210" height="63" border="0" id="fruits" /></a>

<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('***','','***.jpg',1)"><img src="***.jpg" alt="recipe" name="recipe" width="210" height="63" border="0" id="recipe" /></a>

<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('***','','***.jpg',1)"><img src="***.jpg" alt="onlineshop" name="onlineshop" width="210" height="63" border="0" id="onlineshop" /></a>

<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('access','','***.jpg',1)"><img src="***.jpg" alt="access" name="access" width="210" height="63" border="0" id="access" /></a>
</div>

<div id="item">
<img src="***.png" width="500" height="54" alt="おすすめ商品" />
</div>

<div id="fruits">
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('***','','img/***jpg',1)"><img src="***.jpg" alt="***" name="***" width="297" height="147" border="0" id="***" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('***','','***.jpg',1)"><img src="***.jpg" alt="***" name="***" width="297" height="147" hspace="15" id="***" /></a>
</div>

回答No.1

ORUKA1951

スタイルシートと言うよりHTMLの文書構造自体がおかしいのでは？？？
書かれている一意セレクタを見る限り、デザインのためにHTMLを書かれているように見受けられます。
　それでは、スタイルシートを導入して「文書構造とプレゼンテーションの分離」をする意味が全くなくなってしまいます。
#footerだと、HTML内にひとつしか書けませんが、footerは一塊の完結した記事には必ず存在すると思われますから、classセレクタでfooterと指定するほうが良いです。
　ナビゲーションですからfooterには書かなくて良いものです。footerには他のページへのリンクはあるのが普通ですから・・

　positionをstatic以外に指定すると、その子孫要素はその位置を基準にします。
　。。正確にはブロック要素は直近のstatic以外の親コンテナブロックを基準にします。

　セレクタは基点となるセレクタから書き始めましょう。

[例]
　⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html )
　で、ブラウザの表示メニューからスタイルシートへ進み、[ウィンドウの下部固定下]を選択した状態を希望されているのだと思います。