過去ログ表示


過去ログ 283 を表示

トピック内全 8 記事中の 1 〜 8 番目を表示
[ 最新記事及び返信フォームをトピックトップへ ]
このトピックの全ページ / [0]

float されたブロック内の dt の clear
(#44248) このトピック中1番目の投稿
(環境: WinXP SP3/Firefox3.0)
CSS のレイアウトで苦しんでいます。

 ---左ブロック -------右ブロック------------------
 |                || -定義リスト(dl)-------------|
 |                || |   タイトル(dt) 記述(dd)  ||
 |                || |   タイトル(dt) 記述(dd)  ||
 |                || ----------------------------|
 |                |-------------------------------
 ------------------

というレイアウトをしたいと思って次の HTML と CSS を作成。
test.html =============================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="test.css">
    <title>test</title>
  </head>
  <body>
    <div class="left_column">
    </div>
    <div class="right_column">
      <dl class="list">
        <dt>title1</dt>
        <dd>description1</dd>
        <dt>title2</dt>
        <dd>description2</dd>
      </dl>
    </div>
  </body>
</html>
test.css =======================================================
.left_column {
  background-color: red;
  height:500px;
  float: left;
  width: 425px;
}
.right_column {
  height: 300px;
  background-color: blue;
}
.list dt {
  float: left;
  clear: left;
  width: 60 px;
}
==================================================================

ですが、Firefox3 での表示は次のようになってしまいます。
 ---左ブロック -------右ブロック------------------
 |                || -定義リスト(dl)-            |
 |                || |    記述(dd)  |            |
 |                || |    記述(dd)  |            |
 |                || ----------------            |
 |                |-------------------------------
 ------------------
タイトル(dt)
タイトル(dt)

dl の中だけでクリアしたいのですが、なぜか左ブロックまで
クリアしてしまいます。
IE6 では意図どおりに表示。Safari でも試してみたのですが、
Firefox と同じ表示となります。異なるブラウザエンジンのう
ち Gecko と Webkit がこういう表示をするということは、CSS
の解釈としてはこちらのほうが正解なのでしょうか?
また、この問題の解決法はありますでしょうか?
どなたかご教示をお願いします。

Re[1]: float されたブロック内の dt の clear
(#44252) このトピック中2番目の投稿
(環境: Mac/Minefield)

サンプルページの様な結果になれば良いのですよね?
//homepage.mac.com/project_h2/a_test/test.html
(URL先頭にhttp:を加えてください)

XHTML transitional で書いているので HTML 4.1 ではわかりませんが、XML宣言をしていないので IE 6 で「一応」期待通りにレンダリングします。
もちろん Firefox, Safari, Opera はきちんとレンダリングします。
ただし、私が作った中では問題は起きていないですが、これが正しいのかどうかはイマイチ自身がないので、よく検証してみてください。

ポイントは
・フロートするブロック要素には幅を必ず指定すること
・dl要素内で[dt][dd]と、run-in のような結果を期待する場合は、dt 要素に float:left を指定し、dd 要素に :after で display: block と clear:left を設定すること(clearfix をキーワードに検索してみてください)
・dt には必ず width を設定し、dd には dt の幅の分だけ左側にマージンを取ること
・ピクセルで位置を合わせる場合はボーダーを絶対に使わないこと(IE 6 の問題)

オフトピですが、このようなレイアウトを IE 6 基準で考えると、今後、応用が無塚しくなるとおもいますよ。

Re[1]: float されたブロック内の dt の clear
(#44253) このトピック中3番目の投稿
(環境: WinXP SP3/SeaMonkey1.1)

> .list dt {
> float: left;
> clear: left;
> }

> dl の中だけでクリアしたいのですが、なぜか左ブロックまでクリアしてしまいます。

clear:left/clear:rightがでてきたところで、今までの全てのfloat:left/float:rightが解除されます。
float:left/float:rightはネストできません。
仕様、ですね。

<dt>にfloat:left;とclear:left;の両方を指定していますが、どのような意図でそうしているのでしょうか?
両方ある場合、まず<dt>のclear:leftが効いて<div>に指定したfloat:leftの有効範囲ではなくなり、次にその<dt>に指定してあるfloat:leftが開始されるので、それまでのブロック(左の<div>と<dl>を含む<div>)の下に来る、ということのように見えます。
<dt>にはfloat:left;だけを指定し、念のために</body>の前に<div style="clear:both;"></div>を置くと(明示的にclearを指定しておく)、当面意図している表示にはなります。(Hideさんの例は、そうなっています)
<dl>の子供の要素の一部(<dt>)にfloat:leftを指定しているが、Hideさんがおっしゃっている、以下のことはしていないので、
>・dt には必ず width を設定し、dd には dt の幅の分だけ左側にマージンを取ること
ウィンドウ幅を狭めていくと、またまた不可解な表示になっちゃいますけどね。

Re[2]: float されたブロック内の dt の clear
(#44257) このトピック中4番目の投稿
(環境: Mac/Minefield)

サンプルをよく見直してみると、最初の dd 要素に設定した clear:left によって、左側の div のフロートも解除されていますね。
これでは使えないです。すみません。

こちらの方法なら“レンダリング”上は期待通りですが、文章構造的には変です。
//homepage.mac.com/project_h2/a_test/test2.html

それと各要素の width をきちんと考えておかないと上手くいきません。

Re[3]: float されたブロック内の dt の clear
(#44259) このトピック中5番目の投稿
(環境: WinXP SP3/Firefox3.0)

hide さん、WADA さん、フォローありがとうございます。

WADA さん
>まず<dt>のclear:leftが効いて<div>に指定したfloat:leftの有効範囲
>ではなくなり、次にその<dt>に指定してあるfloat:leftが開始されるの
>で、それまでのブロック(左の<div>と<dl>を含む<div>)の下に来る、と
>いうことのように見えます。
ここの認識が間違っていました。親要素の内側でどんなに clear して
も、親要素の中だけで処理される、と思っていました。dt は必ず右領域の
左端から始まって欲しい(そしてかつfloatになって欲しい)ので、float
と clear を同時に指定していたのです(親要素の領域から出る事はない
と思っていたので)。

hide さん
例示のページまで頂いて恐縮です。
提示のソースを見せていただいて、ちょっと根が深そうなのでもう少し
補足させてください。
1 左コンテナ固定幅、右コンテナ可変幅
2 CSS 無しで表示したときに 左コンテナの内容の下に右コンテナの内容
3 dt 要素は固定幅、dd 要素は右コンテナの幅に合わせて可変幅
4 dt 要素は dd 要素の高さを超える可能性あり(dt の float の clear は必須)
5 dt dd 要素はそれぞれ空となってしまう可能性あり(同上)

1、2、3 は提示していただいたコードをヒントにどうにかなりそうですが、
4、5 は(このページ自体はテンプレートシステムを使用するため)プログ
ラム側がどのような値を返すかはわからない、というかどんな値が要素内に
入っても対応できるレイアウトとしたいのです。

Re[4]: float されたブロック内の dt の clear
(#44260) このトピック中6番目の投稿
(環境: WinXP SP3/Firefox3.0)
すみません、途中で送っちゃいました。続きです。

で、CSS 内の :after で clear するブロックを挿入する方法は非常に
参考になりましたが、IE6 で解釈されないので、4、5 の時に dt が
重なっちゃいます。

>オフトピですが、このようなレイアウトを IE 6 基準で考えると、今後、応用が無塚しくなるとおもいますよ。
もちろん、できるだけ Web標準で作って行きたいと思っています。まだまだ勉強が足りませんが(^^;; ですが、実際問題 IE6 も考慮したつくりにしなければならないので...

Re[4]: float されたブロック内の dt の clear
(#44272) このトピック中7番目の投稿
(環境: WinXP SP3/SeaMonkey1.1)

> 2 CSS 無しで表示したときに 左コンテナの内容の下に右コンテナの内容
>(snip)
> 4 dt 要素は dd 要素の高さを超える可能性あり(dt の float の clear は必須)

(2)の用件などは満たせなくなりますが、
float:left/clear:leftとfloat:right/clear:rightは個別に制御されるので、
ブロック内部(<div>の内側)の要素のfloat:left/clear:leftによる配置と、
それを内部に含む複数のブロックのfloat:right/clear:rightによる配置を共存させることは、可能です(一種の「入れ子」的な使い方)。
ただし、float:leftは<div>内で完結させて<div>の外に影響を及ぼさないようにする、float:rightが<div>の外の要素の配置に影響を及ぼさないように、float:rightによる配置は全て<div>で囲んだブロック単位で行われるようにする、などの配慮は必要になります。

iframeを二つならべて左側をfloat:leftにし、それぞれのiframeの中で別々にレンダリングさせる、というような方法も考えられます。
左のブロックは幅・高さ固定なのでOKですが、右側のブロックは、iframeでauto-height(たとえば、ウィンドウの高さとか、<FRAME>の"*"指定のようなもの)がサポートされるまでは、ちょっとしんどいかもしれませんね。

他には、(a)「左の<div>の右にfloat:leftを使用したい<dl>がある<div>」のためにfloat:leftを使用するのをやめ、他の方法(display:inlineとか)で行う、
(b) <dt>の配置にfloat:leftを使うのを止め他の方法でレイアウトする、
(c) 既定のレイアウトルールのある<dl><dt><dd>ではなく、
<div class="dl">
<div class="dt">title<div><div class="dd">description</div><div>
 |
<div>
のようにして、好きなようにレイアウト(<div>+クラス指定+CSSだけの、簡易XML)、
あたりも考えられます。

Re[5]: float されたブロック内の dt の clear
(#44276) このトピック中8番目の投稿
(環境: WinXP SP3/Firefox3.0)
うーん、なかなか難しいですね…

ということで、dl を使わずに ul で逃げることにします。
=====================================================================
<ul class="fix_title_inline_dl">
  <li><span class="title">タイトル</span><span class="description">ほにゃらら</span>
              :
</ul>
=====================================================================
.fix_title_inline_dl .title {
    width: 96px;
}
=====================================================================
レイアウトをするために下手に文書構造を複雑にするのも HTML 的に本末転倒
のような気がしますし、これで納得することにします。
済!

このトピックの全ページ / [0]

返信不可


- Child Tree -