- ベストアンサー
ページ上部の余白をなくしたい（ＣＳＳ）
初歩的な質問で申し訳ありません。 以下のような記述なのですが、 <div id="container">の上部にスキマが出来てしまいます。 背景に仮色をつけたりして確認しましたが、 どうしても余白をなくすことができません。 marginの指定の仕方がおかしいのでしょうか？ ご指摘いただけると助かります。 /* HTML（単純に書くとこんな感じです）*/ <body> <div id="container"> <div id="header"> <div> </div> </body> /* CSS */ body { margin : 0; padding : 0; background-color : #eeeeee; font-size : 12px; line-height : 150%; color : #333333; font-family : arial, helvetica, sans-serif, Verdana, Geneva, ＭＳゴシック; text-align : center; } #container { margin : 0 auto; padding : 0; width : 751px; text-align : left; background-color : #ffffff; } #header { margin : 0 auto; padding : 0; width:745px; height:120px; background: transparent url(***.jpg) ; background-repeat: no-repeat; }
- HTML
- 回答数7
- ありがとう数4
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
ひとつ気になるのですが、head内の以下の部分で、 <link href="" rel="stylesheet" type="text/css"> <link href="index.css" rel="stylesheet" type="text/css"> <link href="common.css" rel="stylesheet" type="text/css"> <!--[if IE]> <link rel="stylesheet" type="text/css" href="ie-all.css"> <![endif]--> <!--[if IE]>の前に全角空白を二つ入れてませんでしょうか。これを入れたままにすると、とりあえず私の環境(win2000Firefox1.0.4)でも上部に変な空白が出ました。 それと、とりあえず原因きり訳の為に、各要素を一個ずつ削除していって、一番シンプルな形で症状が再現するソースを確認したいです。 なにしろ、症状が再現しないので原因も不明です。
その他の回答 (6)
- taseki
- ベストアンサー率66% (155/233)
ANo.5の方が指摘している全角空白がたくさん入ってますよ…。 確かに私の環境でも全角空白がbodyより上に入っていると余白があきます。 それと、タブ文字も入っています。タブ文字なら区切り文字として扱われ、とりあえずIEでは問題ありませんでしたが、もし意図せず入ったものなら削除したほうがいいでしょう。 以下ヘッド部分ですが、「★」の個所に全角空白が、「■」の個所にタブが入っています。 ------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ★<head> ■★<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">■ ★★★<meta name="Robots" content="index,follow"> ■★<meta http-equiv="Content-Style-Type" content="text/css"> ★★★<meta http-equiv="Content-Script-Type" content="text/javascript"> ■★<meta http-equiv="imagetoolbar" content="no"> ■★<meta name="MSSmartTagsPreventParsing" content="true"> ■★<meta name="Copyright" content="senorya"> ■★<meta name="Author" content="senorya"> ■★<meta name="Generater" content="Macromedia DreamweaverMX"> ■<link href="index.css" rel="stylesheet" type="text/css"> ■<link href="common.css" rel="stylesheet" type="text/css"> ■<!--[if IE]> <link rel="stylesheet" type="text/css" href="ie-all.css"> <![endif]--> ■ ■■■■ <title>test</title> </head> <body>
お礼
回答ありがとうございました。 仰るように、空白とタブをすべて削除してみたところ、上部の空白はなくなりました(>_<) 無事解決しました！ この場を借りて、ご回答くださった皆様にお礼させてください。 タブと空白は意図して挿入したものではないのですが、 色々さわっているうちに入ってしまったようです。 ＣＳＳどころかそれ以前の問題を理解してなかったようで、たいへんなご面倒をかけしてしまって申し訳ありません。 回答下さった方皆様にポイントを差し上げたいのですが、そうもいかず…すみませんがご容赦下さい。 本当にありがとうございました。
- kosa
- ベストアンサー率25% (379/1464)
アクセス解析のJAVAスクリプトとをかHTML内に記述もしくは、外部ファイルから呼び出しなどしていませんか？
お礼
回答ありがとうございました。 Ｎｏ７の方のご回答で解決できました。 いろいろと考えてくださったのに、一番の初歩のところでミスをしていたようです(>_<) たいへん申し訳ないです。。。
- taseki
- ベストアンサー率66% (155/233)
> 上記のＣＳＳを記述しているのはcommon.cssのほうです。 ためしに、 <link href="common.css" rel="stylesheet" type="text/css"> ↑これ以外のCSSを全部はずしてみると、どうでしょうか。 これで、とりあえず余白は解決するなら、他のCSS、特にie-all.cssあたりが影響してるとか。オーバーライドしてる可能性もあります（後の指定が有効になる）。 あとは、 line-height : 150%; という行、パーセントで指定すると何かと問題が起きたりするので、 line-height : 1.5; と書いた方が良いです。
お礼
回答ありがとうございました。 <link href="common.css" rel="stylesheet" type="text/css"> に関しては、Ｎｏ５の方の補足に記入させていただきました。 残念ながらこれが原因ではなかったようでした。 line-height : 1.5; のほうはご回答のとおりに訂正しました。 細かい所まで見てくださって、本当に有難うございました(^^)
- steel_gray
- ベストアンサー率66% (1052/1578)
<div id="container"> <div id="header"> ※ <div> </div> ※の部分に(h1とか)上部にマージンを持った要素や/マージンを指定した要素はありませんか？ 私も正確にわかっていないので詳しい理屈はパスですが子要素のマージンがとられているのかもしれません。その場合はその子要素の上部マージンを0にするといいようです。
補足
回答ありがとうございます。 仰るように、子要素のマージンが影響しているのかと思ったのですが子要素は一応ヘッダー内で動いているようでした。 質問では長くなるので省略していましたが、 ヘッダー内は3つ子要素があります。 <div id="header"> <div id="logo"> <img> </div> <div id="sub_navi"> <ul><li>あ</li><ul> <ul><li>い</li><ul> <ul><li>う</li><ul> </div> <div id="main_navi"> <ul><li>え</li><ul> <ul><li>お</li><ul> </div> </div> ＣＳＳは以下のようにしています。 #logo { width:191px; float:left; } #logo img { margin:50px 16px 13px 15px; padding:0; border:none; } #logo span{ display :none; } #sub_navi{ width:537px; float:right; margin:2px 17px 30px 0; text-align:right; } #sub_navi ul li{ margin-left:17px; display:inline; padding:0; list-style-type: none } #main_navi{ width:537x; float:right; } #main_navi ul{ width:500px; } #main_navi ul li{ float:left; list-style-type: none; } #main_navi ul li span{ display :none; } あやしいのはlogoとsub_naviのマージンですが、それを０にしてもかわらなかったのです。。。
- 2NN
- ベストアンサー率40% (143/353)
当環境Firefox（1.0.4/XP）、IE6でも隙間はできていません。 HTMLの中にタグの閉じ忘れはないでしょうか？ HTML-Lintでタグのチェックを行ってみてください。 http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html
補足
度々ありがとうございます。 チェックしてみましたが、タグのとじ忘れはなかったようです。 （質問本文で閉じ忘れてしまったのでご面倒をおかけしました）
- 2NN
- ベストアンサー率40% (143/353)
私の環境でテストしたところ、 <div id="container">の上部に隙間はできていません。 （HTML4行目のdivが閉じ忘れてますが、いずれにしろ隙間はできません。） CSSの呼び出し方、または記述場所はどこですか？
お礼
すみません、上記補足の追加です。 余白はFirefoxもIEも同じようにあります。
補足
早速のご回答ありがとうございます。 私はWinXP/Firefox1.0(←がメインで、IE6は表示を微調整）で見ているのですが、余白があるのです。。。 ＣＳＳは<head>内に <link href="" rel="stylesheet" type="text/css"> <link href="index.css" rel="stylesheet" type="text/css"> <link href="common.css" rel="stylesheet" type="text/css"> <!--[if IE]> <link rel="stylesheet" type="text/css" href="ie-all.css"> <![endif]--> としています。 上記のＣＳＳを記述しているのはcommon.cssのほうです。 何かあればご回答いただければ嬉しいです。
補足
お返事が遅くなってしまって申し訳ありません。 いろいろとありがとうございました。 > <!--[if IE]>の前に全角空白 これは、入っていませんでした。 DreamweaverＭＸのコードビューで編集していますが、 <link href="common.css" rel="stylesheet" type="text/css"> の後で改行をすると、自動的に頭が揃うようになっています。 下の補足にコピーしたときにずれてしまったようです。 > 一番シンプルな形で症状が再現するソース テストページを作成してみました。 ご覧いただけたらと思います。 １）元データからリンクと画像、本文を外しただけのものです。htmlのレイアウトは一切いじっていません。 http://www.geocities.jp/test_for_css/ ２）Ｎｏ４の方が仰っていたように、１）からie-all.cssを外したものです。 http://www.geocities.jp/test_for_css/index2.html ３）一番シンプルな形にしたらこうなりました。div id="container"のみです。 http://www.geocities.jp/test_for_css/index3.html 本来のアップロード先はＯＣＮ（プロバイダからの無料スペース）です。 広告は入りませんが、多分関係ないと思うのです。。 ご面倒をおかけしますが、お分かりになることがあればアドバイスお願い致します。