- 締切済み
<css> ボックスの隙間について
お時間のあるときに教えていただけるとありがたいです。 cssボックスを縦に二つ（上A、下B）作ったところ、どうしてもボックスに隙間が空いてしまいます。この隙間をなくし、二つのボックスを繋げるように表示するにはどうしたらいいでしょうか。どうもマージン設定がうまくいっていないようなのですが、どこが悪いのかわからなくて困っています。 cssは外部ファイルとして読み込みました。以下にソースをなるべくそのまま貼り付けてみます。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ＜cssソース＞ body{ color : #fff; font-size : 11pt; text-align : left; background-color : #ff00cc; background-image : url(haikei.gif); background-repeat : repeat; } a{ color : #ffcccc; text-decoration : none; } a:HOVER{ color : #ffcccc; text-decoration : none; } a:VISITED{ color : #ffcccc; } * { margin:0px; padding:0px; } #boxA { margin:0px auto; width:650px; height:217px; padding:0; } #boxB { text-align:left; margin:0px auto; width:620px; height:350px; padding:15px 15px 5px 15px; background-image : url(haikei2.gif); background-repeat : repeat; overflow:auto; } ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ＜htmlソース＞ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <META http-equiv="Content-Style-Type" content="text/css"> <META http-equiv="Content-Script-Type" content="text/javascript"> <title></title> <link rel=stylesheet type="text/css" href="haikei.css"> </head> <body> <div id="boxA"> </div> <div id="boxB"> </div> </body> </html> よろしくお願いします。
- cuckoo9
- お礼率50% (1/2)
- その他（インターネット・Webサービス）
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- koma30007
- ベストアンサー率87% (173/198)
追加の回答です。 AとBのボックスにfloatを指定すると、マージンに指定 した値がそのまま反映されるようです。 -(マイナス)の値を指定して、CSSハックを使うより簡単 ですので、こちらを試してみてはいかがでしょうか？ AとBのボックスを囲むボックスを追加して、次のCSSを 適用させてください。 これでAとBの入ったボックスごと中央に配置されます。 任意のクラス名またはID名 { width: 650px; margin: 0px auto; padding: 0px; } 追加したボックス内でfloatを解除しても良い位置(AとBの ボックスより下)にある要素に対して、floatを解除するCSS を適用してください。 ※適切な要素がない場合は、<hr>を追加して非表示にする と良いです。 ※適切な位置でfloatを解除しないと、ブラウザによっては 表示が崩れる原因になります。 hr { clear: both; visibility: hidden; } Windows(IE7、Firefox2および3、Safari3.2)でしか確認して いませんので、IE6以前、Opera、Macでは違う表示になる かもしれません。
- koma30007
- ベストアンサー率87% (173/198)
#boxBの上のマージンにマイナスの値を指定して調整する のが簡単だと思います。 ただし、ブラウザが異なると1px～2px程度のずれが生じる ようですので、元々1枚な画像を分割してAとBのボックスに 表示する場合、接続部分がずれて表示されます。 CSSハックを使用すれば一部のブラウザには対処可能です が、全てのブラウザに対処するのは無理かもしれません。 #boxB { margin:-18px auto 0px; ※他は省略 } 例えば、AとBのボックスの接続部分を気にしなくても良い 画像の場合は、上記のように記述するだけで大丈夫ですが、 画像の接続部分をずれないようにするには、以下の記述も 追加する必要があります。 /* Safari用のハック */ html*#boxB { margin: -17px auto 0px; } /* IE6以前用のハック */ * html #boxB { margin: -17px auto 0px; } /* IE7用のハック */ *:first-child+html #boxB { margin: -16px auto 0px; } ※数値は適当に調整してください。 ※実機で確認したのではありませんが、Mac版のFirefox では表示がずれます。(Win版は問題ありません。) ※Operaでの表示もずれるようです。 ※CSSハックで調整しても、フォントを変更している環境 などの場合にもずれて表示されます。 CSSハックの参考ページとしてご覧ください。 http://blog.worldending.jp/archives/2006/07/css.php http://d-lover.com/css/hack.shtml http://lpclips.net/2008/06/css-hack.html なるべく、CSSハックを使用しないですむ画像またはデザイン へ変更した方が良いかもしれません。
お礼
わかりやすい回答をありがとうございます！ 参考ページも教えてくださり、どうしたらいいのかわかりました！ そうですね・・・デザイン変更も視野に入れて設計してみます。