人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

●質問者: moriamko44728
●カテゴリ:ウェブ制作
✍キーワード:border BOX CSS IE6 margin
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● hkn
●30ポイント

http://www.hatena.ne.jp/

はてな

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

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

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

div:after{

content:””;

display:block;

clear:both;

border-top:0px transparent solid;

}

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

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

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

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

◎質問者からの返答

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

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

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

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;

}


2 ● Dandan
●30ポイント

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を変更することが可能ならば、試してみてください。

◎質問者からの返答

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ