• ベストアンサー

dtで横並び

dt同士を横並びにしてその下にddを入れることは出来るでしょうか リンク画像の下にリンク先の名前が入る感じにしたいのです あと他のサイトを参考にしてみたところ以下を 必要な分記述していましたがもっとシンプルにしたいのです <dl> <dt><a href=""><img src="" alt="" title=""></a></dt> <dd><a href=""></a></dd> </dl> divやテーブルを使ったほうがいいのでしょうか？

  • dct18
  • お礼率69% (23/33)

質問者が選んだベストアンサー

  • ベストアンサー
  • salonpath
  • ベストアンサー率48% (194/399)
回答No.1

任意のdtとddをブロックに出来たら可能なんでしょうが、dlの直下にはdtとddしか入れられないみたいですから dtとddが1セットのdlをfloatしていく方法しか思いつかないですね。 <dl> <dt><a href=""><img src="" alt="" title=""></a></dt> <dd><a href=""></a></dd> </dl> <dl> <dt><a href=""><img src="" alt="" title=""></a></dt> <dd><a href=""></a></dd> </dl> dl{ width:100px; float:left; }

dct18
質問者

お礼

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

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. その他（プログラミング・開発）

関連するQ&A

  • 定義リストの横並びと<DIV>要素の改行

    スタイルシートでテーブルのように横並びでレイアウトさせた定義リストの<dt>の内容にリンクを張っているのですが、 FirefoxとOperaで確認すると、リンク１とリンク２にカーソルを持っていってもカーソルの形が変わらず、クリックしても飛べません。 文字色はリンク用のスタイルシートを反映した色になっています。 スタイルシートの記述に問題があるのだと思うのですが、どこが悪いのかが分かりません。 アドバイス頂けると幸いです。 <dl id="sample"> <dt><a href="aaa.html">リンク１</a> <dd>説明 <dt><a href="bbb.html">リンク２</a> <dd>説明 <dt><a href="ccc.html">リンク３</a> <dd>説明 <dt><a href="ddd.html">リンク４</a> <dd>説明 </dl> dl#sample { margin-left: 1.5em; float: left; width: 450px; padding: 1px 1px 0; color: #000; } dl#sample dt { float: left; clear: both; width: 70px; margin-right: 10px; margin-bottom: 1px; padding: 2px 0 2px 2px; } dl#sample dd { float: left; width: 350px; margin-bottom: 1px; padding: 2px; } --------------------------------------- それともう一つ、 http://jquery.andreaseberhard.de/toggleElements/ このJavascriptを利用してDIV要素を開閉しているのですが、 DIV要素を以下のように二つ並べた場合 <div class="toggler-c" title="タイトル１"> <p>内容</p> </div> <div class="toggler-c" title="タイトル２"> <p>内容</p> </div> 二つとも閉じた状態の時、改行せずに タイトル１タイトル２ と表示されるのですが、これはスタイルシートの記述に問題があるからなのでしょうか。

    • ベストアンサー
    • HTML
  • DD,DT,DDを横並び。paddingとmarginと無指定で

    DD,DT,DDを横並び。paddingとmarginと無指定で 下記の内どれが一番使われているのでしょうか？ 理由も教えていただけれるとありがたいです。 dl,dt,dd{ margin:0; padding:0;} dt{ float:left; width:8em; } .list0 dd{ padding-left:7em;} .list2 dd{ margin-left:8em;} <div> <dl class="list0"> <dt>短いタイトル</dt> <dd>短い説明、短い説明、短い説明</dd> <dt>短いタイトル</dt> <dd>短い説明、短い説明、短い説明</dd> </dl> <br /> <dl class="list1"> <dt>短いタイトル</dt> <dd>短い説明、短い説明、短い説明</dd> <dt>短いタイトル</dt> <dd>短い説明、短い説明、短い説明</dd> </dl> <br /> <div class="list2"> <dl> <dt>短いタイトル</dt> <dd>短い説明、短い説明、短い説明</dd> </dl> <dl> <dt>短いタイトル</dt> <dd>短い説明、短い説明、短い説明</dd> </dl> </div> </div>

    • ベストアンサー
    • HTML
  • 定義リスト　dl　dd　dt

    困っています。お願いします。 このソースのレイアウトとしましては、 dl1、dl2、dl3と横に並んでいます。 各dtに画像、ddにテキストです。 このカタチが2行続いています。 3行目は、三列の一番左にdl7が置かれるかたちです。 全体としては、 dl1　dl2　dl3 dl4　dl5　dl6 dl7 という感じです。 dl1～dl7まで全て、同じサイズの画像とddにテキストが入っています。 問題はレイアウトではなく、リンクです。 dl1～dl7のdtの中の画像には全てリンクがはれるのですが、 dd部分の一部テキストにはリンクがはれません。 リンクがはれるのは、dl5、dl6、dl7です。 後はリンクを設定しても、リンクがはれない状態です。 いろいろ試してみたのですが、原因がわかりません。 一つ思うことは、dl1、dl2、dl3、dl4の下にはdl4、dl5、dl6があるわけなので、何か下にあるとリンクが効かないのかなあとも思います。 どなたか、教えて頂きたいです。 分かりづらい説明で申し訳ないのですが、宜しくお願い致します。 <dl id="dl1"> 　　<dt id="dt1"> 　　　　<a href="#"><img src="img/image1.jpg" /></a> 　　</dt> 　　<dd class="dd1"> 　　　　<a href="#">ああああ</a> 　　</dd> </dl> <dl id="dl2"> 　　<dt id="dt2"> 　　　　<a href="#"><img src="img/image1.jpg" /></a> 　　</dt> 　　<dd class="dd1"> 　　　　<a href="#">いいいい</a> 　　</dd> </dl> このカタチをdl7まで繰り返し、htmlに記述します。 次にcssです。 #dl1 { position: relative; width: 170px; height: 170px; padding: 10px 10px 0px 35px; margin: 0px 0px 0px 0px; float: left; } #dt1 a img { text-decoration: none; border-style: none; } #dt1 a:hover img { visibility: hidden; text-decoration: none; border-style: none; } #dt1 a { display: block; width: 170px; height: 170px; background-position:left top; background-repeat:no-repeat; text-decoration: none; } #dt1 a:hover { background-image: url(img/image1-2.jpg); text-decoration: none; } こちらも同様に、dt7まで繰り返しcssを指定。 cssの中身は、画像にホバーしたら、画像が切り替わるようになっています。 次に、テキストのdd部分のcssです。 こちらはクラス指定で、dl1～dl7までの各dd使用。 .dd1 { width: 170px; height: 40px; margin: 0px; color: #ffffff; font-size: 12px; line-height: 16px; padding: 0; } .dd1 a { padding: 0; margin: 0; text-decoration: none; color: #ffffff; } .dd1 a:hover { text-decoration: underline; color: #ffffff; } 長々と失礼いたしました。

    • ベストアンサー
    • HTML
  • 画像の様なテーブルレイアウトにするには？

    画像の様なテーブルレイアウトにするにはどうすればいいのでしょうか IE9なら正しく表示されます。 何処を修正したかも教えて下さい ＊＊＊＊＊＊＊＊＊＊＊＊＊＊index.html＊＊＊＊＊＊＊＊＊＊＊ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <link rel="stylesheet" type="text/css" href="css/base.css" > </head> <body> <div id="page"> <div id="header"> <p>header</p> <!-- /#header--></div> <div id="contents"> <!--メインコンテンツ（商品リスト）--> <div id="main"> <ul id="products-list"> <!-- 商品情報 --> <li class="products"> <dl> <dt><a href="#"><img src="img/1.jpg" alt="" class="product-img" /></a></dt> <dd>商品名</dd> <dd>価格：&yen;200,000</dd> <dd><a href="#">商品詳細ページ</a></dd> <dd><a href="#"><img src="cart.jpg" alt="ショッピングカート" width="" height="" /></a></dd> </dl> </li> <!-- // 商品情報 --> <!-- 商品情報 --> <li class="products"> <dl> <dt><a href="#"><img src="img/1.jpg" alt="" class="product-img" /></a></dt> <dd>商品名</dd> <dd>価格：&yen;200,000</dd> <dd><a href="#">商品詳細ページ</a></dd> <dd><a href="#"><img src="cart.jpg" alt="ショッピングカート" width="" height="" /></a></dd> </dl> </li> <!-- // 商品情報 --> <!-- 商品情報 --> <li class="products"> <dl> <dt><a href="#"><img src="img/1.jpg" alt="" class="product-img" /></a></dt> <dd>商品名</dd> <dd>価格：&yen;200,000</dd> <dd><a href="#">商品詳細ページ</a></dd> <dd><a href="#"><img src="cart.jpg" alt="ショッピングカート" width="" height="" /></a></dd> </dl> </li> <!-- // 商品情報 --> <!-- 商品情報 --> <li class="products"> <dl> <dt><a href="#"><img src="img/1.jpg" alt="" class="product-img" /></a></dt> <dd>商品名</dd> <dd>価格：&yen;200,000</dd> <dd><a href="#">商品詳細ページ</a></dd> <dd><a href="#"><img src="cart.jpg" alt="ショッピングカート" width="" height="" /></a></dd> </dl> </li> <!-- // 商品情報 --> <!-- 商品情報 --> <li class="products"> <dl> <dt><a href="#"><img src="img/1.jpg" alt="" class="product-img" /></a></dt> <dd>商品名</dd> <dd>価格：&yen;200,000</dd> <dd><a href="#">商品詳細ページ</a></dd> <dd><a href="#"><img src="cart.jpg" alt="ショッピングカート" width="" height="" /></a></dd> </dl> </li> <!-- // 商品情報 --> </ul> <!-- /#main--></div> <!--メインコンテンツ（商品リスト）--> <div id="sub"> <p>sub</p> <!-- /#sub--></div> <!-- /#contents--></div> <div id="footer"> <p>footer</p> <!-- /#footer--></div> <!--/#page --></div> </body> </html> ＊＊＊＊＊＊＊＊＊＊＊＊＊base.css＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ /* CSS Document */ body{ text-align:center; } #page{ width:860px; height:600px; margin:0 auto; background:#690; text-align:left; } #header{ width:860px; height:100px; background:#D1D1DE } #contents{ width:840px; height:380px; margin:10px; padding-left:0; background:#690; } #main{ float:right; width:570px; height:380px; background:#fff; } #sub{ float:left; width:260px; height:380px; background:#fff; } #footer{ width:860px; height:100px; clear:both; background:#fff; background:#D1D1DE } .products{ list-style-type:none; float:left; width:130px; margin:10px 0px 0px 10px; padding:0px; height:170px; background:#F3F59C } .product-img{ margin:0px; padding:0px; width:50px; height:50px; text-align:center; border:none; } #products-list{ margin:0px; padding:0px; }

    • 締切済み
    • CSS
  • 横並びにするCSS

    以下のdivタグ内のimgタグを横並びに表示するCSSは .container{ display:flex; } で合っていますか？ <body> <section class="container cf"> <div class="hoge"><img src="img1.jpg" alt=""></div> <div class="hoge"><img src="img2.jpg" alt=""></div> <div class="hoge"><img src="img3.jpg" alt=""></div> <div class="hoge"><img src="img4.jpg" alt=""></div> </section> </body>

    • ベストアンサー
    • CSS
  • CSSで横並び

    divタグ内のimgタグを横並びに表示するCSSは、 .container cf{ display:flex; } で合っていますか？ <body> <section class="container cf"> <div class="hoge"><img src="img1.jpg" alt=""></div> <div class="hoge"><img src="img2.jpg" alt=""></div> <div class="hoge"><img src="img3.jpg" alt=""></div> <div class="hoge"><img src="img4.jpg" alt=""></div> </section> </body>

    • ベストアンサー
    • CSS
  • よろしくお願いいたします。cssを使ってロールオーバーを横並びにしたい

    よろしくお願いいたします。cssを使ってロールオーバーを横並びにしたいと考えております。そこで以下のような記述をしたいと考えているのですがうまく行かず、また原因もわからずに困っておます。どなた様かご指導のほどよろしくお願いいたします。 まず以下の記述をしました。 ［html］ <div id="menu"> <ul> <li id="menu1"><a href="a/index.html" title="HOME" ><img src="img/1.gif" alt="HOME" onmouseover="this.src='img/11.gif' onmouseout="this.src='img/1.gif'" /></a></li> <li id="menu2"><a href="b/index.html" title="ホームページ製作"><img src="img/3.gif" alt="HOME" onmouseover="this.src='img/33.gif' onmouseout="this.src='img/3.gif'" /></a></li> <li id="menu3"><a href="c/index.html" title="ネットショツプ製作"><img src="img/4.gif" alt="HOME" onmouseover="this.src='img/44.gif' onmouseout="this.src='img/4.gif'" /></a></li> <li id="menu4"><a href="d/index.html" title="SNSサイト製作"><img src="img/6.gif" alt="HOME" onmouseover="this.src='img/66.gif' onmouseout="this.src='img/6.gif'" /></a></li> <li id="menu5"><a href="e/index.html" title="SEOプロモーション"><img src="img/7.gif" alt="HOME" onmouseover="this.src='img/77.gif' onmouseout="this.src='img/7.gif'" /></a></li> <li id="menu6"><a href="f/index.html" title="出版・印刷・その他"><img src="img/8.gif" alt="HOME" onmouseover="this.src='img/88.gif' onmouseout="this.src='img/8.gif'" /></a></li> <li id="menu7"><a href="g/index.html" title="お問合せ・御注文"><img src="img/5.gif" alt="HOME" onmouseover="this.src='img/55.gif' onmouseout="this.src='img/5.gif'" /></a></li> </ul></div> ［css］ #menu ul{ list-style-type:none; } #menu ul li{ display:inline; } http://desktop10.web.fc2.com/test.html 上記URLにアップしています。よろしければ見てみてください。 画像も、横並びにならず、マウスを合わせたときの画像も変化しません。また、ブラウザ上の左下に ページでエラーが発生しました。と出てしまいます。 お手数では御座いますがどなた様かご教示をお願いできませんでしょうか？ わたしとしては、以下のような感じにしたいと考えております。 http://desktop10.web.fc2.com/test1.html なお、一応記載させて頂きますが画像の中に「ホームページ製作」や「SNS」等と・・・ありますが、私は 現在cssの学習をしており、特別パソコン関係の商売をしているわけでもありません。ただ、今後の自分のために色々と出来ればよいと考えているところであります。 初心者では御座いますが、どなた様かご指導のほどよろしくお願いいたします。

    • ベストアンサー
    • HTML
  • リストを一行にせずに横並びにする方法

    リストタグを一行にすると横並びにはなりますが、ソースが見ずらいです…。 コメントを使わないで横並びにする方法はありますか？ ■html <ul><!-- --><li><a href="#"><img src="images01.gif" alt="" width="130" height="47" /></a></li><!-- --><li><a href="#"><img src="images02.gif" alt="" width="130" height="47" /></a></li><!-- --></ul> ■css li { display: inline; } ↓のように<!---->をとっても表示を一行にする方法があれば教えてください。 <li><a href="#"><img src="images01.gif" alt="" width="130" height="47" /></a></li> <li><a href="#"><img src="images02.gif" alt="" width="130" height="47" /></a></li>

  • 角丸教えてください。

    HTMLを勉強しています。 下記にソースに丸みを帯びたセルをつけたいのですが わかりません。 わかりやすくおしえていだけないでしょうか？ よろしくお願いいたします。 HTML <div class="item-group"> <h3><img src="URL" alt="商品別検索" /><p>　</p><td height="400" bgcolor="#c0c0c0"> </h3> <dl> <dt>▼test</dt> <dd><a href="http://URL">・てすと</a></dd> <dd><a href="http://">・★★★</a></dd> <dt>▼test</dt> <dd><a href="http://">・★★★</a></dd> <dd><a href="http://">・★★★</a></dd> <dd><a href="http://">・★★★</a></dd> <dd><a href="http://">・★★★</a></dd> <dt>▼作成中</dt> <dd><a href="http://">・★★★</a></dd> <dd><a href="http://">・★★★</a></dd> <dd><a href="http://">・★★★</a></dd> <dt>▼作成中</dt> <dd><a href="http://">・★★★</a></dd> <dd><a href="http://">・★★★</a></dd> <dd><a href="http://">・★★★</a></dd> <dd><p><a href="http://★★★/">商品一覧</a></p></dd> </dl> </div> になります

    • ベストアンサー
    • HTML
  • floatさせたdtの内容が多い場合、ddの背景と高さが合いません

    サイトの新着情報を<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; }

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する