0

私は CSS にまったく慣れていないので、これがばかげた問題である場合はご容赦ください。

内部に幅の 33.33% の 3 つの div が埋め込まれたフッターを作成しました。何らかの理由で、各 div に入れているテキストは、div の下部の半分と半分になっています。これは私を狂気に駆り立てています。誰かがなぜこれが起こっているのか説明してもらえますか?

ここに私のXHTMLがあります:

<! DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 strict//EN" "http://www.3org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="EN" dir="ltr" xmlns="http://www.w3org/1999/xhtml">

<head>

 <meta http-equiv="content-type"
 content="text/xml; charset=utf-8" />

<title>www.BLeeOBS.com</title>

<link rel = "stylesheet"
 type = "text/css"
 href = "twoCol.css" />

</head>

<body background="images/brick.jpg">

<div id="body">

<div id="head">
 <h1>B. Lee Oil Burner Service</h1>
</div>

<div id="head_right">
 <h1></h1>
</div>

<div id="left">
 <h2></h2>
</div>

<div id="right">
 <h2></h2>
</div>

<div id="footer">

  <div id="footer1">
  <h3>Fully Insured</h3>
  </div>

  <div id="footer2">
  <h3>HIC# PA088378</h3>
  </div>

  <div id="footer3">
  <h3>©2013</h3>
  </div>

</div>

</div>

</body>

</html>

これが私のCSSです：

#body {
 margin-left: auto;
 margin-right: auto;
 background-image: url("images/bggradient.jpg");
 text-align: center;
 background-repeat: repeat-x;
 width: 768px;
 height: 1024px;
}
#head {
 background-image: url("images/horizontalpipe.png");
 background-repeat: repeat-x;
 float: left;
 height: 90px;
 width: 678px;
}
 #head_right {
 background-image: url("images/elbow.png");
 float: left;
 width: 90px;
 height:90px;
}
#left {
 float: left;
 height: 904px;
 width: 678px;
}
#right {
 background-image: url("images/verticalpipe.png");
 background-repeat: repeat-y;
 float: left;
 width: 90px;
 height: 904px;
}
#footer {
 background-color: gray;
 color: white;
 height: 30px;
 width: 768px;
 clear: both;
}
#footer1 {
 height: 30px;
 float: left;
 width: 33.33%;
}
#footer2 {
 height: 20px;
 float: left;
 width: 33.33%;
}
#footer3 {
height: 20px;
width: 33.33%;
float: left;
}

ここで私のページを表示して、何が起こっているかを確認できます: http://www.bleeobs.com/bricksswf.html

白いテキストは灰色のボックス (私の div) に完全に収まっているはずですが、ご覧のとおり、途中まで出ています。

また、「B. Lee Oil Burner Service」というテキストをヘッダーの少し上に移動したいと思います。パディングを設定してもまったく役に立たないようです。

どんな助けでも大歓迎です。

4

1 に答える 1

0

理由はわかりませんが、ここに表示される「ユーザーエージェントスタイルシート」によってマージンが設定されています。

検査官

即時修正が設定されています

h3 { margin: 0 }

またはあなたが望む方法。このChrome user agent stylesheet overwriting my site styleによると、正しい修正を検討することをお勧めします。ドキュメントの上部に必要なものがあるか (おそらく html 5 の場合)、どこかで css が壊れている可能性があります。

編集: デフォルトのブラウザー スタイルをリセットする必要があることについて、Adrift は正しいようです。彼が提案しているように、reset.cssを使用できます。

于 2013-03-18T03:20:44.060 に答える