サイトの新着情報を<dl><dt><dd>で組んでいます。
罫線の上に左に画像、右に日付と新着内容が並んでいるように
見せたいのですが、<dt>を左にfloatし<dd>を回り込ませ、
<dd>に罫線の画像を背景で設定た場合、<dd>の内容が少ない時、
罫線画像が左の<dt>の画像と高さが合いません。
<dd>にClearfixを設定すると、モダンブラウザでは<dt>の高さと
<dd>の罫線画像の高さが合い、希望通りの表示になりました。
しかし、IE6と7ではモダンブラウザと同じ表示にはなりません。
float以外の方法でも構いませんので、IE6以降とモダンブラウザ
ともに<dl><dt><dd>で上記希望の表示を実現させる方法がありましたら、
アドバイス頂けないでしょうか、よろしくお願いしますm(__)m
ソースは以下になります。
[HTML]
<dl class="news">
<dt><img src="img/photo.jpg" width="50" height="50" /></dt>
<dd><span>2009.01.01</span><br />
<a href="#">新着情報のテキストが入ります。</a></dd>
<dt><img src="img/photo.jpg" width="50" height="50" /></dt>
<dd><span>2009.01.01</span><br />
<a href="#">新着情報のテキストが入ります。</a></dd>
<dt><img src="img/photo.jpg" width="50" height="50" /></dt>
<dd><span>2009.01.01</span><br />
新着情報のテキストが入ります。</dd>
</dl>
[CSS]
#index dl.news {
padding: 8px 15px;
border: #999 1px solid;
}
#index dl.news dt {
width: 50px;
float: left;
clear: left;
}
#index dl.news dd {
margin: 0 0 6px;
padding: 0 0 8px 57px;
background: url(../img_cmn/linet.gif) repeat-x bottom;
line-height: 125%;
}
#index dl.news dd:after {/* clearfix */
content: ".";
display: block;
visibility: hidden;
height: 0.1px;
font-size: 0.1em;
line-height: 0;
clear: both;
}
No.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!」の画像を設定」というご指摘の方法が適切だと思います。その様な構成の更新情報であるなら、私もそうしています。
懇切丁寧なご説明ありがとうございます。
レイアウト調整が複雑になる…という理由からXML宣言なしの
XHTML1.0標準モードなのですが、きれいに表示されました。
<dt>の中のimgはW50px×H50pxで固定なので、このまま使わせて
頂こうと思います。
色々検索した中で、他にもマイナスマージンを使う方法がありましたが、
私ではうまく行きませんでした。。
min-heightとzoom:100%がポイントなんですね。
キレイに表示され、とてもスッキリしました!
これから何度となく、この方法を使うことがあると思います。
本当にありがとうございます!
No.3
- 回答日時:
回答と直接の関係はありませんが、マークアップについて。
直接関係はないので、読まなくてもいいです。
# 恐らくレイアウトに関しては#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さんと同じ
解釈をされた方がいるかもしれませんので、
私の説明不足に補足できて良かったです。
ありがとうございます。
No.1
- 回答日時:
面白い指定だと思いますが、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
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
XML画像データををHTMLで簡単に...
-
レスポンシブ対応のHTML・CSS(...
-
ボタンをセル内一杯に表示させ...
-
footerの背景が切れて、背景画...
-
favicon.ico はもういらない?
-
DIVタグについて
-
UDP通信を使うチャットプログラ...
-
htmlの文字が縦書きになる
-
HTML属性での「""」 「''」違い
-
widthやheightの数値に単位(px...
-
smallにtext-allignが効かない
-
1時間30分を簡単に表したいで...
-
htmlのolやulなどlistにtitleや...
-
リストの数字のフォントサイズ...
-
【ヒトの神秘】美男美女から何...
-
<h1>、<h2>と<p><div>の行間を...
-
input type="hidden"で取得した...
-
div要素が重なってします
-
その要素がjQueryでremove()済...
-
html/cssの、navを2段にする...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リンクを知らせる手のマークが...
-
ボタンをセル内一杯に表示させ...
-
HTMLのIMAGEに。。
-
inputタグでサーバにデータを送...
-
UDP通信を使うチャットプログラ...
-
画像の場合のみ、下線を消す方...
-
画像のサイズが変わらない
-
機種依存文字、m2(平方メート...
-
XML画像データををHTMLで簡単に...
-
画像をクリックして元に戻すには
-
Dreamweaverで画像⇔画像のアン...
-
favicon.ico はもういらない?
-
cssで、チェックボックスの画像...
-
下記が私のHPのタグなのですが
-
同一URLの連続アクセス方法
-
アップロードするとレイアウト...
-
HTMLタグのDL DT DDを使ってli...
-
ルートパスの動作確認
-
htmlで画像を2個ずつ並べていき...
-
画像リンクの周りに線が出ます
おすすめ情報