ようこそ ゲスト さん、新規登録（無料）して気になる疑問を解決しませんか？
はじめての方へ｜ヘルプ｜FAQ
スポンサーサイト（詳細）

質問
QNo.4002742 リストタグ, float:left; operaで
質問者：ONEONE 下記のようにリストタグで
[リンク][　　説明　　]
というデザインにしたいと思っています。
リンク部分はマウスを当てると浮き出るようにしています。

これが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>
困り度：
  • 暇なときにでも
質問投稿日時：
08/05/06 21:58
この質問に対する回答は締め切られました。
最新から表示｜回答順に表示｜良回答のみ表示

回答良回答20pt
ANo.4 > 下記のようにリストタグで
> [リンク][　　説明　　]
> というデザインにしたいと思っています。

それをUL要素でヤルのは理屈に合いません。定義リストであるDL要
素を使い、[リンク]をDT要素、[説明]をDD要素にするのです。

で、DTの幅を固定しfloatさせDDにはそれよりチョット広いマージン
を与えてやるとか、DTが1行で収まるならfloatはさせずDDのtopを-
1emするとかで、希望のような表示になります。参考URLに使用例が
あります。
回答者：grumpy_the_dwarf
種類：アドバイス
どんな人：経験者
自信：自信あり
回答日時：
08/05/07 09:34
参考URL： ​http://www.med.yamanashi.ac.jp/~cmr/announce/2007.php​
この回答へのお礼確かにそうですね。

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

回答
ANo.3 こんにちは

＞IEとfirefoxだと崩れてしまいます。
ということはOperaでは綺麗にできているということですか？

上の4点（修正・追加・削除）をしたものに ul.link{ height:31px; }としたものはこちらでは<ul>のデフォルトパディングの違いで左右の表示位置が異なるだけで(FirefoxとOperaが右に40px程ずれている）ほとんど同じにできているのですが・・・

※ずれている　→　ul.link { padding:0px; } にすればまったく同じにできます

どのように崩れているのでしょうか？

※提供したのをそのままコピペして使っているのであれば
float:left;(半角スペース）（全角スペース）追加
という風にスペースを空ける為に全角スペースを使用しています
全角スペース、全角文字はエラーの元ですので削除してください
回答者：leap_day
種類：補足要求
どんな人：一般人
自信：参考意見
回答日時：
08/05/07 01:15
この回答へのお礼bodyの中身を以下のようにしたときに、改行されずに回り込んでしまいました。
ですが、ul.linkにheightを設定したところうまくいきました。

再度の回答ありがとうございました。



<ul CLASS="link">
<li CLASS="float-1"><a class="link-a" HREF="&#8203;​http://okwave.jp/">OKWAVE</a></li>&#8203;​
<li CLASS="float-2">日本初、最大級のＱ＆Ａサイト　ＯＫＷＡＶＥ</li>
</ul>
<ul CLASS="link">
<li CLASS="float-1"><a class="link-a" HREF="&#8203;​http://okwave.jp/">OKWAVE</a></li>&#8203;​
<li CLASS="float-2">日本初、最大級のＱ＆Ａサイト　ＯＫＷＡＶＥ</li>
</ul>

回答良回答10pt
ANo.2 こんにちは

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; を追加してください
回答者：leap_day
種類：アドバイス
どんな人：一般人
自信：参考意見
回答日時：
08/05/06 23:00
この回答へのお礼回答ありがとうございます。

>・（現在の）3ブラウザ、（修正後の）IE表示のように<ul>間（上下）に隙間を空けるなら
>ul.link { } に　height:31px; を追加してください

隙間を空けたいのですけど、IEとfirefoxだと崩れてしまいます。

こちらはどうにかなりませんでしょうか？

回答
ANo.1 li.float-2にもfloat:left;を入れるとうまくいくかもしれません。
回答者：kuzumiHK
種類：回答
どんな人：専門家
自信：参考意見
回答日時：
08/05/06 22:53
この回答へのお礼この回答にお礼をつける(質問者のみ)
最新から表示｜回答順に表示｜良回答のみ表示
スポンサーサイト（詳細）
このページのトップへ