プロが教える店舗＆オフィスのセキュリティ対策術

ページ上部の余白をなくしたい（ＣＳＳ）

解決済

  • 質問者：noname#46937
  • 質問日時：
  • 回答数：7件

初歩的な質問で申し訳ありません。

以下のような記述なのですが、
<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;
}

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (7件)

No.5ベストアンサー

  • 回答者： pingu98
  • 回答日時：

ひとつ気になるのですが、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)でも上部に変な空白が出ました。
それと、とりあえず原因きり訳の為に、各要素を一個ずつ削除していって、一番シンプルな形で症状が再現するソースを確認したいです。
なにしろ、症状が再現しないので原因も不明です。

この回答への補足

お返事が遅くなってしまって申し訳ありません。
いろいろとありがとうございました。

>　<!--[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

本来のアップロード先はＯＣＮ（プロバイダからの無料スペース）です。
広告は入りませんが、多分関係ないと思うのです。。

ご面倒をおかけしますが、お分かりになることがあればアドバイスお願い致します。

補足日時：2005/07/19 19:59
通報する
    • good
    • 0
    • 件
通報する

No.7

  • 回答者： taseki
  • 回答日時：

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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございました。
仰るように、空白とタブをすべて削除してみたところ、上部の空白はなくなりました(>_<)
無事解決しました！

この場を借りて、ご回答くださった皆様にお礼させてください。
タブと空白は意図して挿入したものではないのですが、
色々さわっているうちに入ってしまったようです。
ＣＳＳどころかそれ以前の問題を理解してなかったようで、たいへんなご面倒をかけしてしまって申し訳ありません。
回答下さった方皆様にポイントを差し上げたいのですが、そうもいかず…すみませんがご容赦下さい。
本当にありがとうございました。

通報する
お礼日時：2005/07/19 22:29

No.6

  • 回答者： kosa
  • 回答日時：

アクセス解析のJAVAスクリプトとをかHTML内に記述もしくは、外部ファイルから呼び出しなどしていませんか？

    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございました。
Ｎｏ７の方のご回答で解決できました。
いろいろと考えてくださったのに、一番の初歩のところでミスをしていたようです(>_<)
たいへん申し訳ないです。。。

通報する
お礼日時：2005/07/19 22:21

No.4

  • 回答者： taseki
  • 回答日時：

> 上記のＣＳＳを記述しているのはcommon.cssのほうです。



ためしに、
<link href="common.css" rel="stylesheet" type="text/css">
↑これ以外のCSSを全部はずしてみると、どうでしょうか。

これで、とりあえず余白は解決するなら、他のCSS、特にie-all.cssあたりが影響してるとか。オーバーライドしてる可能性もあります（後の指定が有効になる）。

あとは、
line-height : 150%;
という行、パーセントで指定すると何かと問題が起きたりするので、
line-height : 1.5;
と書いた方が良いです。
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございました。
<link href="common.css" rel="stylesheet" type="text/css">
に関しては、Ｎｏ５の方の補足に記入させていただきました。
残念ながらこれが原因ではなかったようでした。

line-height : 1.5;
のほうはご回答のとおりに訂正しました。
細かい所まで見てくださって、本当に有難うございました(^^)

通報する
お礼日時：2005/07/19 20:14

No.3

  • 回答者： steel_gray
  • 回答日時：

<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のマージンですが、それを０にしてもかわらなかったのです。。。

補足日時：2005/07/18 19:38
通報する
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： 2NN
  • 回答日時：

当環境Firefox（1.0.4/XP）、IE6でも隙間はできていません。



HTMLの中にタグの閉じ忘れはないでしょうか？

HTML-Lintでタグのチェックを行ってみてください。
http://htmllint.itc.keio.ac.jp/htmllint/htmllint …

この回答への補足

度々ありがとうございます。
チェックしてみましたが、タグのとじ忘れはなかったようです。
（質問本文で閉じ忘れてしまったのでご面倒をおかけしました）

補足日時：2005/07/18 19:34
通報する
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： 2NN
  • 回答日時：

私の環境でテストしたところ、


<div id="container">の上部に隙間はできていません。
（HTML4行目のdivが閉じ忘れてますが、いずれにしろ隙間はできません。）

CSSの呼び出し方、または記述場所はどこですか？

この回答への補足

早速のご回答ありがとうございます。
私は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のほうです。

何かあればご回答いただければ嬉しいです。

補足日時：2005/07/18 18:55
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

すみません、上記補足の追加です。
余白はFirefoxもIEも同じようにあります。

通報する
お礼日時：2005/07/18 19:04

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報