HOME > ブラウザ違い・バージョン違いによるズレ等の解決方法 > ナビゲーションが下に落ちてしまう
ナビゲーションが下に落ちてしまう
CSSでレイアウトをしたサイトのナビゲーションが下に落ちてしまいました。
サイズも合っているはずなのになぜ・・・？
原因
ナビゲーションの width 指定をしたサイズを超えてしまっています。
ナビゲーションの幅を 100px にしたのに、その中に 101px の画像を入れてしまったりすると起こります。
解決方法
width 指定して float:right; や float:left; で回り込みをしてレイアウトしているブロックの中に、指定した横幅を超えるサイズの要素がないか確認しましょう。
高さ・横幅指定の大きさがずれるの項目が原因であることが多いので参考にしてみて下さい。
よくある見つかりにくいエラー
- width 指定したブロックの中に width 指定した別の要素がある場合や画像を入れた場合、そこにスタイルで左右に margin padding 指定をしていると、その分のサイズが足されてはみ出してしまうということがよくあります。
- float: left; 指定した要素の左側に margin でスペースを入れてしまうと、バージョンによってはその指定幅の２倍のマージンが取られます。
float: left;
margin-left: 10px;
としてしまうと、左マージンが20pxとられます。
- border 要素を左右に入れると、バージョンによってborder幅分の値が足されます。
width: 150px;
border: 1px;
の場合、古いバージョンではborderを含めて150px ですが、新しいバージョンでは152px （150px ＋ 左右1px）と認識されます。
もしこの記事が役に立ちましたら、ぜひブックマークやブログ・twitterで紹介して下さい。
その他のDreamweaverのよくある質問と解決方法
ブラウザ違い・バージョン違いによる
表示のズレ等の解決方法
▲トップページへ