- ベストアンサー
floatさせたdtの内容が多い場合、ddの背景と高さが合いません
- floatさせたdtの内容が多い場合、ddの背景と高さが合いません。dtを左にfloatし、ddに罫線の画像を背景で設定した場合、ddの内容が少ない時、罫線画像がdtの画像と高さが合わなくなります。
- ddにClearfixを設定すると、モダンブラウザではdtの高さとddの罫線画像の高さが合い、望んだ表示になりますが、IE6と7では同じ表示になりません。
- IE6以降とモダンブラウザの両方でdtとddを使用して左に画像、右に日付と新着内容を並べる希望の表示を実現する方法はありますか？
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
興味あるお題なのでちょっとトライしてみました。 ただし、以下はdtの子要素のimgが常にW50px×H50pxの固定サイズである…と仮定した場合に限ります。 ---------------------------------------------------------------------- 【HTML】 ---------------------------------------------------------------------- <?xml version="1.0" encoding="shift_jis"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <title>サンプル</title> <link href="./css/sample.css" type="text/css" rel="stylesheet" media="all" /> </head> <body> <div id="index"> <dl class="news"> <dt><img src="img/photo.jpg" alt="画像の説明" width="50" height="50" /></dt> <dd><span>2009.01.01</span><br /> <a href="#">新着情報のテキストが入ります。ここは短いテキストです。</a></dd> <dt><img src="img/photo.jpg" alt="画像の説明" width="50" height="50" /></dt> <dd><span>2009.01.01</span><br /> <a href="#">新着情報のテキストが入ります。ここは長いテキストです。ここは長いテキストです。ここは長いテキストです。</a></dd> <dt><img src="img/photo.jpg" alt="画像の説明" width="50" height="50" /></dt> <dd><span>2009.01.01</span><br /> 新着情報のテキストが入ります。ここは短いテキストです。</dd> </dl> </div> </body> </html> ---------------------------------------------------------------------- 【CSS】 ---------------------------------------------------------------------- #index { width: 300px;←現状の指定がわからないのでとりあえず適当な幅を設定してみました。 } #index dl.news { zoom: 100%;←これを指定しておかないと、IE6でdlのボーダーがdtとddの1セット毎に引かれてしまう様なので… margin: 0; padding: 8px 15px; border: #999 1px solid; } #index dl.news dt { width: 50px; height: 50px; margin: 0; } #index dl.news dt img { vertical-align: bottom; } #index dl.news dd { min-height: 50px; _height: 58px; margin: -50px 0 6px 0; padding: 0 0 8px 57px; background: url(../img/linet.gif) repeat-x bottom; line-height: 125%; } ---------------------------------------------------------------------- 質問者様は既に色々おわかりになってらっしゃる方だと思いますので、ポイントだけ。 ・ddは必ずdt以上の高さを確保できる様に、min-heightで50pxを指定。IE6ではこのプロパティが未実装の為、アンダースコア・ハックでheightプロパティで代用。ここの高さが58pxとなっているのはIE6ではこのサンプル文書（XML宣言付のXHTML1.1）の後方互換モードでは、上下paddingがheightの値の中に含まれしまう為、その分を足している為です。 ・ddのレンダリング開始位置の上の基点をマイナス・マージンでdtと同じ位置に引き戻しました。 ちょっと簡単過ぎる方法なんですが、一応これでIE6/7、Firefox2/3、Safari3、Opera9.25、で確認した限りでは特に問題はない様です。 最初にお断りした通り、dtの高さと幅が一律ではない場合には使えませんので、その場合は忘れて下さい。 ※マークアップ云々の問題については、ANo.3様の「photo.jpgは「NEW!」とかの類の画像」という推測通りであるならば、やはり「更新履歴をdl要素、日付をdt、更新内容をddでマークアップしdt要素の背景画像としてCSSで「NEW!」の画像を設定」というご指摘の方法が適切だと思います。その様な構成の更新情報であるなら、私もそうしています。
その他の回答 (3)
- KI401
- ベストアンサー率53% (44/82)
回答と直接の関係はありませんが、マークアップについて。 直接関係はないので、読まなくてもいいです。 # 恐らくレイアウトに関しては#1さんの方法で行けるかと。 dlはDefinition List、つまり定義リストですよね。 dtはDefinition Term、定義語で、 ddはDefinition Description、定義（の説明）です。 しかし質問者さんのマークアップでは、"photo.jpg"という画像（altテキストなし）が 定義語句で、それに対する説明文が「新着情報」になっています。 複数の同じ画像に別々の「定義」が与えられているのは変ですよね？ # 恐らくphoto.jpgは「NEW!」とかの類の画像だと思いますが・・・。 dl要素は「定義」でなくても、語句と説明がセットになっているような場合は 拡大解釈してマークアップしてもいいと決められているので、 更新履歴のような場合にdlを使うのは良いことだと思います。 僕も、更新履歴は「更新した日付」と「更新した内容」がセットになっている、 と考えて更新履歴をdl要素、日付をdt、更新内容をddでマークアップし、 dt要素の背景画像としてCSSで「NEW!」の画像を設定するようにしています。 # もう一つ、表として捉えるのもアリですね。 これはあくまで僕は更新履歴を論理的にこう捉えている、というだけの話です。 論理要素によるマークアップで、絶対に正しい答えはないと思うので、 自分で正しいと思える理由があるなら、それでも全く問題はないと思います。 dl要素をこだわっているようなので、ひょっとしたら新着情報を論理要素として定義リストと 捉えているのではないかと勝手に推測して、勝手にこんなコメントをつけましたが、 外していたらごめんなさい。
補足
すみません、私の説明不足で申し訳ないです。 <dt>の中に入るimgは新着内容の詳細ページで表示される 画像のサムネールを入れるつもりです。 <dl>の内容自体が新着情報なので、NEWなど更新のマークは 表示する必要ないだろう…と判断しました。 サムネールの画像が<dt>定義で、画像の説明<dd>が新着内容 …というつもりです。 言葉が足らずすみません。他に読んだ方で＃3さんと同じ 解釈をされた方がいるかもしれませんので、 私の説明不足に補足できて良かったです。 ありがとうございます。
altの値は適当です。消し忘れていました・・・ xhtmlではalt必須なので、特にdlのような定義リストの時は何か書いておいてください。
面白い指定だと思いますが、floatに限らずボックスの横並びはIEで下の方を揃えるのは難しいです。 dlはそれなりに使用に制限が出やすい要素なので・・・ ちょっと別の方法で試してみました。 一部html等追記する部分もありますが、スタイルは実現できていると思います。(画像がないのでボーダーで指定しています。適宜変えてみてください) #index div.news { width:800px; border: #999 1px solid; } #index div.news dl { padding: 8px 15px; } #index div.news dt { display:inline; width: 107px; margin:0 0 6px; border-bottom:1px solid #000; vertical-align:bottom; } html>/**/body #index div.news dt { display:-moz-inline-box !important; /* firefox2以下 */ display:inline-block !important; } #index div.news dt img { padding-right:57px; display:inline; } #index div.news dd { display:inline; background:#f00; width:653px; border-bottom:1px solid #000; margin: 0 0 6px; padding: 0 0 8px 0; line-height: 125%; vertical-align:bottom; } html>/**/body #index div.news dl dd { display:-moz-inline-box !important; /* firefox2以下 */ display:inline-block !important; } <div class="news"> <dl> <dt><img src="img/photo.jpg" width="50" height="50" alt="あああああああああああああ" /></dt><!-- --><dd><span>2009.01.01</span><br /> <a href="#">新着情報のテキストが入ります。</a></dd> <dt><img src="img/photo.jpg" width="50" height="50" alt="a" /></dt><!-- --><dd><span>2009.01.01</span><br /> <a href="#">新着情報のテキストが入ります。</a></dd> <dt><img src="img/photo.jpg" width="50" height="50" alt="a" /></dt><!-- --><dd><span>2009.01.01</span><br /> 新着情報のテキストが入ります。</dd> </dl> </div> firefox2やモダンブラウザに対応するため、一部vaildでない記述になっています。 できればモダンブラウザ用の指定のhtml>/**/bodyを追加せずに指定し、条件付コメントを利用してのIEに別のスタイルをあてる使用をオススメします。
お礼
altの補足までご丁寧にありがとうございます。 display:inline;の設定など参考になりました。 hackなども知識が浅いので、勉強になります。ありがとうございます。 このまま、このソースを使わせて頂いたのですが、 画像と日付と新着内容がバラバラに配置されてしまいました。 ＃1さんが他にCSSリセットなどされていて、その影響で きれいに配置されているとしたら、良ければこのソース以外に 影響を与えている設定もご掲載頂けると有難いですm(__)m
補足
お礼で他にも影響を与えている設定を…と申し上げましたが、 この質問が解決致しましたので、質問を締め切らせて頂きます。 親切にアドバイス頂きまして、どうもありがとうございました。
お礼
懇切丁寧なご説明ありがとうございます。 レイアウト調整が複雑になる…という理由からXML宣言なしの XHTML1.0標準モードなのですが、きれいに表示されました。 <dt>の中のimgはW50px×H50pxで固定なので、このまま使わせて 頂こうと思います。 色々検索した中で、他にもマイナスマージンを使う方法がありましたが、 私ではうまく行きませんでした。。 min-heightとzoom:100%がポイントなんですね。 キレイに表示され、とてもスッキリしました！ これから何度となく、この方法を使うことがあると思います。 本当にありがとうございます！