<li>マーク画像付きで、横並びにしたい
-
0 名前： にゃにゃ ： 2006/12/21（木） 12:39 ID:MEqRMSEk
- こちらのサイト、よく利用させていただいています。
（とても参考になります！）
が、何がいけないのかわからなくなってしまいました。
どなたか教えていただけないでしょうか？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Imagetoolbar" content="no">
<title>XXXX FAQサイト</title>
<link rel="stylesheet" type="text/css" href="common.css">
<style type="text/css">
<!--
ul {
padding: 0;
margin: 0;
list-style: outside url(img/list_mark.gif);
}
li {
display:inline;
padding: 3px;
}
-->
</style>
</head>
<body>
<div align="center">
<img src="img/title.gif" width="600" height="108"></div>
<p><b>更新履歴</b>
<iframe src="info/top_info.html" width="100%" height="300" scrolling="auto" marginwidth="0" marginheight="0" frameborder="1">sample</iframe>
</p>
<br><br>
<table border="0" align="center" cellpadding="0" cellspacing="0" boeder="0">
<tr>
<td><div align="center"><img src="img/common.gif" width="355" height="31" hspace="5"></div></td>
<td><div align="center"><img src="img/link.gif" width="355" height="31" hspace="5"></div></td>
</tr>
<tr>
<td align="center" valign="top">
<table border="0" cellspacing="0" cellpadding="3">
<tr>
<td><ul>
<li><a href="info/all.html" target="_blank">共通</a></li>
<li>コールセンタ</li>
<li>サポートセンタ</li>
</ul></td>
</tr>
</table></td>
<td valign="top"><table border="0" align="center" cellpadding="3" cellspacing="0">
<tr>
<td><strong>端末</strong></td>
</tr>
<tr>
<td><ul>
<li><a href="#" target="_blank">XXXXXX １２３４５６</a></li>
<li><a href="#" target="_blank">AAAAAA</a></li>
<li><a href="#" target="_blank">KKKKKKKKKKKKKKKK</a></li>
</ul></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
こちらのサイトを参考に最初はfloat:left;でwidthを指定してみましたが、
そうするとすべての幅が固定されてしまうので、できればテキスト数に合わせて幅が変化できるようにしたいと思い、
display:inline;に変更したところ、<li>のマーク画像が表示されなくなってしまいました。
どうすれば、マークに画像を使用して、横並びにできるのでしょうか？
どうか、よろしくお願いします。
-
1 名前： とりあえず ： 2006/12/21（木） 12:39 ID:c3j6.Ucs
- ><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
とりあえず、システム識別子が違うような気がしますが。
loose.dtd だったかな？
-
2 名前： ためしてないけど ： 2006/12/21（木） 12:39 ID:wfv3mWbZ
- １の方が指摘した点が原因ならそれで終了だと思いますが・・・、
でも、それでもだめなら、display: inline;がやっぱり原因かもしれません。
「ブロック要素じゃないならマークはつけてやらねぇよ！」みたな・・・。
もしそうなら、「ul」のスタイルに
list-syle-type: 〜;
と言うのを加えてみてはどうでしょう？
これはリストの頭につける「マーク」の表示を指定するものです。
〜の部分はマークの種類で、黒塗り丸は「disc」、白抜き丸は「circle」黒塗り四角は「square」です。
試してないんで上手くいくか分かりませんが、どうしてもダメならやってみてもいいと思います。
-
3 名前： Newのり太 ： 2006/12/21（木） 12:39 ID:zY6N.UnM
- フレームを使いたいのなら、frameset.dtd ですかね。＞DTD
リスト画像を li の背景にし、その分左パディングを多めにとるとか。
-
4 名前： にゃにゃ ： 2006/12/21（木） 12:39 ID:MEqRMSEk
- 何とかできました。。。
とりあえず様
システム識別子を修正し、DOCTYPE宣言を何通りか試してみましたが、結果変わりませんでした。。。
でも基本間違えててはダメですね。
以後、気をつけます。
ためしてないけど様
list-syle-type: 〜;もやってみましたが、私の希望通りにはいきませんでした。
しかしこういう可能性もあるんですね。勉強になります。
Newのり太様
背景に設定したところ、きちんと横並びにできました。
こういう方法を取ればよかったのですね。
アドバイス、ありがとうございました。
皆様、ありがとうございました。
