ナビゲーションが下に落ちてしまう /Dreamweaver入門 ドリームウィーバーの使い方

ドリームウィーバーの使い方

HOME > ブラウザ違い・バージョン違いによるズレ等の解決方法 > ナビゲーションが下に落ちてしまう

ナビゲーションが下に落ちてしまう

CSSでレイアウトをしたサイトのナビゲーションが下に落ちてしまいました。
サイズも合っているはずなのになぜ・・・?

ナビゲーションが下に落ちてしまう

原因

ナビゲーションの width 指定をしたサイズを超えてしまっています。
ナビゲーションの幅を 100px にしたのに、その中に 101px の画像を入れてしまったりすると起こります。

解決方法

width 指定して float:right; や float:left; で回り込みをしてレイアウトしているブロックの中に、指定した横幅を超えるサイズの要素がないか確認しましょう。
高さ・横幅指定の大きさがずれるの項目が原因であることが多いので参考にしてみて下さい。

よくある見つかりにくいエラー

  1. width 指定したブロックの中に width 指定した別の要素がある場合や画像を入れた場合、そこにスタイルで左右に margin padding 指定をしていると、その分のサイズが足されてはみ出してしまうということがよくあります。
     
  2. float: left; 指定した要素の左側に margin でスペースを入れてしまうと、バージョンによってはその指定幅の2倍のマージンが取られます。

    float: left;
    margin-left: 10px;

    としてしまうと、左マージンが20pxとられます。
     
  3. border 要素を左右に入れると、バージョンによってborder幅分の値が足されます。

    width: 150px;
    border: 1px;

    の場合、古いバージョンではborderを含めて150px ですが、新しいバージョンでは152px (150px + 左右1px)と認識されます。


もしこの記事が役に立ちましたら、ぜひブックマークやブログ・twitterで紹介して下さい。

 

 このエントリーをはてなブックマークに追加  このエントリーを含むはてなブックマーク   twitter      

 

その他のDreamweaverのよくある質問と解決方法


▲トップページへ