単語の右寄せ配置で１行下がるのを防ぐ方法
- 旧Internet Explorerで、単語の右寄せ配置を行うと１行下がってしまう場合、正しい配置を行う方法をご紹介します。
- 調べたり試行錯誤しても上手くいかない場合は、タイトルとTOPの位置を入れ替えることで、目的の配置を実現することが可能です。
- ただし、タイトルとTOPの位置を入れ替えると、流れが変わってしまうことがありますので、注意が必要です。
- ベストアンサー
単語の右寄せ配置で１行下がる
”TOP”のリンクを”タイトル”と 同じ行の右端にしたいのですが 旧Internet Explorerだけ１行下がります。 同じ行にしたいのですが。どうすればよいでしょうか？ --------------------------------- 上の例、タイトル TOP 説明文説明文説明文、、、 --------------------------------- 下の例、タイトル TOP 説明文説明文説明文、、、 --------------------------------- 上の例にしたいけど、下の例になってしまう、、、 <dl> <dt>タイトル <a href="#" style="float:right;">TOP</a></dt> <dd>説明文説明文説明文、、、</dd> </dl> 上記のdtとddは例なので１つですが連続で複数設定しています。 dt内はインラインしかできないようなのでＰやブロックにしないでフロートさせました。 タイトルとTOPを逆にしたら可能ですが流れがなんか変ですし、、、 ハックもできれば使いたくないのですが、どうでしょう？ 調べたり色々やったのですがわかりません＿/￣|○
- takumana20
- お礼率91% (434/473)
- HTML
- 回答数4
- ありがとう数14
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
あーじゃあpositionはどうだろ dt{ position:relative; } dt a{ position:absolute; top:0; right:0; }
その他の回答 (3)
- zeff
- ベストアンサー率69% (137/198)
タイトルをspanで括って左にfloatさせてみました。 IE6で動作確認済み。 当然ですがdtのwidth調整が必要です。 <dl> <dt style="width:200px;"><span style="float:left;">タイトル</span><a style="float:right;" href="#">TOP</a></dt> <dd style="clear:both;">説明文説明文説明文、、、</dd> </dl>
お礼
ありがとうございます。やっぱり、分けないとできないですよね。 もっと簡単にできると思ってたのですが難しいですね。
補足
<dl> <dt><a href="#" style="float:right;">TOP</a>タイトル</dt> <dd>説明文説明文説明文、、、</dd> </dl> 最初にアンカーを前にして、タイトルを後ろ入れ替えればば、たぶん見た目は揃うのですけど、意味が違うような気がするんです。どうでしょうか？
- ORUKA1951
- ベストアンサー率45% (5062/11036)
もう少し詳しい情報が必要。 それは文書構造上どこに位置するのか？ <body> <dl> <dt> <dd> 何の定義リストなのか？
補足
<body> <div> <div> <h1></h1> <p></p><p></p> </div> <div> <h2></h2> <ul> <li></li><li></li><li></li><li></li><li></li> </ul> <h3></h3> <dl> <dt>タイトル <a href="#" style="float:right;">TOP</a></dt> <dd>説明文説明文説明文、、、</dd> <dt>タイトル <a href="#" style="float:right;">TOP</a></dt> <dd>説明文説明文説明文、、、</dd> <dt>タイトル <a href="#" style="float:right;">TOP</a></dt> <dd>説明文説明文説明文、、、</dd> </dl> </div> </div> --------------------------------- Ｑ＆Ａです。 HTML上部の<ul><li>に各質問項目がありまして、 <li>の質問項目をクリックすると、<dt>に移動します。 その下の<dd>で説明します。 縦長になるので、TOPへ戻るのリンクを右側に置いて、行ったり来たり便利にしたいのです。でも、このTOPのせいで隙間を作りたくないのです。
- salonpath
- ベストアンサー率48% (194/399)
text-align:right;って効きませんでしたっけ？
関連するQ&A
- dlタグの中にdivは使える？
dlタグの中で、dtタグとddタグを一つのdivで囲ってもよいのでしょうか？？ 以下のようなかたちなのですが・・・。 使い方として間違っているのでしょうか？？ ↓ ------------------------------------------------ <dl> <div class="aaa"> <dt>タイトル01</dt> <dd> <h4>説明文説明文説明文説明文説明文説明文</h4> <p><img ・・・・・></p> </dd> </div> <div class="aaa"> <dt>タイトル02</dt> <dd> <h4>説明文説明文説明文説明文説明文説明文</h4> <p><img ・・・・・></p> </dd> </div> <div class="aaa"> <dt>タイトル03</dt> <dd> <h4>説明文説明文説明文説明文説明文説明文</h4> <p><img ・・・・・></p> </dd> </div> </dl> ------------------------------------------------ dlタグの中には直接dtタグとddタグしか入れることができないということのようですが、 これはdivは入れられないということになるのでしょうか？？ （dtはインライン要素のみ、ddはブロック要素もインライン要素も使えるということなので、 ddの中ではdivが使えると思うのですが・・・。） また、もしdivで囲えないとしたら、 今回の場合は、それぞれを一つのdlで囲ってしまうべきなのでしょうか？？ ご存知の方いらっしゃいましたら、よろしくご指導ください。お願いします。
- ベストアンサー
- CSS
- 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
- dtで横並び
dt同士を横並びにしてその下にddを入れることは出来るでしょうか リンク画像の下にリンク先の名前が入る感じにしたいのです あと他のサイトを参考にしてみたところ以下を 必要な分記述していましたがもっとシンプルにしたいのです <dl> <dt><a href=""><img src="" alt="" title=""></a></dt> <dd><a href=""></a></dd> </dl> divやテーブルを使ったほうがいいのでしょうか？
- ベストアンサー
- その他（プログラミング・開発）
- ddの内容が多い時のdtの背景を伸ばしたい
dtとddをfloatで横並びにしています。 dtの背景色が途中で切れてしまいます。 例えば、 <dl> <dt>場所 </dt> <dd>あいうえお市かきくけ町<br /> さしすせ公園<br /> 長文～～～～～～… </dd> </dl> とした場合。dtには背景色を指定、ddの内容が複数行あってもdtの背景色が1行分だけで終わってしまいます。 ddの内容が収まっている高さまでdtの背景色を伸ばすにはどうしたら良いでしょうか？ よろしくお願いします。
- ベストアンサー
- CSS
- ボックスに高さが設定できません。
h4タグに高さを設定して、そのボックスの一番下に文を表示させたいのですが、幅は設定できるのですが、高さが変わりません。 #wrapperの中の#contentsの中の#subconの中の#menuの中に下記のようにしています。 <h4>~</h4> <dl> <dt>~</dt> <dd>~</dd> </dl> <h4>~</h4> <dl> <dt>~</dt> <dd>~</dd> </dl> と、これをあと三回くらい繰り返しています。 <dl>や<dt>や<dd>には高さを設定できます。 なぜでしょうか？ これでわかるでしょうか？ お願いします。
- ベストアンサー
- HTML
- 入れ子にしたddタグをcssで制御できません。
入れ子にしたddタグのマージンをcssで指定してみましたが、うまくいきません。 </dd> <dl> <dt>111111</dt> <dd>22222222222222222</dd> <dd>33333333333</dd> <dt>４４４４４４</dt> <dd>５５５５５５５</dd> <dl> <dt>６６６６６６６６</dt> <dd>７７７７７７７７７</dd> </dl> </dd> </dl> のようにｄｄの中にまたdlから始まるのを入れ子にしました。 それで、cssで .hoge dd{ color:#FFFFFF; margin:10px; } とすると、ddタグの文字が白くなります。それはわかるのですが、上の入れ子の例の７７７７７７のように入れ子になったddだけにスタイルシートを掛けたいのです。 試しに .hoge dl dt dd dl dt dd{ color:#FFFFFF; margin:10px; } や、 .hoge dd dl dt dd{ color:#FFFFFF; margin:10px; } を試してみましたが、うまくいきませんでした。 どうしたら、入れ子の中のddだけにスタイルシートを適用できるようになりますでしょうか。もしくは、このようなddを入れ子にする方法は使わないのでしょうか。
- ベストアンサー
- HTML
- cssを用いる表の作り方
いつもいつもお世話になっております。 cssを用いた表の作り方で迷っています。 dl,dt,ddを使う方法、divのみを使う方法を試しましたが、納得のいく見栄えになりません。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>てすと</title> <meta http-equiv="content-type" content="text/html; charset=shift-jis"> <meta http-equiv="imagetoolbar" content="no"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> </style> </head> <body> <dl id="sample3"> <dt>施設名</dt> <dd>あああああああああああああああ</dd> <dt>所在地</dt> <dd>いいいいいいいいいいいいいいいいいいいいいいい</dd> <dt>職員体制</dt> <dd>うううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううう</dd> <dt>アクセス</dt> <dd> <ul> <li>・えええええええええええええええええええええええええ</li> <li>・おおおおおおおおおおおおおおおおおおおおおおおおお</li> <li>・かかかかかかかかかかかかかかかかかかかかかかかかか</li> </ul> </dd> <dt>総居室数</dt> <dd>３室</dd> <dt>居室面積</dt> <dd>２０平米</dd> <dt>電話番号</dt> <dd>12-3456-7890</dd> <dt>FAX番号</dt> <dd>12-3456-7890</dd> </dl> </body> </html> dl#sample3 { width: 600px; } dl#sample3 dt{ border-top: 1px solid #fff; float: left; width: 6em; padding: 10px; background-color: orange; } dl#sample3 dd{ border-left: 1px solid #fff; border-top: 1px solid #fff; margin-left: 115px; padding: 10px; background-color: silver; } ul { list-style-type: none; margin: 0 auto; padding: 0; } 各セルに色をつけたいのですが、説明が２行以上に渡ると項目名が対応されないのと、 "電話番号""FAX番号"のような説明が短いセルは幅を短くして、横に並べることが出来ないところで悩んでいます。 もちろん、それらのセルを別classにすれば対応可能ではありますが、テンプレートとして使用する必要があるため、汎用性の高い構成にする必要があるのです。 ご存知の方、どうぞどうぞご教示お願いいたします。
- ベストアンサー
- CSS
- <dl><dt>タグ使用時、インデントが生じない
こんにちは。 <dl><dt><dd>タグを使った文章で、 よく、説明部分の字下げが生じないことが あります。 今回、 <img src="5.gif" style="float:left;"> <dl> <dt>作品例です。</dt> <dd>こんなものを作っています。</dd> </dl> <br clear="left"> というコードで、<dt>と<dd>部分が 並んで表示されます。 何度か、こういうことが生じて、 非常に困っています。 なにが、原因でしょうか。 何か分かる人がいましたら、 よろしくお願いします。
- ベストアンサー
- HTML
- ＨＴＭＬのマークアップ方法
WEB製作を勉強中のものですが、こうゆうソースを見つけたので教えていただけないでしょうか？ <dl class="top_list"> <dd><a href="http://www---------">ぬくぬくマフラーを編もう</a></dd> </dl> <dl class="top_list"> <dd><a href="http://www---------">かぎ針・棒針体験</a></dd> </dl> <dl class="top_list"> <dd><a href="http://www---------">フェルトで季節のスウィーツ作り</a></dd> </dl> のように定義リストで<dt>タグがなくても成立するのですか？ Dreamweaver cs3を使用しているのですがソースは手入力ですか？
- ベストアンサー
- グラフィックソフト
お礼
揃いました。ありがとうございます。 実はpositionはバグとか不具合が難しそうなので避けていたのです。 今回も上からの位置を合わせるのに50％を使ったのですが、 やっぱり全然違う位置に表示されてしまって ^_^; 位置の％が原因とわかるまでに、しばらく悩み諦めかけました。 ％は旧IEでだめなんですね。この事はemに変更して解決しました。 ここまで作るのにかなり順調に出来ていたのに、この質問のリンクの位置問題でかなりの時間を使ってしまいました・・・＿/￣|○ とりあえず、ハックを使わない方向でNO.3のzeffさんのフロートか NO.4のsalonpathさんのpositionで色々テストしてみます。<(_ _)>