CSSのことについて質問です。

初心者なものでわからないのですが、
divのボックスの中にfloatで指定してブロック要素を配置した時、divの領域の背景色が表示されないんですが、なぜでしょうか?
IE6では背景色は表示できますが、その他のブラウザーでは表示されません。
どうもboxが表示されないみたいでmarginの指定をしてもborderの指定をしても何も表示されないのです。widthとheightをpxで指定してやればboxはその値になって表示されるのですが、リキッドレイアウトでheightが指定できない場合はどうしたらいいのでしょうか?CSSを使い始めたばかりで本当に初心者の質問ですいませんが、どなたか教えてやっていただけませんか?

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2004/11/17 18:28:58
  • 終了:--

回答(2件)

id:hkn No.1

hkn回答回数8ベストアンサー獲得回数02004/11/17 18:58:13

ポイント30pt

IE6で背景色を表示できているということは、divにwidthを指定しています?

width:100%とか、値は何でもいいのですが。

でしたら、CSSに以下の記述を付け加えてみるのはどうでしょうか。

div:after{

content:””;

display:block;

clear:both;

border-top:0px transparent solid;

}

もしdivにwidthなどを指定していなければ、上のCSSに更にdiv{_height:1%;}も追加してください。

具体的なソースが分からないので、これで解決できるかどうか自信ありません。

もしだったら、構造を簡略化したものでも良いので、ソースをだしてもらえると

他の方々も回答しやすくなるかもです。スミマセン。

id:moriamko44728

回答ありがとうございます。

追加してみましたが、解消しませんでした。

以下にソースを記述します。

columnblockの背景を表示させたいのです。

columnfullまでは背景が表示されます。

その下が表示されないのです。

●●

●●

●●

●●

●●

●●

●●

●●

●●

●●

●●

/*-------------css-----------------*/

.columnblock{

width: 635px;

margin: 0px;

padding: 0px;

background-color: Yellow;

height:1%;

}

.columnblock .columnhalf{

float: left;

width: 300px;

margin: 10px 0px 0px 10px;

border: none;

}

.columnblock .columnfull{

clear: left;

width: 600px;

margin: 10px 0px 0px 15px;

}

2004/11/18 09:44:37
id:Dandan No.2

Dandan回答回数36ベストアンサー獲得回数02004/11/18 10:13:16

ポイント30pt

http://www.mozilla.gr.jp/standards/webtips0021.html

heightプロパティの注意点〜内容がfloat要素の場合 - Web標準普及プロジェクト

同様の状況がURLに乗っていました。

ソースを次のように変更したところNetscapeでは確認が取れました。

1. CSS .columnblockの変更

.columnblock{

width: 635px;

margin: 0px;

padding: 0px;

background-color: Yellow;

//height:1%; autoに変更

height:auto;

}

2. HTML <div class=”columnblock”>終了前

<!-- 前略 -->

<div class=”columnhalf”>

<h4>●●</h4>

<h5>●●</h5>

<p>●●</p>

</div>

<!-- この行を追加 -->

<br style=”clear:both;”>

</div>

HTMLを変更することが可能ならば、試してみてください。

id:moriamko44728

回答ありがとうございます。

解決できました!!感動です!!

2004/11/18 10:38:01
  • id:hkn
    すみません

    1を回答した者ですが、ソースを貼り付けるときに1箇所ミスしました。
    border-top:0px transparent solid; の部分ですが、0pxは1pxの間違いです。
    いろいろ試行錯誤しているうちに間違ってしまったみたいです。スミマセン。
    div:afterは、moriamko44728さんの例では、div.columnblock:afterになります。

    moriamko44728さんの書いたCSSには height:1%; が指定してありましたから、
    1にも書きましたが、これを _height:1%; にすれば、br要素を書き加えずとも
    CSSのみでできます。

    自分の日記にも以前全く同じことを書いたので、URLを書いておきます。
    http://d.hatena.ne.jp/hkn/20041105#1099625802

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません