- ベストアンサー
リストタグ, float:left; operaで
下記のようにリストタグで [リンク][ 説明 ] というデザインにしたいと思っています。 リンク部分はマウスを当てると浮き出るようにしています。 これがIEとfirefoxではうまく表示されますがoperaではうまく表示されません。 [説明]の部分の<li>が[リンク]部分の<li>を無視して表示されてしまいます。 marginで場所あわせをするとリンクボタンを押したときに全体が動くようになってしまいます。 テーブルタグを使うと、IEで見た場合リンクのボタンがうまく動かないのでテーブルタグはだめっぽいです。 なにか解決案はございますでしょうか？よろしくお願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title></title> <style type="text/css"> <!-- a.link-a{ display:block; width:150px; height:30px; text-align:center; line-height:30px; background-color:#ccddff; } a.link-a:hover{ margin:-2px 0 0 -2px; border:solid #492E07; border-width:0 2px 2px 0; } a.link-a:active{ border-width:2px 0 0 2px; } ul.link{ margin:3px 0; ist-style-type:none; clear:both; } li.float-1{ float:left; width:150px; height:30px; line-height:30px; border:solid #6A5D50; border-width:0px 0px 1px 0px; } li.float-2{ width:530px; line-height:30px; padding:0 0 0 20px; height:30px; background-color:#ebebeb; border:solid #6A5D50; border-width:0px 1px 1px 0px; } li.margin-1{ width:150px; height:30px; line-height:30px; border:solid #6A5D50; border-width:0px 0px 1px 0px; } li.margin-2{ margin:-31px 0px 0px 150px; width:530px; line-height:30px; padding:0 0 0 20px; height:30px; background-color:#ebebeb; border:solid #6A5D50; border-width:0px 1px 1px 0px; } --> </style> </head> <body> <ul CLASS="link"> <li CLASS="float-1"><a class="link-a" HREF="http://okwave.jp/">OKWAVE</a></li> <li CLASS="float-2">日本初、最大級のＱ＆Ａサイト ＯＫＷＡＶＥ</li> </ul> <ul CLASS="link"> <li CLASS="margin-1"><a class="link-a" HREF="http://okwave.jp/">OKWAVE</a></li> <li CLASS="margin-2">日本初、最大級のＱ＆Ａサイト ＯＫＷＡＶＥ</li> </ul> </body> </html>
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
> 下記のようにリストタグで > [リンク][ 説明 ] > というデザインにしたいと思っています。 それをUL要素でヤルのは理屈に合いません。定義リストであるDL要 素を使い、[リンク]をDT要素、[説明]をDD要素にするのです。 で、DTの幅を固定しfloatさせDDにはそれよりチョット広いマージン を与えてやるとか、DTが1行で収まるならfloatはさせずDDのtopを- 1emするとかで、希望のような表示になります。参考URLに使用例が あります。
その他の回答 (3)
- leap_day
- ベストアンサー率60% (338/561)
こんにちは ＞IEとfirefoxだと崩れてしまいます。 ということはOperaでは綺麗にできているということですか？ 上の4点（修正・追加・削除）をしたものに ul.link{ height:31px; }としたものはこちらでは<ul>のデフォルトパディングの違いで左右の表示位置が異なるだけで(FirefoxとOperaが右に40px程ずれている）ほとんど同じにできているのですが・・・ ※ずれている → ul.link { padding:0px; } にすればまったく同じにできます どのように崩れているのでしょうか？ ※提供したのをそのままコピペして使っているのであれば float:left;(半角スペース）（全角スペース）追加 という風にスペースを空ける為に全角スペースを使用しています 全角スペース、全角文字はエラーの元ですので削除してください
お礼
bodyの中身を以下のようにしたときに、改行されずに回り込んでしまいました。 ですが、ul.linkにheightを設定したところうまくいきました。 再度の回答ありがとうございました。 <ul CLASS="link"> <li CLASS="float-1"><a class="link-a" HREF="http://okwave.jp/">OKWAVE</a></li> <li CLASS="float-2">日本初、最大級のＱ＆Ａサイト ＯＫＷＡＶＥ</li> </ul> <ul CLASS="link"> <li CLASS="float-1"><a class="link-a" HREF="http://okwave.jp/">OKWAVE</a></li> <li CLASS="float-2">日本初、最大級のＱ＆Ａサイト ＯＫＷＡＶＥ</li> </ul>
- leap_day
- ベストアンサー率60% (338/561)
こんにちは ul.link { list-style-type:none; 『 l 』打ち忘れ } li.float-2{ float:left; 追加 } li.margin-1{ float:left; 追加 } li.margin-2{ margin:-31px 0px 0px 150px; 削除 float:left; 追加 } ※現在の表示とは少し異なります ・（現在の）IE表示のように<li>間（左右）に隙間を空けるなら li.float-1{ } 及び li.margin-1{ } に magin-right:3px; を追加するか、または li.float-2{ } 及び li.margin-2{ } に margin-left:3px; を追加してください ・（現在の）3ブラウザ、（修正後の）IE表示のように<ul>間（上下）に隙間を空けるなら ul.link { } に height:31px; を追加してください
お礼
回答ありがとうございます。 >・（現在の）3ブラウザ、（修正後の）IE表示のように<ul>間（上下）に隙間を空けるなら >ul.link { } に height:31px; を追加してください 隙間を空けたいのですけど、IEとfirefoxだと崩れてしまいます。 こちらはどうにかなりませんでしょうか？
- kuzumiHK
- ベストアンサー率72% (132/183)
li.float-2にもfloat:left;を入れるとうまくいくかもしれません。
お礼
確かにそうですね。 回答ありがとうございます。