高さ・横幅指定の大きさがずれる /Dreamweaver入門 ドリームウィーバーの使い方

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

HOME > ブラウザ違い・バージョン違いによるズレ等の解決方法 > 高さ・横幅指定の大きさがずれる

高さ・横幅指定の大きさがずれる

ちゃんと枠におさめたはずなのに・・・新バージョンのIEで見るとサイズがずれてはみ出してる!

原因

旧バージョンのIEでは、width と height に、padding 値が足されない。

{
width: 100px;
height: 20px;
padding: 10px;
}

と設定した場合、旧バージョンのIEでは 100px×20px のサイズになるが、新バージョンやFirefoxでは 120px×40px (上下左右にpadding値10pxずつが足される)となります。 その大きさの差の分サイズがずれてしまいます。

枠をつけるとわかりやすくなります。

高さ・横幅指定の大きさがずれる

これによって、左ナビゲーションや右ナビゲーションの横幅サイズを超えてしまい、ナビゲーションが下に下がってレイアウトが大きくずれてしまっているサイトを時々見かけます。

解決方法

100px の枠内に収めてスペースも取りたい場合、別の要素で指定する。

div.waku {
width: 100px;
height: 100px;
}

この中に文字を入れたい場合、文字のほうにスタイルを適用する。

div.waku p {
margin: 10px;
}


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

 

Dreamweaverだけじゃない
。PhotoshopもIllustratorもフラッシュもHTMLもCSSも、SEOやPPCもPHPもCGIもJavascriptもわかる。パソコン教室の100分の1の価格で全てを学べる動画パソコン教室。ダウンロードして今すぐ学習開始できます。(全ジャンルのサンプル動画見れます)

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

 

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


▲トップページへ