掲示板/スタイルシート質問板/過去ログ/一覧/ 左つめ、リストのマークと画像の同時表示は？

0 名前： ギンペイ ： 2006/11/30（木） 18:30 ID:lHAQUbKq: 何度も質問をさせていただいて、またご回答くださりありがとうございます。

このレイアウトで、リストのマークと画像のマーカーを同時に表示できないのでしょうか、
”←にサークル～”の左にはサークルのマークを表示したいのです。
また（赤、グリーン）の画像とその列の文字”この列は～”の間を詰めたいのですが、出来ますでしょうか。

どなたかご伝授をいただけたらと思い投稿させていただきました。
なにとぞ宜しくお願いいたします。

<html>
<head>
<title>TAG index Webサイト</title>

<style type="text/css">

</style>

</head>
<body>

<TABLE width="300" height="200"cellpadding="0" cellspacing="0" border="1">
<TR ><TD width="300" valign="top" align="left">

<ul>
<li>この列は赤画像マーカー
<ul>
<li>この列はグリーン画像</li>
<li>この列はグリーン画像</li><BR>

←にサークルマークを配置したい</li>

</ul>
</li>

<li>この列は赤画像マーカ-</li>
</ul>

</TD></TR>
</TABLE>

</body>
</html>

1 名前：匿名： 2006/11/30（木） 18:30 ID:braAjNZo

ちょっとやってみました。
もっとスマートなやり方もあるのかもしれません。

このソースを表示すると、「←にサークルマークを配置したい」に赤画像マーカーが表示されるようになっています。
.circleの部分のスタイルで指定していますので、使用予定の画像を指定しなおしてください。（スタイル名も適当なものに付け替えてください）

参考までに。

<!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">
	<title>test</title>
	<meta http-equiv="content-style-type" content="text/css">

<style type="text/css"> 
<!-- 
table {width:300; height:200; 
border-spacing:0; border: 1px #000000 solid;}

ul { list-style-image:url("http://www.nizm.co.jp/sitemap/red.gif");
margin: 0px 20px 0px 16px;
padding: 0px;font-size:15 ;font-family: 'MS ゴシック';
color:#0000FF; }

tr { padding:0; width: 300; }

ul ul { list-style-image:url("http://www.nizm.co.jp/sitemap/green.gif");
margin: 10px 0px 10px 19px;
padding: 0px;font-size:12px; font-family: 'MS ゴシック';
color:#000000;line-height:1.5;}

.circle { list-style-image:url("http://www.nizm.co.jp/sitemap/red.gif");
margin-top: -0.35em;}

--> 
</style> 

</head> 
<body> 
 <table>
  <tr><td>
    <ul>
     <li>この列は赤画像マーカー
      <ul>
       <li>この列はグリーン画像</li>
       <li>この列はグリーン画像</li>
       <li class="circle">←にサークルマークを配置したい</li>
      </ul>
     </li>
    <li>この列は赤画像マーカ-</li>
   </ul>
  </td></tr>
</table>
</body> 
</html>

2 名前： ギンペイ ： 2006/11/30（木） 18:30 ID:yUdue6Cb: 匿名さん、アドバイスありがとうございます。

私の説明に不足があったと思われます、

”←にサークルマークを配置したい</li>”の”サークルマーク”は画像ではなく一般的な
リストのマークを表示したいのです。

下のの様に記述するとサークルマークが表示されます。このマークを
”←にサークルマークを配置したい</li>”の左側に表示させたい、という意味です。
レイアウトを崩さずにうまく表示させたいのですが。

なにとぞ宜しくお願いいたします。

<html>
<head>
<title></title>

<style type="text/css">

</style>

</head>
<body>

<ul>
<li>←このサークルを表示させたいのです</li>
</ol>

</body>
</html>

3 名前： sasame ： 2006/11/30（木） 18:30 ID:F5cxQaxL: <li style="list-style-image:none;list-style-type:circle;">←このサークルを表示させたいのです</li>

あとは応用してください。

4 名前： ギンペイ ： 2006/11/30（木） 18:30 ID:R/a/Zpyf: sasameさん、

目から鱗が落ちた思いです。その様に記述すれば良いのですね、
適切なアドバイス本当にありがとうございました。

ギンペイ